Web前端开发（HTML5+CSS3+JavaScript） 课件 第9章 JavaScript基础1

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

3)C")2.String字符串直接使用比较少，一般两种场景：1.变量赋值为null（此时为object类型）；2.一般在使用函数查找元素对象时，如果未找到，此时函数返回值为null3.Boolean布尔类型：取值为：true|false4.null(值)对象类型的值，表示不指向任何对象，即不存在这个对象(一般由函数返回)特殊字符：\n\’\"\\1.未声明的变量，或者未赋值的变量；2.对象中不存在的属性对象一般包含属性和方法.使用new关键字创建：newObject();(很少直接使用该方式创建对象)varobj=newObject()//创建对象=‘张三’

//可以为对象指定任意属性obj.age=18console.log(,obj.age,obj.x)//通过对象.属性名引用5.undefined（类型/值）6.Object对象类型通常我们会使用大括号语法来定义对象，例如：varobj={name:'张三',age:18}/*输出属性*/console.log(,obj.age)所有变量都使用var关键字进行声明掌握对象的定义方法｛属性名:属性值,…｝

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函数使用

alert(typeofadd)//获取add的类型：结果为function7.Function:函数类型，所有定义的函数都是函数类型形式参数不需要说明类型，返回值也不需要声明类型,没有返回值可以不写return语句

数组是特殊的对象，可以使用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,…]试一试<script>//1.输出不同进制的数字

console.log(25,"|",0b1101,"|",0o16,"|",0x1a);//结果：25|13|14|26//2.字符串类型string//使用单引号或双引号括起来的任意字符

console.log("他说：'你好！'");console.log('他说："你好！"');console.log('他说："你好！"');//3.布尔类型booleanconsole.log(true,false);//4.null值，用于函数的返回值，表示不存在

//5.undefined类型，表示变量未声明，或者声明了没有赋值；对象的属性不存在，则取他们的类型时为undefinedvary;//任何类型的变量，都使用var进行声明

console.log(y,typeofy,typeofz);//结果为undefined//6.对象类型

varobj=newObject();="zs";obj.age=20;console.log(obj);//JSON-JavaScriptObjectNotationJavaScipt对象表示法

varstudent={name:"zs",age:18};console.log(,student.age);//7函数类型Functionfunctionadd(x,y){returnx+y;}varfunc=add//保存函数类型的变量

varz=func(10,20)//作为add函数使用

alert(z)//8数组类型

vararr=[]arr[0]=1arr[1]=2arr[10]=3console.log(arr,"数组长度："+arr.length)</script>数据类型示例代码，上机测试三、变量的声明和使用变量：命名的内存单元，暂存数据；js变量为可变(variant)类型，类型由值决定，在赋值后决定其类型。命名规则，标识符的命名规则。varx; //0.声明变量；当前值为undefined，类型为Undefined。x=10; //1.当前为Number类型x="abc" //2.当前为字符串String类型x=true; //3.当前为Boolean类型x=null; //4.当前为Object类型，值为null。x="102"; //5.字符串类型x='102a'; //6.字符串类型使用typeof函数取得变量类型：typeof变量名=>函数返回值为小写字符串类型的类型名

；（1）变量声明和使用：可变类型---所有的变量都使用var关键字声明，表示可以保存任意类型数据（2）类型转换：1.字符串

数字：Number/parseInt/parseFloat√

parseXXX函数:只取数字(整数parseInt或小数parseFloat)开头部分，因此不会四舍五入；非数字开头的字符串执行结果为NaNvarx1="100";varx2="100.89abc";varx3="abc100";console.log(Number(x1),Number(x2),Number(x3));console.log(parseInt(x1),parseInt(x2),parseInt(x3));console.log(parseFloat(x1),parseFloat(x2),parseFloat(x3));√

Number函数将纯数字字符串转换为数字；非数字字符串转换结果为NaN，例如；Number(’10a’)NaNNaN：NotaNumber表示结果不是一个数字。√Number函数：null和空字符串””转换为数字为：0，但undefined将转换为NaN（2）类型转换：2.数字->字符串，使用函数toString(),或使用连接符+””(空字符串)

//2.转换为指定进制数字

varx=123

y=x.toString(2)//y,z,a不声明也可以直接赋值使用

z=x.toString(8)

a=x.toString(16)

console.log("2进制为:"+y,",8进制为："+z,",16进制为："+a);（2）类型转换：3.数字->boolean所有的非0数字都可以转换为true,只有0为false。（2）类型转换：4.boolean

数字true1;false0。Boolean(10)true;Boolean(-10)true;

注意；Boolean(undefined)false;Boolean(null)false;Boolean("")false;Boolean(NaN)falseNumber(true)1;Number(false)0;使用isNaN函数可以判断一个变量是否是非数字，结果为true时表示非数字，不能使用Number函数转换为数字，例如：varx1="100a"varx2="abc"varx3="89.7"console.log(isNaN(x1),isNaN(x2),isNaN(x3))结果为:truetruefasle。结果为true表示非数字字符串，不能使用Number函数转换为数字；false表示是数字字符串，可以使用Number函数转换为数字。

//1.字符串转换为数值

varx1="100"

varx2="100.98.10"

varx3="100.98abc"

//Number(纯数字字符串)->数值类型；非数字字符串==>NaN

console.log(Number(x1),Number(x2),Number(x3))

//null和空字符串""==>转换为0

；但undefined转换为NaN

console.log(Number(null),Number(""),Number(undefined))

//parseInt(数字字符串)取字符串整数部分(不会四舍五入)

console.log(parseInt(x1),parseInt(x2),parseInt(x3))

//parseFloat(数字字符串)去字符串小数部分(不会四舍五入)

console.log(parseFloat(x1),parseFloat(x2),parseFloat(x3))

//2.toString()任意类型转换为字符串

varx=100

console.log(x+"")

console.log(x.toString(2),x.toString(8),x.toString(16))数据类型示例代码，上机测试

//3.数字转换为Boolean类型

//非0为true,0为false

console.log(Boolean(10),Boolean(-10),Boolean(0))

//null、""空字符串和undefined、NaN均为false

console.log(Boolean(null),Boolean(""),Boolean(undefined),Boolean(NaN))

//注意，在条件表达式中，表达式的值会自动转换为布尔类型

//4.Boolean转换为数字

//true-->1

;false-->0

console.log(true,false)

//5.isNaN(变量)

判断是否为非数字，实质是指该变量能否使用Number转换为数字

console.log(isNaN(null),isNaN(""),isNaN(NaN),isNaN(undefined))

数据类型示例代码，上机测试四、运算符和表达式包括：算术运算；赋值与复合赋值运算；比较运算；逻辑运算1.算术运算符和表达式；【数值类型数据运算】vara=1,b=2varx=a+bvary=a%bvarz=a*bconsole.log("x=",x,";y=",y,";z="+z)a++;b++x=a/by=++b+az=a++console.log("x=",x.toFixed(2),";y=",y,";z=",z)toFixed方法中的参数为数字，表示保留指定的小数位数。运算符：+、-、*、/、%、++、--代码分析√

如果数字字符串与任何类型相加，都表示字符串连接；√

但数字字符串与数字进行其他算术运算，则会将数字字符串自动使用Number函数转换后进行运算，例如：vara="10",b="10a"varx1=a+1/*101*/varx2=a-2/*8*/varx3=a*2/*20*/varx4=b*10/*NaN*/console.log(x1,x2,x3,x4)结果为：101820NaN[参与运算的数据，实际使用时建议明确转换为数字类型]代码分析对变量进行赋值：=+=、-=、*=、/=、%=varx=10;x+=10; x=x+10;

x=10;

y=2;

x/=y+2;x=x/(y+2)

原则：先算右边表达式,左边再对表达式的结果进行复合运算比较两个数的大小，结果为布尔类型值。>、>=、<、<=、!=、==、===数值与字符串类型比较：==取值比较，仅取值比较（默认将字符串使用Number转换为数字再进行比较），例如99==“99”=>true99=="99a"false“99a”无法转换为数字===：绝对等

；

例如：99===“99”=>false值相等，但类型不同绝对等===条件：值和类型都要相同，或者引用同一个对象；注意：两个独立创建的对象是不相等的，更不可能全等2.赋值与复合赋值运算符3.比较运算符<script>vara=newString("123")varb=newString("123")varc=a

//==是取值比较；===是值相同，而且引用同一个对象

//但不同对象是不相等的，对象之间比较的是地址；更不能会全等

console.log(a==b,a===b,a=="123",a==="123")console.log(c==a,c===a,c=="123",c==="123")</script>注意：1.NaN不等于NaN;2.没有赋值的变量不能用于运算，否则出现异常console.log(NaN==NaN)//falsevarx;console.log(x==undefined)//true//y没有声明console.log(typeof(y))//undefined（未声明类型）console.log(y==undefined)//异常没有声明变量不能参与运算运算符：&&||!

var

bol1=1||4;

var

bol2=1>4||4;

var

bol3=1<4||4;

//理解短路运算

console.log("1||4

"

,bol1)

console.log("1>4||4

",bol2)

console.log("1<4||4

",bol3)

var

bol1=!1&&4;

var

bol2=!1>4&&4

var

bol3=!1<4

&&

4var

xx,yy=10;

xx=xx||yy;

x=0;

y=2;

z=

(x||++y);z=?;当x=10呢优先级：算术运算符；比较运算符；逻辑运算符;赋值；其中()最高级，其次是取反运算注意：在条件表达式中，（1）所有正负数均为true，只有0为false；（2）undefined和null、NaN及空字符串均为false逻辑运算的结果有以下两种：1）当操作数包含非比较表达式时，结果为最终影响条件成立时的表达式值的结果2）当操作数均为比较运算式时，结果才为布尔类型的true或false。试一试4.逻辑运算符连接多个表达式，最终结果用于判断条件是否成立代码分析varmsg=x>10?”大于10”：“小于等于10”;var

year=2004;

var

bol1=year

%4==0

&&

year

%

100!=0

var

bol2=year

%

400==0;

var

bol=bol1||bol2;

alert(

bol?"是闰年":"不是闰年")示例：问号表达式的使用显示一个年份是否是闰年，输出“是闰年”或“不是闰年”1.能被4整除且不能被100整除；2.能被400整除5.问号表达式：条件？值1：值2试一试<script>

vara=newString("123")

varb=newString("123")

varc=a;

console.log("a==b

",a==b,)

console.log("a===b

",a===b)

console.log("a==c

",a==c)

console.log("a===c

",a===c)

console.log("a=='123'

",a=="123")

console.log("a=='123'

",a==123)

console.log("a==='123'

",a==="123")</script>试一试1.理解练习：编程测试

2.理解练习：编程测试测试以下表达式，使用你的调试方法输出结果varbol=NaN==NaN=>bol=?varx;x==undefined?y==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．正确

B.错误4.null是一种JavaScript的数据类型。A．