Web前端基础技术CSSJSHTML第9章JavaScript基础(1/2)Contents目录JavaScript概述数据类型类型变量与类型转换运算符与表达式程序结构1.
JavaScript概述基于客户端浏览器运行的一种解析型脚本语言(顺序解析执行,无须编译);主要作用:实现与用户的交互;获取或动态更新HTML元素的内容和样式
应用:表单数据获取和验证动态更新HTML内容:添加/移除元素动态改变元素的属性:值、样式;示例第1个JavaScript程序,输出数据目的:1.掌握代码书写位置:内部方式;外部文件方式。2.掌握注释的使用3.掌握调试方法:1)弹出对话框:alert(一个不同类型的数据);如:alert(“ok!”);2)控制台输出:console.log(逗号分隔,多个不同类型数据),如:console.log(“ok!”,100,true);1可以省略type属性内部方式写在head标记内(了解)2写在body标记内(了解)在浏览器按F12中查看输出3通常写在文档最后写在文档末尾,掌握添加firstJS.js文件,在js文件内不需要script标记使用外部js文件,在HTML中使用script标记的src属性引用目的:代码与HTML分离;代码复用。在html文件中引用外部js文件,通常放在HTML文件末尾相当于在script标记中插入外部js文件的内容外部文件方式12二、.数据类型1.Number;2.String;3.Boolean;4.null;5.Undefined;6.Object;7.Function;8.数组Array整数:10进制;8进制;16进制
2进制;如:123
0o120XFF/0xff0B1100浮点数:小数与其他语言学习方法、学习思路相同,从数据类型开始=>变量=>类型转换=>表达式=>程序结构
255|10|62|655351.Number数字:整数和浮点数,通常使用十进制。console.log(0xff,"|",0o12,"|",0o76,"|",0xFFFF)注:结果自动转换为10进制输出示例:在控制台输出不同进制的数字使用单引号或双引号括起来任何字符序列,如:"我在学习JavaScript"'我在学习JavaScript'例如:1.在双引号中使用双引号;2.分行显示console.log("他说:'你好!'")console.log("他说:\"你好!\"
")alert("你的选择是:\n1)A
2)B
varbook={
id:1,
bookName:"三国演义",
price:12.8,
};console.log(book)console.log(book.id,book.bookName,book.price)
示例:定义一个Book对象,保存一本书的信息掌握对象的定义方法{属性名:属性值,…}定义函数的目的是为了共享代码,实现代码复用,其类型名为Function。定义函数的语法为:function函数名(参数列表){
/*程序片段*/}
functionadd(x,y){
returnx+y;
}
varfunc=add//保存函数类型的变量
varz=func(10,20)
//作为add函数使用
数组是特殊的对象,可以使用newArray()方式创建数组,但更简单的方式是使用中括号[]定义数组,例如:vararr=newArray(3)/*定义包含3个元素的数组arr*/定义数组后,可以使用任意下标对元素赋值,数组的长度由最大下标值决定,使用length属性获取数组的长度。没有赋值的数组元素的默认值为undefined(即未赋值)8.数组varx=[]/*定义空数组x,长度是任意的*/x[0]=100/*指定数组下标赋值*/x[100]="ABC"/*指定数组下标赋值,元素的类型可以不同*/console.log(x[0],x[100])/*输出结果为:100ABC*/console.log(x[2])/*输出结果为:undefined*/console.log(x.length)/*输出长度,结果为101*/vary=[1,2,3]/*定义的同时初始化数组y*/通常我们会使用中括号[]语法来定义对象,例如:掌握数组的定义方法[元素1,元素2,…]
示例:定义一个books数组,保存多本书的信息掌握数组的定义方法[元素1,元素2,…]试一试试一试1.理解练习:编程测试
2.理解练习:编程测试测试以下表达式,使用你的调试方法输出结果varbol=NaN==NaN=>bol=varx;x==undefinedy==undefined=>?typeof(y)==‘undefined’//是否是存在的类型,是/否99==“99a”//默认将字符串使用Number转换为数字进行比较99==‘99’结果是?值/值;值/引用会转换为值类型比较;而两者均为引用时作为对象比较1.下面哪个不是JavScript的注释符A.//
B./**/
C.
D.全是2.JavaScrip代码的使用方式包括:A.内嵌方式
B.内部方式
C.外部文件方式
D.全是3.console.log方法的主要作用是在浏览器的控制台输出调试信息A.正确