javascript初识
1.二阶段知识点简介
ECMAScript+DOM+BOM 15天
项目阶段 4天
jQuery 5天
阶段考核 1天
2.二阶段知识点 和 一阶段 的 差别
html css js
html：页面的结构层 只有结构 样式并不好看
css：页面的样式层 可以对页面进行修饰，美化页面，但是没有行为
javascript：页面的行为层 可以给页面添加行为 让页面可以呼应用户的操作
3.知识点重要性分类
了解：听说过。
熟悉：比较重要，要求大家能做到理解概念的含义。
熟练应用：很重要，在理解概念的基础上 能熟练掌握 并运用到实际开发中
精通：
javascript的初识
javascript初识
javascript（简称js）
1.js的历史 了解
（Netscape）网景公司 navigator 布兰登艾奇 耗时10天开发出了js。借鉴：java的管理机制，c的函数。mocha liveScript javascript
.js是由网景公司于1993年开发的一门语言
.目的是用来解决人机交互（用户表单注册提交功能）
.由布兰登艾奇耗时10天开发出的一门语言
.mocha—>LiveScript—>JavaScript
2.什么是js 熟悉 听写
js是一门 基于对象的， 由事件驱动的， 解释性脚本语言
基于对象的：在js中，为了方便 程序员开发，js给我们提供了很多工具，这些工具可以帮助我们实现一些 简单的效果，这些工具就叫做对象
事件驱动的：js最主要的功能就是实现了浏览器和用户的交互功能，本质上，js就是通过事件这种工作机 制来实现了人机交互功能。
解释性：我们编写的js代码 不是计算机语言，因此 浏览器不能直接执行这种代码，需要翻译为机器语言， 才能执行，翻译有两种方式
编译：java php c c++ c# 优点：一次编译，永久使用。
解释：js 逐行解释代码，每解释一行，就执行一行。 缺点：每次都需要重新解释
3.js的组成部分 熟悉
ECMAScript ： ECMA（欧洲计算机厂商联盟） Jscript ECMAScript-262 —> ES5
ECMAScript是js的一种语法规则 数据类型+变量+流程控制语句+运算符
DOM：Document Object Model 文档对象模型 是用来帮助用户操作页面html标签的
BOM：Browser Object Model 浏览器对象模型 是用来帮助用户操作浏览器的
4.js的引入方式
行内引入：将js代码作为标签属性 写入标签中
<!-- 效果：点击div的时候 页面会弹窗输出内容 我爱你，塞北的雪-->
<div onclick="alert('我爱你，塞北的雪')"></div>
<!-- 这段代码是一个事件，叫做onclick(点击)事件 这段代码表示 给div标签 添加了一个点击事件，这个点击事件 要做的事情就是 alert('我爱你，塞北的雪') alert的作用是在页面上弹出警告窗口，窗口提示内容为开发者输入的内容
点击事件的触发机制为 用户点击时触发。
-->
一般我们不建议大家使用行内引入js，因为不利于结构层和逻辑层的分离
注意：当出现引号的嵌套情况时，内外层引号不能一样
内部引入：在html代码中 写入script标签，将js代码写在script标签中即可
<!--
<script>
js代码
</script>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("我爱你，中国");
</script>
</body>
</html>
注意：在html文件中，我们可以写入任意多个script标签，并且可以写在任意位置。
一般我们建议大家将script标签写在 head标签或body标签的末尾
执行顺序遵循html的执行顺序 从上到下，在执行过程中 如果遇到script标签，就会先进入script标签中，将其中的js代码执行完，再继续向下执行
外部引入：使用script标签的src属性 引入外部的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./example.js"></script>
</body>
</html>
注意：用来引入外部js文件的script标签 内部不能写js代码 即便写了，也不会执行。
如果需要在内部编写js代码，可以写入一个新的script标签。
我们推荐大家使用外部引入
5.js的注释
单行文本注释：可以注释掉一行代码 如果换行 就不能注释
写法：//要注释的内容
多行文本注释：可以注释掉多行代码 即使换行 也可以注释
写法：/* 要注释的内容 */
6.js的页面加载函数 ( js的入口函数 ) 熟练运用
window.onload = function(){
js代码
}
//写入window.onload并将js代码写入其中 这时 写在其中的js代码 会在 页面上的 html结构、css样式、外部引入的资源 都加载完之后 再执行。
javascript的简单操作
1.js的变量 熟练运用
定义：变量就是值可以改变的量。变量是数据的容器
写法：
1.变量的声明：var 变量名 相当于 拿来了一个空的容器
2.变量的赋值：变量名 = 数据（变量值） 相当于将数据作为内容 放进容器中
= 在js中不表示判断相等 而表示赋值 因此在js中 = 叫做赋值符号 读作赋值为
变量声明的简便写法
1.变量声明并赋值：var 变量名 = 数据；
2.变量的连续声明：var 变量名1 = 数据 ，变量名2 = 数据，…；
3.变量的连等：var 变量名1 = 变量名2 = 数据；
变量命名规则 熟练掌握 如果不遵守 就会报错
1.变量命名不能以数字开头
2.变量命名不能使用 除了 _和$ 之外的任何特殊字符
3.变量命名不能使用 关键字 和 保留字（候选关键字）
变量命名的规范 熟练掌握 规范不遵守 并不会报错
1.变量命名应尽量使用驼峰命名法 getElementById userName
2.变量命名尽量不要使用中文
3.变量命名应尽量具备语义化
2.js简单的鼠标类事件
1.点击事件 onclick
元素.onclick = function(){
当点击事件触发的时候 浏览器执行的反馈代码
}
点击事件的触发机制：当用户点击添加事件的元素，就会触发点击事件，执行反馈代码
2.双击事件 ondblclick
元素.ondblclick = function(){
当双击事件触发的时候 浏览器执行的反馈代码
}
双击事件的触发机制：当用户双击添加事件的元素，就会触发双击事件，执行反馈代码
3.鼠标移动事件 onmousemove
元素.onmousemove = function(){
当鼠标移动事件触发的时候 浏览器执行的反馈代码
}
鼠标移动事件的触发机制：当用户在添加事件的元素中移动鼠标，就会触发鼠标移动事件，执行反馈代码
补充：console.log("要打印的内容") 效果是 在控制台的console中 打印指定内容
4.鼠标移入事件 onmouseover/onmouseenter
元素.onmouseover/onmouseenter = function(){
当移入事件触发时执行的反馈代码
}
触发机制：会在鼠标移入到添加事件元素里面的时候 触发该事件 执行反馈代码
5.鼠标移出事件 onmouseout/onmouseleave
元素.onmouseout/onmouseleave = function(){
当移出事件触发时执行的反馈代码
}
触发机制：会在鼠标移出到添加事件元素外面的时候 触发该事件 执行反馈代码
6.鼠标右击事件 oncontextmenu
元素.oncontextmenu = function(){
当右击事件触发时执行的反馈代码
}
触发机制：会在鼠标右击添加事件的元素时 触发事件， 并执行反馈代码
7.鼠标按下事件 onmousedown
元素.onmousedown = function(){
当按下事件触发时执行的反馈代码
}
触发机制：会在鼠标左键按下时 触发事件， 并执行反馈代码
8.鼠标抬起事件 onmouseup
元素.onmouseup = function(){
当抬起事件触发时执行的反馈代码
}
触发机制：会在鼠标左键抬起时 触发事件， 并执行反馈代码
js简单操作
使用js操作元素的属性
- 用法：
- 获取指定属性值：元素 . 属性名
- 设置指定属性值：元素 . 属性名 = 属性值
- 注意：这种操作方法 只适用于操作元素的自带属性 至于非自带属性 和 自定义属性则无法操作
- 特殊属性：
- class：在操作的时候 需要写作 元素.className
- src：获取到的结果是当前资源的绝对路径，但设置的时候 可以使用相对路径
- 用法：
使用js操作元素的内容
- 操作普通双标签html内容 innerHTML
- 用法
- 元素.innerHTML 获取元素的html内容
- 元素.innerHTML = “xxxx” 设置元素的html内容
- 用法
- 操作普通双标签文本内容 innerText
- 用法
- 元素.innerText 获取元素的文本内容
- 元素.innerText = “xxxx” 设置元素文本内容
- 用法
- 操作表单元素内容 value
- 用法
- 表单元素.value 获取表单元素的内容
- 表单元素.value = “xxxx” 设置表单元素内容
- 用法
- 操作普通双标签html内容 innerHTML
使用js操作元素的样式
用法
获取元素样式：元素.style.样式属性名 可以获取到对应样式的值
注意：这种方式只能获取到行内样式
特殊样式属性：background-color font-size 等这些中间带-的属性，在js中应写作驼峰命名法----> backgroundColor fontSize
设置元素样式：元素.style.样式属性名 = “属性值”
注意：这种方式只能设置行内样式
特殊样式属性：background-color font-size 等这些中间带-的属性，在js中应写作驼峰命名法----> backgroundColor fontSize
设置元素样式：元素.style.cssText = “css行内样式”
在赋值的时候 引号中写的内容 就是css行内样式的内容
注意：cssText设置的样式 会完全覆盖掉元素原本的行内样式，一般用在清空行内样式的情况
清空行内样式：元素.style.cssText = “”