报纸门户网站建设方案,那曲地区建设局网站,布吉网站建设哪家效益快,网站网页制作教程JavaScript
一、介绍: 1.JavaScript是一种专门在浏览器编译并执行的编程语言 2.JavaScript处理用户与浏览器之间请求问题 3.JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言
二、弱类型编程语言风格 VS 强类型编程语言风格 … JavaScript
一、介绍: 1.JavaScript是一种专门在浏览器编译并执行的编程语言 2.JavaScript处理用户与浏览器之间请求问题 3.JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言
二、弱类型编程语言风格 VS 强类型编程语言风格 1.强类型编程语言风格认为对象行为应该受到其修饰类型严格约束。 Java采用【强类型编程语言风格】对【面向对象思想】来进行实现的编程语言 class Student{ public String sname; public void sayHello(){ System.out.print(hello world); } } Student stu new Student(); stu.snamemike; stu对象能够调用属性只有sname stu.sayHello(); stu对象能够调用方法只有sayHello() stu.sid 10; // 该代码在Java中认为是语法错误因为修饰stu对象的Student类型没有提供这个属性 2.弱类型编程语言风格 认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定对象可以调用的属性和方法 JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言 var stu new Object();//stu对象相当于【阿Q】 stu.car 劳斯莱斯;//合法 stu.play function (){ return 天天打游戏} stu.play();
三、JavaScript中变量声明方式: 1.命令格式: var 变量名; var 变量名 值; var 变量名1,变量名2值 2.注意 在JavaScript中变量/对象在声明时不允许指定【类型】只能通过var来进行修饰
四、JavaScript中标识符命名规则:与Java相同 1.标识符只能由四种符号组成 英文字母数字 , 下划线美元符号($) 2.标识符首字母不能以数字开头 3.标识符不能采用JavaScript关键字 比如 var
五、JavaScript数据类型 1.分类 基本数据类型 高级引用数据类型 基本数据类型 number、string、boolean 数字类型numberJavaScript中将整数与小数合称为number类型。 字符串类型(string)JavaScript中将字符与字符串合称为string类型 JavaScript字符串既可以使用单引号又可以使用双引号。 布尔类型(boolean)JavaScript中boolean类型的值只有true或false。 高级引用数据类型object、function object类型JavaScript中所有通过【构造函数】生成的对象都是object类型。 function类型相当于Java中java.lang.reflect.Method JavaScript中所有函数都是function类型 ********** JavaScript是弱类型编程语言根据变量赋值内容来判断变量数据类型 JavaScript中变量的数据类型可以根据赋值内容来进行动态改变 *********************
六、JavaScript中特殊【值】 1.undefined: JavaScript中所有变量在没有赋值时其默认值都是undefined 由于JavaScript根据变量的赋值来判断变量类型此时由于变量 没有赋值因此JavaScript无法判断当前变量数据类型此时返回 也是undefiled,因此初学者将undefined也理解为是一种数据类型 这种理解是错误的。 2.null JavaScript中当一个对象赋值为null时表示对象引用了一个【空内存】 这个空内存既不能存储数据也不能读取数据。 此时这个对象数据类型在JavaScript依然认为是object类型。 3.NaN JavaScript中当一个变量赋值为NaN表示变量接收了一个【非法数字】123 合法数字 abc123 非法数字 此时这个变量数据类型在JavaScript依然认为number类型。 4.infinity JavaScript中当一个变量赋值为infinity表示变量接收了一个【无穷大数字 比如1/0】 此时这个变量数据类型在JavaScript依然认为number类型。
七、JavaScript中控制语句 JavaScript中控制语句与Java中控制语句语法格式完全一致
八、JavaScript中函数声明方式 1.命令格式: function 函数名(形参名1,形参名2,...){ 函数体; return 将函数运行结果进行返回; } 2.注意: 1)JavaScript中所有函数在声明时都需要使用function进行修饰 2)JavaScript中所有函数在声明时禁止指定函数返回值数据类型 3)JavaScript中所有函数在声明时形参既不能使用var来修饰也不能使用数据类型修饰 4)JavaScript中所有函数在声明时如果有返回值此时应该通过return进行返回
九、JavaScript函数调用方式: 1.浏览器并不会自动调用JavaScript函数 2.可以通过命令方式来调用JavaScript函数 3.通过绑定在HTML标签上监听事件通知浏览器调用指定函数进行处理
------------------------------------------------------------------------------------------------------------------ JavaScript应用篇
一、JavaScript作用: 帮助浏览器对用户提出请求进行处理。
二、DOM对象: 1.DOM 英文全称 Document Object Model 中文全称【文档模型对象】 2.JavaScript不能直接操作HTML标签只能通过HTML标签关联的DOM对象对HTML标签下达指令。
三、DOM对象生命周期 1.浏览器在接收到html文件之后将HTML文件标签加载到浏览器缓存中 每当加载一个html标签时候自动为这个标签生成一个实例对象这个实例对象就是DOM对象。 2.在浏览器关闭之前或则浏览器请求其他资源文件之前本次生成的DOM对象一直存活在浏览器缓存中。 3.在浏览器关闭时候浏览器缓存中DOM对象会被销毁。 4.在浏览器请求到新资源文件后浏览器缓存中原有的dom对象将会被覆盖。
四、document对象 1.document对象被称为【文档对象】 2.document对象用于在浏览器内存中根据定位条件定位DOM对象。
五、document对象生命周期: 1.在浏览器将网页中所有标签加载完毕后在内存中将使用【树形结构】 存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象管理这颗树DOM树 ****在浏览器将接收的网页中标签加载完毕后自动在浏览器内存生成一个document对象**** 2.一个浏览器运行期间只会生成一个document对象 也就是说一个HTML文件就只有一个document 一个浏览器分成三个网页[比如在线考试管理系统]那就是分成了三个网页就有三个document对象 【一个BOM可以有一个或多个document一个document对象中有多个DOM】 3.在浏览器关闭时负责将document对象进行销毁
六、通过document对象定位DOM对象方式: 1.根据html标签的id属性值定位DOM对象 命令格式 var domObj document.getElementById(id属性值) 举个例子 var domObj document.getElementById(one) 通知document对象定位id属性等于one的标签关联的DOM对象 2.根据html标签的name属性值定位DOM对象 命令格式 var domArray document.getElementsByName(name属性值); 举个例子 input typecheckbox namedeptNo value10部门10 input typecheckbox namedeptNo value20部门20 input typecheckbox namedeptNo value30部门30 var domArray document.getElementsByName(deptNo); 就是通知document对象将所有name属性等于deptNo的标签关联的DOM对象进行定位 并封装到一个数组进行返回。 domArray就是一个数组存放本次返回的所有DOM对象。 3.根据html标签类型定位DOM对象 命令格式 var domArray document.getElementsByTagName(标签类型名); 举个例子 var domArray document.getElementsByTagName(p); p段落标签/p 就是通知document对象将所有段落标签关联的dom对象进行定位并封装到一个数组返回
七、DOM对象对HTML标签属性操作 1.DOM对象 对标签value属性进行取值与赋值操作 取值操作: var domObj document.getElementById(one); var num domObj.value; 赋值操作: var domObj document.getElementById(one); domObj.value abc; 2.DOM对象 对标签中【样式属性】进行取值与赋值操作 取值操作: var domObj document.getElementById(one); //读取当前标签【背景颜色属性】值 var color domObj.style.背景颜色属性 赋值操作: var domObj document.getElementById(one); //通过DOM对象对标签中【背景颜色属性】进行赋值 domObj.style.背景颜色属性 值 3.DOM对象 对标签中【状态属性】进行取值与赋值操作 状态属性状态属性的值都是boolean类型 disabled true ; 表示当前标签不可以使用 disabled false; 表示当前标签可以使用 checked: 只存在与radio标签与checkbox标签 checked true ; 表示当前标签被选中了 checked false; 表示当前标签未被选中 取值操作: var domObj document.getElementById(one); var num domObj.checked; 赋值操作: var domObj document.getElementById(one); domObj.checked true; 4. DOM对象 对标签中【文字显示内容】进行赋值与取值 文字显示内容: 只存在于双目标签之间;tr100/tr 取值操作: var domObj document.getElementById(one); var num1 domObj.innerText; 赋值操作: var domObj document.getElementById(one); domObj.innerText 值 innerText与innerHTML 区别: innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值 innerText只能接收字符串 innerHTML既可以接收字符串又可以接收html标签
八、JavaScript监听事件 1.监听事件: 监听用户在何时以何种方式对当前标签进行操作。当监听到相关行为时 通知浏览器调用对应JavaScript函数对当前用户请求进行处理。 2.监听事件分类: 1)监听用户何时使用鼠标操作当前标签 * onclick : 监听用户何时使用鼠标【单击】当前标签 * onmouseover: 监听用户何时将鼠标【悬停】当前标签上方 * onmouseout : 监听用户何时将鼠标从当前标签上方【移开】 * onfocus : 监听用户何时通过鼠标让当前标签获得【光标】 * onblur : 监听用户何时通过鼠标让当前标签丢失【光标】 2)监听用户何时使用键盘操作当前标签 * onkeydown :键盘弹起 * onkeyup :键盘按下
------------------------------------------------------------------------------------------------------------------------------------------------ JavaScript高级篇 一、arguments 1.在JavaScript中每一个函数都包含一个arguments属性 2.arguments属性是一个数组 3.在函数被调用的时候是先将实参输入到函数的arguments属性中再由arguments将数据传递给形参 4.arguments属性的存在可以将JavaScript中函数在调用时传递的实参与函数的形参进行隔离增强函数调用的灵活性 5.arguments属性只能在函数体内使用不能再函数体外使用
二、function类型对象 1.介绍 * function是JavaScript中一种高级数据类型 * 一个function类型对象用于管理一个具体函数 * JavaScript中的function类型相当于java中的Method类型 2.function类型对象命名方式 * 标准声明方式 function 函数对象名形参{ 函数体; }; * 匿名声明方式 var 函数对象名 function形参{函数体;}; 3.function类型对象的创建时机 * 浏览器在加载script标签时一共加载2次 第一次加载将script标签中所有以标准形式声明的函数对象进行创建 第二次加载将script标签里所有命令行按照自上而下的顺序来执行。
三、局部变量与全局变量 1.局部变量 * 定义在函数体内声明的变量叫做局部变量。 function fun1(){ var name 张三; } * 特征局部变量只能在当前函数内使用不能在函数外使用。 2.全局变量 * 定义全局变量可以在当前的HTML文件中所有的地方使用 全局变量被声明时自动分配给window对象作为其属性 * 声明全局变量 第一种方式直接在scripr标签下通过var声明的变量就是全局变量。 第二种方式在函数体内没有通过var修饰符声明的变量也是全局变量。这种情况下函数必须被调用后这个全局变量才生效。
四、object类型对象特征 1.定义在JavaScript中所有通过【构造函数new】生成的对象其数据类型都是object类型。 2.特征object类型对象在创建完毕后可以根据实际情况任意添加属性和方法也可以移除其属性和方法。 3.属性维护两种方式 第一种方式 添加属性object类型对象名.新属性名 属性值; 添加函数object类型对象名.新函数名 function(){}; 第二种方式 添加属性object类型对象名[新属性名] 属性值; 添加函数object类型对象名[新函数名] function(){}; 移除object类型对象的属性和方法 移除属性delete object类型对象名.属性名; 移除方法delete object类型对象名.函数名;
五、自定义构造函数 1.命令格式 function 函数对象名(){} 2.构造函数调用var object类型对象名 new 函数对象名(); 3.普通函数与构造函数的区分 * 函数没有被调用之前无法区分只能根据函数调用形式来区分。 * var 变量名称 函数对象名();这种形式调用就是普通函数 * var 变量名称 new 函数对象名();这种形式调用就是构造函数。 * 返回值普通函数运行后需要通过return将执行结果返回 而构造函数运行后直接返回一个object类型的对象此时函数中的return失效。
六、关于this 1.java中的this * 在构造方法中this指向由构造方法生成的实例对象。 * 在普通方法中this指向调用该方法的实例对象 2.JavaScript中的this与java中的this完全一样 * 在构造函数中this指向由构造函数生成的实例对象 * 在普通函数中this指向调用该函数的实例对象
七、JSON 1.JavaScript中获得object类型对象的方式有两种 方式一由构造函数生成的对象都是object类型对象。 方式二由JSON数据描述格式生成的对象也都是object类型对象。 2.JSON数据描述格式是JavaScript中获得object类型对象的简化版 3.JSON的标准命令格式 var obj {属性名1:属性值,属性名2:属性值}; 开发人员习惯上将由JSON格式描述的对象称为JSON对象。其实就是object类型对象。 4.JSON数组 就是在一个数组中存放若干个JSON对象这样的数组就是JSON数组。
