Js初识

Js初识
1. js的起源 JavaScript
(1) 网景公司 navigator
(2) Js的历史
① 网景公司 的 布兰登艾奇
② 主要用来解决浏览器与用户之间的交互问题的（表单提交问题）
③ 组成成分 java的事件管理机制 c语言的函数
④ 名字：mocha--->liveScript--->javaScript
2. Js的定义
(1) Js是一门 基于对象的， 由事件驱动的， 解释性， 脚本语言
① 基于对象的
1) Js中为了方便 开发者 使用， 事先设置好了一些工具，这些工具 不需要开发者自己编写代码逻辑，直接调用就可以解决一些基础问题。我们称这些工具为对象， 这也就是js基于对象的概念。
② 由事件驱动的
1) Js主要就是用来解决浏览器和用户之间的交互问题的。这种问题 需要由事件来驱动
③ 解释性
1) 编译性：一次翻译完所有代码，生成一个exe可执行文件 c语言，c++,c#,java
a. 特点：一次编译，到处使用
2) 解释性：解释性语言在翻译代码的时候 会 逐行翻译，逐行执行，每一次要执行代码 都需要重新解释
3. Js的组成成分
(1) ECMAScript：js的语法规则（标准），
(2) DOM：Document Object Model 文档对象模型
① Document（文档）：html文档
② 作用：用来帮助开发者 操作html文档。是一组方法的集合，用户只需要调用方法 即可实现对html文档的操作。
(3) BOM：Browser Object Model 浏览器对象模型
① 作用：用来帮助开发者 操作浏览器的。是一组方法的集合，用户只需要调用方法，即可实现对浏览器的操作。
(4) API：application program interface 应用程序接口 在js中就是方法，我们可以直接调用来解决问题。
4. Js的引入方式
(1) 内联样式：将js代码写入 HTML标签中
<!-- <p onclick = "js代码"></p> -->
<div onclick="alert('我爱你，塞北的雪')"></div>
① 注意：如果涉及到引号嵌套的问题 一定要注意，内外层引号不能相同
② 注意：不推荐使用行内引入。因为不利于 结构 和 逻辑 的分离
(2) 内部引入
① 在html文档中 写入 script标签。 我们可以将js代码写入script标签中
<script>
alert('我爱你，中国');
</script>
② 注意：alert会优先执行
③ 注意：script标签 可以写在 html文档的 任意位置，我们一般比较常用的位置是body标签的末尾 和 head标签的末尾
④ 我们推荐大家讲script标签 写在 body标签的末尾
(3) 外部引入
① 我们编写外部的js 文件 在html中使用script标签 将外部的js文件 引入进来
<script src="./file.js"></script>
② 注意：我们不能在引入外部js文件的script标签中 写入任何js代码，因为即便写了，也不会生效
③ 如果想再写一些新的js代码 我们可以重新写一个script标签（在一个html文档中 script标签可以写任意多个）
5. Js中的注释
(1) 单行文本注释
① //要注释的内容 快捷键：ctrl+?
(2) 多行文本注释
① /*要注释的内容*/
6. Js的具体操作
(1) Js简单代码的编写
① 获取元素：document.getElementById(“id名”)
② 添加事件：元素.onxxxx = function(){ 执行事件时要执行的代码 }
(2) Window.onload
① 代码的执行顺序
1) Html代码会从上到下依次执行，如果遇到sscript标签 就会先进入script标签中 将js代码从上到下执行完 之后 在继续执行下面的html代码
2) 如果一定要将js代码写在body标签的前面，我们可以使用window.onload
3) 用法：<script> window.onload = function(){ js代码 } </script>
4) 作用：写在window.onload中的js代码 会在整个html页面中的所有 结构、样式、以及外部引入的资源都加载完之后 在执行
5) 也被称为 js的入口函数
(3) Js的简单鼠标事件
① Onclick 点击事件 点击触发该事件
② Onmousedown 鼠标按下事件 鼠标左键按下触发该事件
③ Onmouseup 鼠标抬起事件 鼠标左键 抬起触发该事件
④ Onmousemove 鼠标移动 鼠标移动触发事件
⑤ Onmouseover/onmouseout 鼠标移入移出事件
⑥ Onmouseenter/onmouseleave 鼠标移入移出事件
⑦ Ondblclick 鼠标双击事件
⑧ Oncontextmenu 鼠标右击事件
⑨ 控制台打印输出：console.log(“要在控制台打印的内容”)
(4) 变量
① 变量就是 值可以改变的 量。 变量 就是存放数据的 容器
② 变量的写法
1) var 变量名 变量的声明； 变量名 = 数据 变量的赋值
2) 注：=在这里称为赋值符号 表示的意思是 将右边的数据 赋值给 左边的变量 读作 赋值为
3) 变量声明并赋值：var 变量名 = 数据
4) 变量的连续声明：var 变量名1 = 数据,变量名2 = 数据,.....
5) 变量的连等：var a = b = c = 10;
③ 变量的命名规则
1) 变量命名不能以数字开头
2) 不能使用除了$和_之外的任意特殊字符
3) 不能使用关键字和保留字作为变量名
4) 变量命名不能重复 如果重复 后面的变量 会覆盖前面的变量
5) 变量命名 要尽量遵循驼峰命名法 getusername getUserName
6) 变量命名应该尽量具备语义化
7) 变量命名不要使用中文