Web前端设计基础教程：JavaScript基础PPT教学课件.pptx

模块三JavaScript基础

模块三JavaScript基础JavaScript是一种跨平台的脚本语言,简称JS。JavaScript代码与网页完美集成,能够直接运行在浏览器中。浏览器一般内置了JavaScript引擎,能够直接解释和运行JS代码,不需要额外支撑。现在比较流行的JS引擎是Google公司的V8。

3.1JavaScript入门－以九九乘法表为例本项目使用JavaScript在网页上生成九九乘法表,并按照规则选择乘法表达式突出显示,如图3-1-1所示。图3-1-1九九乘法表项目展示

3.1JavaScript入门－以九九乘法表为例3.1.1项目HTML部分HTML代码如下:

3.1JavaScript入门－以九九乘法表为例3.1.2JavaScript代码规范在HTML文件中,JavaScript代码写在成对的script标签中,标签结构见3.1.1代码。script标签可以放在head中,也可以放在body中。网页上可以出现多对script标签。1.script标签

3.1JavaScript入门－以九九乘法表为例3.1.2JavaScript代码规范如果JavaScript代码较多,最好写在单独的文件中。JavaScript代码写在单独的文件中使结构(HTML)和行为(JavaScript)分离,代码更清晰,编写更容易。JavaScript文件简称JS文件,扩展名是.js。JS文件中不需要script标签。JS文件必须链接到HTML文件中才能够执行。HTML文件中可以链接多个JS文件,可以在head中链接,也可以在body中链接。浏览器载入HTML文件,根据链接顺序执行JS文件中的代码。链接JS文件也使用script标签,格式如下:2.JS文件

3.1JavaScript入门－以九九乘法表为例3.1.2JavaScript代码规范3.JavaScript代码的特点(1)JavaScript语句是向浏览器发出的命令,告诉浏览器做什么事情。(3)代码区分大小写。(4)语句使用“;”结束。“;”可以省略。编程风格建议保持一致:要么全部使用“;”结束,要么全部不使用。(2)浏览器按照从上到下的书写或链接次序依次加载、执行JavaScript代码。

3.1JavaScript入门－以九九乘法表为例3.1.2JavaScript代码规范4.JavaScript错误处理(1)浏览器页面不会提示语法错误,错误信息在控制台显示(快捷键F12)。(4)JavaScript代码语法错误一般不会影响HTML与CSS部分。(3)script标签之间的代码相对独立。(2)浏览器会尽可能执行代码,个别语法错误一般不会使网页瘫痪。

3.1JavaScript入门－以九九乘法表为例3.1.2JavaScript代码规范5.注释注释是对代码的解释与说明,用于提高代码的可读性。注释中的内容不会被执行,也不会影响代码执行。JavaScript注释语法如下:(1)单行注释以“//”开头。(2)多行注释以“/*”开始,以“*/”结尾。

3.1JavaScript入门－以九九乘法表为例3.1.3输出JavaScript一般使用如下4种方法输出内容。1.alert函数语法:alert(str)，作用:弹出警告框,显示str字符串。频繁弹出警告窗口会影响用户使用,建议少用。2console.log函数语法:console.log(str)。作用:常用于代码调试,在控制台输出str字符串。在浏览器中按F12键启用调试模式,可以在调试窗口中通过Console菜单查看输出内容。3.document.write函数语法:document.write(str)。作用:在HTML文档当前位置显示str字符串。4.innerHTML属性语法:对象.innerHTML。作用:通过页面元素innerHTML属性值来获取或修改元素中的内容。

3.1JavaScript入门－以九九乘法表为例3.1.4变量与数据类型1.变量的命名规则(1)变量名首字符必须是字母、$或_。单个的$与_也是合法变量。(2)变量名区分大小写。max与Max代表不同的变量。

3.1JavaScript入门－以九九乘法表为例3.1.4变量与数据类型2.变量声明JavaScript是弱类型语言,变量不必声明就可以直接使用,变量声明也不需要指定类型,系统会根据变量的赋值自动推断类型。在使用之前声明变量是良好的编程习惯,编写的代码容易理解,也不容易出错,如表3-1-1所示。表3-1-1声明

3.1JavaScript入门－以九九乘法表为例3.1.4变量与数据类型3.值类型/基础数据类型JavaScript变量的数据类型由变量值的类型决定