JavaScript介绍
- JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。
JavaScript嵌入页面的方式
- 1、行间事件（主要用于事件）
- <input type="button" name="" onclick="alert('ok！');">
- 2、页面script标签嵌入
- <script type="text/javascript">
- alert('ok！');
- </script>
- 3、外部引入（最常用）
- <script type="text/javascript" src="js/index.js"></script>
- 备注：alert 为script内置的函数；
变量、数据类型及基本语法规范
- 定义变量的方法
- JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'；
- 示例：
- 注意：
- JavaScript的语句首行可以不缩进但是为了方便阅读还是采用首行缩进；
- Jacascript语句的结尾都应该以；来结尾，不然可能出错；
- 变量的类型
- 5种基本数据类型：
- 1、number 数字类型（包含了整形和浮点型）
- 2、string 字符串类型
- 3、boolean 布尔类型 true 或 false
- 4、undefined undefined类型，变量声明未初始化，它的值就是undefined
- 5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
- 1种复合类型（对象）：
- object
- 变量的命名规则（包含函数、属性、函数等命名规则）
- 1、区分大小写（大小写定义的变量不一样）
- 2、第一个字符必须是字母、下划线（_）或者美元符号（$） （首字母不能是数字）
- 3、其他字符可以是字母、下划线、美元符或数字
- 变量的命名规则（函数、对象等）
- 对象o Object 比如：oDiv
- 数组a Array 比如：aItems
- 字符串s String 比如：sUserName
- 整数i Integer 比如：iItemCount
- toFixed(num)方法 可以将数字类型对象，转化为显示小数小后num位的小数
- 布尔值b Boolean 比如：bIsComplete
- 浮点数f Float 比如：fPrice
- toFixed(num)方法 可以将数字类型对象，转化为显示小数小后num位的小数
- 函数fn Function 比如：fnHandler
- 正则表达式re RegExp 比如：reEmailCheck
函数
- JavaScript的定义
- 函数就是重复执行的代码片，JavaScript的函数和方法没有区别，作用相同。
- 函数的定义方式：
- 函数的预解析
- Javascript的解析过程
- JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前编译，并且将var定义的变量声明提前编译，将它赋值为undefined（所以将变量传递给函数的时候，如果变量定义在函数之后，会传入undefined不会报错）。
- 备注：解释JavaScript语言的时候会先进行预解析，所以可以不用提前定义函数，但是变量如果不提前定义会提前解释成undefined；
- 函数的传参的方式：
- 第一种传参的方式
- 直接通过形参来接收
- 第二种传参的方式
- 通过argument对象来接收参数，参数用索引的方式来取出
- 传参时需要注意的点：
- JavaScript的函数中不能设置缺省参数；
- 形参的数量可以大于实参，则形参会默认为undefined类型变量；
- 实参的数量也可以大于形参，则多余的实参不会被利用；
- 函数中return关键字的作用：
- 1、返回函数中的值或者对象
- 2、结束函数的运行,不会再运行函数之后的代码；
- 匿名函数
- 定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，也可以将匿名函数直接赋值给变量，通过变量（）来执行匿名函数；
- 实例：
条件语句
- 条件运算符
- ==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
- == 与 === 的区别
- 对于五中基本类型的变量来说，==会把不同类型的值转化成同种类型的值来进行比较；
- ===会在同种类型的变量中进行比较，当变量的类型不相同的时候，变量比较结果就为不相等；
- if 语句的基本格式
- switch判断语句（与if条件判断功能类似，只能进行===判断）
- 判断语句中判断结果为false的值
- 0 数字零
- “” 空字符串
- undefined 未定义变量
- null 空对象
- false 布尔类型变量
JavaScript获取HTML元素对象的方法
- 获取元素的方法
- 使用的方法
- 可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素对象，获取的返回值为一个html元素的js原生对象；
- 第一种获取元素的方法
- 通过元素的id来获取元素对象，直接获取元素js原生对象；
- 第二种获取元素的方法
- 通过元素的name属性来获取html元素，获取的元素对象存储在义个js的list对象中，可以通过索引的方式来取出
- 第三种获取元素的方法
- 通过元素的tagname来获取html元素，获取的元素对象存储在义个js的collection对象中，可以通过索引的方式来取出
- 第四种获取元素的方法（浏览器的兼容性不好，不推荐）
- 通过元素的class属性来获取html元素，获取的元素存储在义个js的collection对象中，可以通过索引的方式来取出
- 解决延迟加载的问题
- 产生的原因
- 上面的获取元素的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种
- 第一种解决方法：
- 第二种方法（最常用）：
- window对象的其他方法
- window.location.href = ...'' 加载页面
操作元素的属性
- 操作元素属性的方法：
- var 变量 = 元素.属性名 ——读取属性
- 元素.属性名 = 新属性值 ——改写属性
- 一些html和js中叫法不一样的属性名，需要注意：
- “class” 属性写成 “className”
- “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
- ‘’innerHTML‘’可以读取或者写入标签包裹的内容
- 注意：
- js不能对class里的类包含的属性进行修改，只能修改class包含的类；
- 对style属性进行修改的时候，style里面包含的属性，会存储在CSS StyleDeclaration的集合中，可以通过属性名称取出和修改；
Html的事件属性
- 事件属性
- 元素上除了有样式，id等属性外，还有事件属性，事件属性使函数具有监听的属性，当时间触发的时候，才使函数执行，常用的事件属性有鼠标点击事件属性(onclick)，鼠标移入事件属性(mouseover),鼠标移出事件属性(mouseout),将函数名称赋值给元素事件属性，可以将事件和函数关联起来。
- 两种操作元素的事件属性的方法：
- 第一种：
- 直接将函数赋值给元素的属性
- 第二种方法：
- 通过匿名函数给属性赋值，不用定义函数的名称，直接把函数赋值给到元素的属性
- 匿名函数：定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式。
- 常用的事件属性
- onclick 点击事件
- onmouseenter 鼠标移入事件
- onmouseleave 鼠标离开事件
