《JavaScript程序设计案例教程》课件_案例1.pptx

案例一、百花争妍

学习目标知识链接案例实现效果演示目录

学完本章节应该能做到的事情学习目标壹

学习目标掌握JS的基本使用方法。掌握JS变量的使用方法。掌握数组的字面量表示法和使用forin遍历。PPT模板/moban/了解无参函数的意思。理解DOM的涵义。能获取、创建DOM元素。会使用定时器setTimeout。能生成指定范围的随机数。掌握使用类名获取元素的方法。

效果演示

完成本案例应该具备的知识知识链接贰

知识链接列表JS的三种引入方式。JS的注释。变量定义和赋值。PPT模板/moban/数组定义、初始化、遍历(for..in)。无参函数定义和调用。DOM元素。定时器setTimeout和clearTimeout。onload事件。随机数和取整。getElementsByClassName方法。选择结构。

JS的三种引入方式1在HTML标签中的语法格式：开始标签on+事件类型=“js代码”/结束标签行内引入（行内式）!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8title/title/headbodyahref=onclick=alert(您将要跳转到百度)百度/a/body/html

JS的三种引入方式1在HTML中定义script标签，然后在script标签里面写js代码：scriptJs代码/script内部引入（内嵌式）!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8title/title/headbodyscriptalert(这是内嵌式);/script/body/html

JS的三种引入方式1一、定义外部js文件（扩展名是JS的文件）；二、在HTML文件中引入JS文件，格式如下：scripttype=text/javascriptsrc=js文件的路径/script注意：script标签内部不要有任何代码外部引入（外链式）!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8title/titlescripttype=text/javascriptsrc=importjsjs.js/script/headbody//这是JS文件importjsjs.js的内容alert(这是外链式的使用);

JS的注释2以/*开头，以*/结尾，任何位于/*和*/之间的文本都会被JavaScript忽略。01单行注释02多行注释以//开头，任何位于//与行末之间的文本都是注释内容，不会执行。

JS的注释2!doctypehtmlhtml head metacharset=utf-8 title无标题文档/title /head?body script //初始化value变量为0 varvalue=0;/***设置节点透明度*node节点*val透明度的值*/functionsetOpacity(node,val){node.style.opacity=val;} /script/body/html

变量定义和赋值3Javascript是一种弱类型语言，其变量类型由它的值来决定。定义变量需要用关键字varvarnum=1;//数值型变量varb=true;//布尔型变量varud;//未赋值，其值是undefined,其类型也是undefined变量varstr=我是字符串;//字符串变量console.log(num,b,ud,str);//输出到控制台变量，函数，属性，函数参数命名规范：(1)区分大小写(2)第一个字符必须是字母，下划线（_）或者美元符号(3)其他字符可以是字母，下划线，美元符或数字

数组定义、初始化、遍历(for..in)4数组对象用来在单独的变量名中存储一系列的值。数组对象的字面量表示形式是[]。

数组定义、初始化、遍历(for..in)4数组的字面量定义方法以及初始化注意：JS中的数组存储的数据不必是相同的数据类型。vararr1=[];//定义元素个数为0的数组vararr2=[a,2,true];//定义并初始化数组console.log(arr1,arr2);

数组定义、初始化、遍历(for..in)4使用for..in遍历数组vararr2=[a,2,true];//定义并初始化数组for(varminarr2)//for..in语法遍历数组时in前的变量代表下标{ console