网页设计与制作（活页式） 课件 情景9-1 JavaScript基本语法

网页设计与制作JavaScript基本语法授课教师：乔振华HTMLCSSJavaScriptJavaScript目录CONTENTS12学习目标知识讲解3小结学习目标01学习目标学习目标01掌握JavaScript的语法学习目标03掌握常用的运算符学习目标02掌握数据类型及变量的命名规则02知识点讲解

01JavaScript的基本语法结构是什么？

03JavaScript中变量的命名规则是什么？思考知识点讲解

02JavaScript中有几种数据类型？

04JavaScript有哪些运算符？1、什么是JavaScriptJavaScriptJavaScript是一种嵌入到HTML文件中的基于对象(Object)和事件驱动(EventDriven)并具有安全性的脚本语言。2、认识JavaScript的组成（1）ECMAScript：定义语言的基础，规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象、js、nodejs都实现了ECMAScript。（2）文档对象模型（DocumentObjectModel）：当网页被加载时，浏览器会创建页面的文档对象模型，用DOMAPI可以轻松地删除、添加和替换节点。（3）浏览器对象模型(BrowserObjectModel)：描述了与浏览器窗口进行访问和操作的方法和接口。3、JavaScript基本语法（1）JavaScript可以出现在HTML的任意地方，使用<script></script>进行声明；（2）JavaScript可以单独写在一个文件中（以.js作扩展名），然后用

嵌入到HTML文档中；（3）语句末尾既可以使用分号（；）结尾，也可以不写分号；（4）Javascript程序对大小字母是“敏感”的，即区分大小写字母；（5）单行注释：//；多行注释：/**/<scriptsrc=“js文件路径”></script>3、JavaScript基本语法例如：（1）变量“name”和“NAME”是不一样的；

（2）以下写法均正确：

varname1="xiaowang"varname2="xiaoli";注意：如果将代码写在一行上，则分号不能省略，如下第一个语句结束后的分号不能省略：varname1="xiaowang";varname2="xiaoli";4、变量的声明使用var关键字声明，例如声明学生姓名：varname;注意：javaScript采用弱数据类型的形式，变量是一种自由变量，它可以接受任何类型的数据，在声明时无需定义数据类型，变量的具体数据类型根据所赋的值的数据类型来确定。如：

varscore=“100”//字符串类型varscore=100//数值类型5、变量的命名规则第一个字符必须是字母或下划线（_）或美元符号（$）；不能包含有空格、“+”、“-”、“@”、“#”等特殊字符；不能使用JavaScript中的保留字或关键字，如var、if等。应使用有意义的变量名，可以使用“驼峰式”或“下划线式”的变量名，如stuName，stu_name。

JavaScript是区分大小写，所以name和变量Name是两个不同的变量。

知识点讲解请大家判断哪些变量名是错误的<script>vary2=12.5;

var2x=3;//Xvarfor=“helloworld”;//X

var_while="Nextpage";var$3=true;

varstuname=“LinDa”;//Xvarstr="";</script>6、数据类型JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有9种：值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。引用数据类型：对象(Object)、数组(Array)、函数(Function)。知识点讲解<script> varstr=“hello”;//typeof(str)等价于typeofstr varnum=100; varflag=true;

alert("str的类型是："+typeof(str));//string alert("num的类型是："+typeof(num));//number alert("flag的类型是："+typeof(flag));//boolean</script>使用typeof()或者typeof判断变量的数据类型知识点讲解<script>

alert([]instanceofArray);//[]是Array的实例，返回true</script>使用instanceof(X)或者instanceofX检测数据类型知识点讲解<script>

varsum="100";

varnum=100;

varstr="hello";

alert(“sum类型是：”+isNaN(sum));//false

alert(“num的类型是：”+isNaN(num));//false

alert("str类型是："+isNaN(str));//true</script>使用isNaN()判断变量是否为非数字值7、运算符JavaScript中常用的运算符有：A赋值运算符B算术运算符C递增和递减运算符D比较运算符E逻辑运算符知识点讲解

赋值运算（假设定义x=10,y=5）运算符例子等同于运算结果=x=y

x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0

算术运算（假设定义x=10,y=5）知识点讲解运算符描述例子X运算结果X运算结果+加法x=y+275-减法x=y-235*乘法x=y*2105/除法x=y/22.55%取模（余数）x=y%215++自增x=++y66

x=y++56--自减x=--y4