JavaScript基础教程1

通过这一节课，可以使听众对js脚本语言基本结构和语法有一个概括性的认识。JavaScript是一种基于对象（内置了许多对象）和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。不同于服务器端脚本语言，例如PHP与ASP，JavaScript是客户端脚本语言，也就是说JavaScript是在用户的浏览器上运行，不需要服务器的支持而可以独立运行。JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行，并且速度较慢。开发环境：JavaScript是一种脚本语言，代码不需要变异成二进制，而是以文本的形式存在，因此任何文本编辑器都可以作为其开发环境，比如记事本（虽然很少人使用）、EditPlus、UltraEdit（UE）、Dreamweaver等。运行环境：JavaScript依赖于浏览器，即浏览器是JavaScript的运行环境。当前主流浏览器都能运行今后学习的JavaScript代码，若出现浏览器兼容问题，到时会请同学们注意。不同的编辑器会对语法进行简单的错误识别，不同的浏览器也提供对JavaScript程序的调试功能。（1）嵌入HTML文件中一般放在head/head(事实上可以放在任何位置)中，格式：scripttype=text/javascript//此处为JavaScript代码/script实例1-1（2）定义专门的外部文件将JavaScript代码写在一个独立的脚本文件（扩展名为.js)中，在页面中使用时直接导入该脚本文件即可，导入的格式：scripttype=“text/javascript”src=“要导入的js文件.js”/script注意：不能这么写:scripttype=text/javascriptsrc=要导入的js文件.js/错误！必须有结束标签实例1-2知识扩充：除了上面两种最为常用的方式外，还可以在一下地方定义JavaScript代码：（1）在HTML的元素事件属性中比如，按钮的单击事件，代码：inputtype=buttononclick=javascript:js脚本代码/示例：实例1-3（2）在超链接中定义语法：ahref=javascript:js脚本代码超链接/a示例：效果：实例1-42、一个简单的JavaScript的例子（1）嵌入到HTML文件中实例1-5如需从JavaScript访问某个HTML元素，您可以使用document.getElementById(id)方法。请使用id属性来标识HTML元素：通过指定的id来访问HTML元素，并改变其内容：实例1-23写到文档输出下面的例子直接把p元素写到HTML文档输出中：实例1-24•标识符是指标识某一个东西的一个名字符号•比如：变量名，类型名，参数名等等。••1.标识符中可以含有字母、数字、下划线_、$符号••2.标识符不能以数字开头••3.标识符不能是js中的关键字或保•示例是否有效说明2mail否不能以数字开头n123是字母开头，混合数字N123是大些字母N，所以和n123是不同的标识符_n123是下划线加字符和数字int否int是关键字$change是$做前缀room#否含有非法字符保留字是语言中定义具有特殊含义的标识符，保留字不能作为标识符使用。JavaScript语言中定义了一些具有专门的意义和用途的保留字，这些保留字称为关键字，下面列出了JavaScript语言中的关键字：break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、this、void、continue、false、instanceof、throw、while、debugger、finally、new、true、const、with、default、for、null和try。还有一些保留字在未来JavaScript版本使用的，它们主要有：class、enum、export、extends、import和super。上述保留字很多目前我们没有必要全部知道它的含义，但是要记住的是在JavaScript中关键字大小写敏感的，因此class和Class是不同的，Class也当然不是JavaScript的保留字。右表列出了js中的部分保留关键字（ReservedKeywords）下表列出了js中的部分保留关键字（ReservedKeywords）•注释就是写在源代码中的描述信息，用来帮助开发人员阅读源代码的。•注释信息会在编译过程中自动过滤掉，不会出现在程序集中。•JS支持的注释格式：1）单行注释。格式：//Comments2）多行注释。格式：/*Comments...*/多行注释/*注释内容*/单行注释//注释内容声明一个变量的语法：varvariable_name；//变量名须为有效标识符如：stringname;intage;声明并初始化一个变量：varvariable_name=value;如：varname=“翠花”;varage=16;我的名字叫“翠花”今年16岁•变量（variable），言外之意即是可变的，用来存储程序所需的数据。实例1-11JavaScript变量还能保存其他数据类型，比如文本值(name=BillGates)。在JavaScript中，类似BillGates这样一条文本被称为字符串。JavaScript变量有很多种类型，但是现在，我们只关注数字和字符串。当您向变量分配文本值时，应该用双引号或单引号包围这个值。当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。实例1-12JavaScript数字JavaScript只有一种数字类型。数字可以带小数点，也可以不带：实例varx1=34.00;//使用小数点来写varx2=34;//不使用小数点来写极大或极小的数字可以通过科学（指数）计数法来书写：实例vary=123e5;//12300000varz=123e-5;//0.00123实例1-12JavaScript布尔布尔（逻辑）只能有两个值：true或false。varx=true;vary=false;声明（创建）JavaScript变量在JavaScript中创建变量通常称为“声明”变量。我们使用var关键词来声明变量：varcarname;变量声明之后，该变量是空的（它没有值）。如需向变量赋值，请使用等号：carname=Volvo;不过，您也可以在声明变量时对其赋值：varcarname=Volvo;在下面的例子中，我们创建了名为carname的变量，并向其赋值Volvo，然后把它放入id=demo的HTML段落中：pid=demo/pvarcarname=Volvo;document.getElementById(demo).innerHTML=carname;实例1-13一条语句，多个变量您可以在一条语句中声明很多变量。该语句以var开头，并使用逗号分隔变量即可：varname=Gates,age=56,job=CEO;声明也可横跨多行：varname=Gates,age=56,job=CEO;实例1-13Value=undefined在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是undefined。在执行过以下语句后，变量carname的值将是undefined：varcarname;实例1-13varname=[小明;//合并字符串name=name+20岁;name=name+男生];alert(name);//[小明20岁男生]实例1-14常用的算数运算符：下表显示了C#支持的所有算术运算符。假设变量A的值为10，变量B的值为20，则：自增和自减varx=5,y;y=2+++x;alert(x=+x);alert(y=+y);varx=5,y;y=2+x++;alert(“x=+x);alert(y=+y);x++和++x都是将x的值加1varx=5;++x;alert(“x=+x);varx=5;x++;alert(“x=+x);varx=5;x=x+1;alert(“x=+x);当自增和自减参与运算时++x为先自增再参与运算，而x++为先参与运算再自增X=6Y=8X=6Y=7实例1-16常用的关系运算符：下表显示了C#支持的所有关系运算符。假设变量A的值为10，变量B的值为20，则：为bool类型的值，取值为true或者false常用的关系运算符：vara=21;varb=10;if(a==b){alert(“a等于b);}else{alert(“a不等于b);}if(ab){alert(“a小于b);}else{alert(“a不小于b);}if(ab){alert(3-a大于b);}else{alert(3-a不大于b);}/*改变a和b的值*/a=5;b=20;if(a=b){alert(4-a小于或等于b);}if(b=a){alert(5-b大于或等于a);}为bool类型的值，其值为false实例1-17==和===区别（！=和！==区别相同）==：先进行类型转换，再比较类型和值。（值相等，类型不同，则为true）===：不进行类型转换，比较类型和值。（值相等，类型相同，才为true）实例1-18常用的逻辑运算符：下表显示了js支持的所有逻辑运算符。假设变量A为布尔值true，变量B为布尔值false，则：常用的逻辑运算符：vara=true;varb=true;document.write(如果a=true,b=truebr);document.write(a&&b的值为+(a&&b)+br);document.write(a||b的值为+(a&&b)+p);a=true;b=false;document.write(如果a=true,b=falsebr);document.write(a&&b的值为+(a&&b)+br);document.write(a||b的值为+(a&&b)+p);a=false;b=false;document.write(如果a=false,b=falsebr);document.write(a&&b的值为+(a&&b)+br);document.write(a||b的值为+(a&&b)+p);实例1-19常用的赋值运算符：（）vara=21;varc=3;c+=a;document.write(c=+c);实例1-20特殊运算符——条件表达式？：；条件表达式？表达式1：表达式2；当条件表达式的值为真时，此表达式的值为表达式1，当条件表达式的值为假时，此表达式的值为表达式2，vara,b,c;a=10;b=(a==1)?20:30;document.write(b的值是+b+br);c=(a==10)?20:30;document.write(c的值是+c);实例1-21特殊运算符——条件表达式用条件表达式计算最小值vara=10,b=5,c;c=(a=b)?a:b;alert(a与b中的最小值是+c);vara=10,b=5,c=12,d;d=(a=b)?((a=c)?a:c):((b=c)?b:c);alert(a与b与c中的最小值是+a);思考：如何用条件表达式计算三个数中的最小值？？？实例1-22运算符是有优先级的，优先级高的先运算。无论是从上而下，还是从左到右，都是越上和越前面，优先级越高。第一级：++、--(做为前缀)、()、!第二级（常规算术运算符）：*、/、%、+、-。第四级（比较