第一章 JavaScript 基础
1、什么是 JavaScript？
HTML+CSS 完成了静态页面的展示，但是想要完成更好更复杂的用户交互和数据交互及展示，就需要使用 JavaScript。JavaScript 是基于对象和事件驱动，并具有安全性能的脚本语言 2、JavaScript 的特点
a. 可以向 HTML 页面中添加交互行为
b. 脚本语言，语法与 java 语法类似
c. 解释性语言，边执行边解释
3、JavaScript 的组成
a.ECMAScript 标准
b.DOM Document Object Model 文档对象模型
c.BOM Browser Object Model 浏览器对象模型
4、JavaScript 的基本结构
html <script>document.write("初识 JavaScript");</script>
5、执行原理
在浏览器客户端输入一个网址，这个页面是一个包含有 JavaScript 的 HTML 页面，发送到服务器，服务器接收并下载这个包含有 JavaScript 的 HTML 页面，然后返回给浏览器客户端 6、引入 JavaScript 的方式
a. 内部
html<script></script> 注：可以放在任意地方，前提是要确保这段 js 已加载
b. 外部
html <script src="js 路径" type="text/javascript"></script> c. 行内
html<input type="button" name="btn" value="弹框" onclick="javascript:alert(' 你好 javascript')"/> 7、什么是变量？
在内存中开辟空间保存数据
用 var 声明，var 是用于声明变量的关键字 ，变量根据值确认变量类型
javascript var width; width = 5; // 先声明在赋值 javascript var width = 5; // 同时声明并赋值 javascript width = 5; // 不声明直接赋值，不推荐使用 8、数据类型？
undefined 类型只有一个值，即 undefined。当声明的变量还未被初始化时，变量的默认值为 undefined。
Null 类型也只有一个值，即 null。null 用来表示尚未存在的对象，常用来表示函数企图返回 一个不存在的对象
number 不论整数还是浮点数，返回的都是 number 类型
boolean 布尔类型，返回 true 或 false
string 不论单个字符还是字符串，返回的都是 string 类型 var ss=’s’ 表示的还是 string 类型
object 对象
注意：跟 java 有区别
9、typeof() 运算符
用来检测变量是什么数据类型
例：
javascript var a = 10; var b = "Joy"; var x,y,z =10; var arr = new Array(3);
javascript
typeof(a); //number
typeof(b); //string
typeof(x); //undefined
typeof(z); //number
typeof(null); //object
typeof(arr); //object
typeof(true); //boolean
10、数组
数组是一个变量，开辟了一连串的空间存储一连串相同数据类型的数据
javascript
var arr = new Array(5); // 声明一个名为 arr，长度为 5 的数组
var arr = [“aaa”,”bbb”,”ccc”,”ddd”,”eee”]; // 给数组 arr 赋值
arr[0] = “aaa”; // 取出数组中的第一个值
a. 数组的属性
javascript arr.length // 获取 arr 数组的长度 b. 数组的方法
javascript arr.join() // 把数组元素放到字符串中，并用连字符连接起来
var arr = \["aaa","bbb","ccc"\];
var arrList = arr.join("-");
document.write(arrList); //aaa-bbb-ccc
arr.sort() // 数组排序
arr.push() // 向 arr 数组添加一个元素 11、运算符
javascript 为了满足逻辑过程中的计算和比较等提供了丰富的运算符
| 运算符类型 | 运算符 |
| :——–: | :———————————————————-: |
| 算术运算符 | + – * / % ++ — |
| 赋值运算符 | = += -= |
| 比较运算符 | > < >= <= == != ===(先判断类型再判断值) !==(先判断类型再判断值) |
| 逻辑运算符 | &&(并且) \|\|(或者)！(非) |
12. 控制语句
a. 条件句
javascript
if(条件){//JavaScript 代码}else{//JavaScript 代码}
// 当满足 if 中的条件时，执行 if 块代码
// 不满足条件时，执行 else 块代码
javascript
switch（表达式）{
case 常量：//JavaScript 代码
break；case 常量：//JavaScript 代码
break；default:
//JavaScript 代码
break;
}
// 根据 switch 后的表达式去匹配在 case 后的的常量，匹配后执行当前 case 代码
// 遇到 break 会跳出当前 switch 结构
// 不写 break 的后果是下面的 case 不用匹配，直接执行
//default 块是以上 case 块都没有匹配成功时执行的代码 b. 循环
javascript
for(初始值；条件；增量){//JavaScript 代码}
//for 循环由四部分组成一个常规循环，初始值是循环的初始状态，条件是循环的结束条件，增量是修改循环的初始状态
// 当满足循环条件时，执行 for 循环内的代码块
// 增量不写会发生死循环的情况
javascript
while（条件）{//JavaScript 代码}
//while 循环中的条件符合时，进入循环
javascript
do{//JavaScript 代码}while(条件)
// 先执行一遍代码，再判断循环条件是否符合，符合则执行循环体
javascript
for(var i in 数组名){//JavaScript 代码}
// 在 for 循环的基础上，简化了 for 循环的表达式部分
// 针对遍历数组、集合的 for 循环
// 数组中有多少元素，就循环几遍，i 代表每次循环的下标
13、注释
a. 单行 //
b. 多行 / JavaScript 代码
14、输入 / 输出
a. 输出 document.write(); alert();
b. 输入 prompt（” 请输入一个数 ”,””）;
15、语法约定
a.javascript 严格区分大小写
b. 遵循变量命名的规范
c. 每句后边写分号
16、程序调试
a.alert()
b. 浏览器的开发者工具模式，结合 alert（），打断点调试
17、函数
a. 系统函数
javascript
parseInt（“12aa”）; //12 把字符串转换成整数
parseFloat（“33aa1.34”）// 33 把字符串转换成浮点数
var a = "33vvv";
var b = "33.2aa3";
var c = "2";
document.write(parseInt(a)+","+parseInt(b)+","+parseInt(c));//33,33,2
document.write(parseFloat(a)+","+parseFloat(b)+","+parseFloat(c));//33,33.2,2
var d="你好";
isNaN(d) //false 判断是否是非数值，返回 true 或 false
b. 自定义函数
javascript
function study(){
//JavaScript 代码
}
1 . 有参
javascript
function study(参数 1，参数 2，参数......){//JavaScript} 例：
javascript <input type="button" value="按钮" onclick="study(prompt(' 请输入一个数 '))"/> javascript
<script>
function study(num){
document.write(“ 我爱 JavaScript”);
}
</script>
2 . 无参
javascript
function study(){
//JavaScript 代码
}
例：
javascript
<input type="button" value="按钮" onclick="study()"/>
<script>
function study(){document.write("我爱 JavaScript");
}
</script>
调用函数：一般是跟表单元素的事件结合使用
18、变量的作用域
a. 局部变量
说明：声明在函数中，只能在当前函数中使用，其他函数访问不到。
b. 全局变量
说明：声明在函数外，所有函数都能使用。
19、事件
当用户进行一些鼠标或键盘操作或者页面发生某些情况时，我们可以对该操作进行捕捉，并进行对应的处理响应
名称 说明
onload 一个页面或一幅图像完成加载
javascript window.onload=function(){};
onlick 鼠标单击某个对象
javascript domObj.onclick=function(){}
onmouseover 鼠标指导移到某元素上
javascript domObj.onmouseover=function(){}
onkeydown 某个键盘按键被按下
javascript domObj.onkeydown=function(){}
onchange 域的内容被改变
javascript domObj.onchange=function(){}