介绍:
JavaScript是一种专门在浏览器编译并执行的编程语言
JavaScript处理用户与浏览器之间请求问题
JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言
弱类型编程语言风格 VS 强类型编程语言风格
强类型编程语言风格:认为对象行为应该受到其修饰类型严格约束。
Java采用【强类型编程语言风格】对【面向对象思想】来进行实现的编程语言
class Student{
public String sname;
public void sayHello(){
System.out.print("hello world");
}
}
Student stu = new Student();
stu.sname="mike"; //stu对象能够调用属性只有sname
stu.sayHello(); //stu对象能够调用方法只有sayHello()
stu.sid =10; // 在Java认为是语法错误,修饰stu对象的Student类型没有提供这个属性
弱类型编程语言风格: 认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定对象可以调用属性和方法
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中标识符命名规则:
1.标识符只能由四种符号组成 英文字母,数字 , 下划线,美元符号($)
2.标识符首字母不能以"数字"开头
3.标识符不能采用JavaScript关键字 比如 var
JavaScript数据类型:
typeof 变量名; 返回当前变量的数据类型名称
1.分类:
基本数据类型 & 高级引用数据类型
2.基本数据类型:
数字类型(number),
字符串类型(string),
布尔类型(boolean)
3.数字类型(number):
JavaScript中将整数与小数合称为number类型
4.字符串类型(string):
JavaScript中字符与字符串合称为string类型
JavaScript字符或者字符串既可以使用' '又可以使用" "
5.布尔类型(boolean): JavaScript中boolean类型的值只有true或者false
6.高级引用数据类型:
object类型
function类型
7.object类型:
JavaScript中所有通过【构造函数】生成的对象都是object类型
8.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,表示变量接收了一个【无穷大数字】
此时这个变量数据类型,在JavaScript依然认为number类型
JavaScript中控制语句
JavaScript中控制语句与Java中控制语句语法格式完全一致
JavaScript中函数声明方式
1.命令格式:
function 函数名(形参名1,形参名2){
JavaScript命令行
JavaScript命令行
return 将函数运行结果进行返回
}
2.注意:
1)JavaScript中,所有函数在声明时,都需要使用function进行修饰
2)JavaScript中,所有函数在声明时,禁止指定函数返回数据类型
3)JavaScript中,所有函数在声明时,形参既不能使用var来修饰也不能使用数据类型修饰
4)JavaScript中,所有函数在声明时,如果有返回值,此时应该通过return进行返回
JavaScript函数调用方式:
1.浏览器并不会自动调用JavaScript函数
2.可以通过命令行方式来调用Java函数
3.通过绑定在HTML标签上监听事件通知浏览器调用指定函数进行处理
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对象
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属性值");
举个栗子
部门10
部门20
部门30
var domArray = document.getElementsByName("deptNo");
通知document对象将所有name属性等于deptNo的标签关联的DOM对象进行定位并封装到一个数组进行返回。 domArray就是一个数组存放本次返回的所有DOM对象
3.根据html标签类型定位DOM对象
命令格式:
var domArray = document.getElementsByTagName("标签类型名");
举个栗子:
var domArray = document.getElementsByTagName("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;
- DOM对象对标签中【文字显示内容】进行赋值与取值
文字显示内容: 只存在于双目标签之间;
取值操作:
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)监听用户何时使用鼠标操作当前标签
2)监听用户何时使用键盘操作当前标签
3.监听用户何时使用鼠标操作当前标签:
1) onclick : 监听用户何时使用鼠标【单击】当前标签
2) onmouseover: 监听用户何时将鼠标【悬停】当前标签上方
3) onmouseout : 监听用户何时将鼠标从当前标签上方【移开】
4) onfocus : 监听用户何时通过鼠标让当前标签获得【光标】
5) onblur : 监听用户何时通过鼠标让当前标签丢失【光标】
4.监听用户何时使用键盘操作当前标签
onkeydown :监听用户何时在当前标签上【按下键盘】
onkeyup :监听用户何时在当前标签上【弹起键盘】
onload监听事件:
1 作用: 监听浏览器何时将网页中HTML标签加载完毕
2.意义: 浏览器每加载一个HTML标签时,自动在内存生成一个dom对象。
在浏览器将网页所有标签加载完毕时,意味当前网页中所有标签都生成对应DOM对象。onload此时就可以触发调用函数对浏览器中标签进行处理,此时不会出现未找到DOM对象问题
3.使用:
基于DOM对象实现监听事件与HTML标签之间绑定
1.前提:
实际开发过程中,同一个监听事件往往与多个HTML标签进行绑定
这样增加开发强度,在未来维护过程中增加维护难度
2.命令形式:
domObj.监听事件名 = 处理函数名
此处处理函数名后面是不能出现()
3.举个栗子:
var domObj = document.getElementById("one");
domObj.onclick = fun1; //注意函数名后面不能有()
相当于
//此处函数名后面必须有()
arguments:
1.JavaScript中,每一函数都包含一个arguments属性
2.arguments属性是一个数组
3.在函数调用时,将实参出入到函数的arguments中,再由arguments将数据传递给形参
4.arguments属性存在,可以将JavaScript中函数在调用时传递实参与形参进行格式,增加函数调用灵活性
5.arguments属性只能在函数体内使用,不能在函数体外使用
function类型对象
1.介绍:
1)function是JavaScript中一种高级数据类型
2)一个function类型对象用于管理一个具体函数
- JavaScript中function类型相当于Java中Method类型
2.function类型对象声明方式:
1)标准声明方式
2)匿名声明方式
3.function类型对象声明方式----标准声明方式
function 函数对象名(参数1,参数2){
命令;
}
4.function类型对象声明方式----匿名声明方式
var 函数对象名 = function (参数1,参数2){ 命令1,命令2.。。。};
5.function类型对象的创建时机
浏览器在加载