JavaScript基础部分 -- 课件

课程目标

1、JavaScript简称 js 重要作用：HTML + CSS + JAVASCRIPT
2、Js脚本语言程序控制语法
3、Js脚本语言和自定义函数
4、Js脚本语言事件响应及处理
5、Js脚本语言Dom模型及操作
6、使用本课程完成综合练习

课程安排

1、js的来源
2、程序控制语句、自定义函数、数组、注释、js调试
3、事件：事件处理，利用事件对表单等功能进行功能设计
4、DOM DOM结构 事件处理
5、综合作业；

JavaScript简介

1、什么是js JavaScript（livescript）是一种脚本语言
2、什么是动态页面 — 人机交互，静态页面 — 没有人机交互
3、Js需要安装才能使用吗？ — 不需要
4、什么是BOM — 浏览器对象模型 DOM — 文档对象模型


开发第一个js小程序






Js变量：与其他程序设计语言相同，是用来临时存储信息的；
创建方法1： var x = 1; var name = “javascript”; var x=2,name=”zhangsan”;
创建方法2： var x; x=1; x=2; — 弱数据类型
注意点：js中的变量，区分类型的，但是没有int之类的关键词；


Js调试 alert弹框调试，console.log()控制台输出调试
作用：观察变量值的变化规律，是否符合程序设计的目的
语法 alert(flag); console.log(flag);


Js函数分为2部分：
1、自定义函数 — 直接称之为函数，有时候也会称之为方法
自定义函数是完成某一个功能的代码段，可重复执行，方便管理和维护；
1、创建方法1：这种函数声明，可以先使用后定义：
function fun1(){
代码段;
return *; — 返回值
}
2、这种叫做函数表达式，必须先定义后使用；
Var fun1=function(x){
return x+1;
}
实例;





2、内置函数


数据类型及转换 — 虽然统一定义var变量，但是赋值的时候是要区分数据类型；
数据类型：number string boolean underfine null
1、number 数字类型，整数、浮点数（小数）都包括；
2、String 字符串类型、必须放到单引号或者双引号中；
3、Boolean 布尔类型、 只有true和false两种值
4、Underfine 未定义 一般指的是已经声明，但是没有赋值的变量；
5、Null 空对象类型，var a=null; 和var a = “”;有区别

特殊类型; object NaN
1、object 对象类型 在js常见的对象有 window document array等
2、NaN 是Number的特殊类型，isNaN(); — 用来判断是否是非数值？
(1) 如果是数字的话，返回false；
(2) 如果不是数字返回true；


类型转换 parseInt() — 转转成整形 parseFloat(); — 转换成浮点类类型（带小数点的）
Number(); — 包括整数和小数的； Boolean(); — 转换成逻辑类型
作用：强制类型转换 隐式类型转换



























变量作用域
作用域：全局变量 局部变量
局部变量:在函数内部创建的变量，称之为局部变量 其他函数不能使用！
全局变量:在函数外部创建，称之为全局变量，在函数之间可以共享使用！


运算符：
比较运算符：用于比较两个值 结果true false
运算符范围 > >= != < <=

逻辑运算符：
包含逻辑与 或 非 等，其结果为true false
格式：&& and || or ! 非

对于&&:两个都是true，结果才是true，有一个是false结果就是false；
对于||：其中一个是true就是true，两个都是false那么结果才是false；


三元运算符：
根据不同的条件，执行不同的操作/返回不同的值
格式：条件?值1:值2；


程序控制语句：
1、条件判断类控制语句
2、语法格式：if（条件）{
代码段；
} else {
代码段；
}

作业：/
成绩是100分，显示满分
成绩大于等级90 显示优秀
成绩大于等于70 显示良好
成绩大于等于60 显示及格
否则，不及格；
/






2、多条件分支控制语句演示：


循环语句：
For循环 while循环 do-while循环

1、for循环
2、语法：for(定义条件；判断条件；迭代条件){
具体的循环输出语句；
}
3、计算：1+2+3+。。。。。+100？
4、i++ 等同于 i=i+1 等同于 i+=1


5、输出1到100的值？



While循环 先判断条件，条件满足再继续执行

案例：用while循环输出：1~100；


Dowhile是先执行一次**，执行完之后再进行判断

案例：使用do-while输出1到10之间的所有的偶数；

For循环和while循环的区别：
For：适合已知循环次数的循环体
While:适合未知循环次数的循环体


Continue语句：
1、结束本次循环，继续开始下一次；

Break 语句
1、立即退出循环

案例;输出1~10之内的不是5 的倍数


打印输出0~50之间除了20和30之外的5的倍数；



内置函数：
1、字符函数
(1) Subsutring substr charAt split length indexof concat replace
2、日期函数
(1) Date getDate getDay getMonth getFullYear （getYear） getHours getMinutes getSeconds
3、数学函数
(1) Math.round max min abs
4、转化函数
(1) parseInt parseFloat Number Boolean


















数组 — 通过代码演示；









掌握数组中一些方法
1、push();将参数值添加到原数组的尾部； — 返回值是数组的新长度
2、Unshift(); 将它的参数添加到头部 — 返回值是数组的新长度
3、Pop(); 删除数组的最后一个元素
4、Shift(); 删除第一个元素


Js对表单的操作； 初始化 赋值 取值
需求：现在希望单击按钮 使得文本框内容发生改变
1、单击事件的执行
2、文本框发生改变


处理闰年的问题,判断闰年的标准有两个：
1、能被4整除，不能被100整除；
2、或者能被400整除

关于this的指向问题
1、在事件触发的函数中，this就是对该dom对象的引用；

DOM基础

什么是事件：
1、事件是指被程序发现的行为或者发生的事情，而且他可能会被程序处理；
2、Js的事件 都是以on开头的，onclick onchange onload onmouseover onmouseout
3、键盘事件 鼠标事件 表单事件

事件分为两类：
1、HTML事件 — 直接在html元素上写
2、DOM 0级事件 — (获取HTML元素).事件 = 执行脚本 — 在DOM对象上绑定事件


**



Onfocus事件一般用于input标签的type位text password text area标签
Onblur事件

需求：希望浏览器有如下效果：
1、如果输入了11位数字，对勾显示
2、如果输错了，不是数字等，显示X


下面2个事件 成就了onclick事件


Onresize:当调整浏览器窗口的大小时触发
Onscroll：拖动滚动条时候触发！


键盘事件和keycode属性
Onkeydown：用户按下一个键盘按键时候发生；
Onkeypress：在按下键盘按键时发生（只会响应字母和数字符号）
Onkeyup在键盘按键松开时候发生
KeyCode属性：返回Onkeydown Onkeypress Onkeyup事件触发的按键的值的字符代码或者按键标识符
DOM
1、document object model > dom
2、什么时dom 将文档（页面）表现为结构化的表示方法，，使得每一个页面元素都是可控的，dom将网页和脚本以及其他的编程语言联系起来；
3、DOM树

4、

5、常见的DOM操作：
(1) getElementById 返回带有指定的ID元素
(2) getElementsByTagName 返回的是包含带有指定标签名的所有元素的节点列表
(3) getElementsByClassName 返回的是包含带有指定类名的所有元素的节点列表
(4) getElementsByName 获取相同名称（name）的元素的所有节点列表

BOM基础

课程介绍：

1. 掌握BOM核心是window对象
2. 掌握什么是BOM
3. 掌握window对象的控制，弹出窗口方法

BOM概念
bom:(browser object model) — 浏览器对象模型

window是浏览器的一个实例

1. 是通过JavaScript访问浏览器窗口的一个接口
2. 又是ecmascript规定的global对象 — 全局对象

window对象的方法

1. window.alert();
2. window.confirm(“message”);
   1. 点击确定，返回true
   2. 点击取消，返回false
3. window.prompt()
4. window.open()
5. window.close()
6. location对象 — window对象的属性，也是document对象的属性
7. history.back() — history.go(-1) — 回退
8. history.forwar() — history.go(1) — 前进