初识JavaScript，基础篇

为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML ------------------------定义了网页的内容
CSS--------------------------描述了网页的布局
JavaScript------------------网页的行为

什么是JavaScript（简称JS）

JavaScript是一门脚本语言
JavaScript是一门解释性语言
JavaScript是一门动态类型的语言
JavaScript是一门基于对象的语言
JavaScript是一门弱类型语言

JS的组成部分

1.ECMAScript标准（ECMA，欧洲计算机制造联合会）
2.BOM------浏览器对象模型 提供与浏览器交互的方法和接口；
3.DOM------文档对象模型 提供访问和操作网页内容的方法和接口

DOM D—document（文档） O—object（对象） M—model（模型）
BOM B—browser（浏览器） O—object（对象） M—model（模型）

JS能做什么：

1.JavaScript 能可以将动态的文本放入html页面；
2.JavaScript 能可以读写html元素；
3.JavaScript 可被用来验证数据；
4.JavaScript 可以对事件做出响应；

JS的使用方式

1.行内式---------------------顾名思义，就是写在标签上
2.写在script标签中---------------------script标签要在body标签下面
3.导入式--------------------------外部创建js文件，在页面中导入

JS的书写规范

1.严格区分大小写
2.每一行完整的语句要用 ;
3.代码要缩进
4.js必须用半角符号

JS的输出方式

1.alert();-----------------------------在页面中弹出提示框
2.console.log();-------------------在控制台中显示信息
3.document.write();--------------在页面中显示出信息
4.prompt();-------------------------接收用户输入的信息

JS获取元素

1.通过ID获取（getElementById）

document.getElementById(‘id’)

2.通过name属性（getElementsByName）

document.getElementsByName(‘name’)

3.通过标签名（getElementsByTagName）

document.getElementsByTagName(‘p’);

4.通过类名（getElementsByClassName）

document.getElementsByClassName(‘active’);

5.获取html的方法（document.documentElement）

document.documentElement是专门获取html这个标签的。

6.获取body的方法（document.body）

document.body是专门获取body这个标签的。

7.通过选择器获取一个元素（querySelector）

document.querySelector(’.animated’)

8.通过选择器获取一组元素（querySelectorAll）**

创建

创建一个节点: document.createElement(‘标签名’)

var oDiv = document.createElement(‘div’);//创建一个div标签

追加

追加一个节点：父节点.append(‘子节点’)

插入

insertBefore(节点,原有节点) 在已有元素前插入

删除DOM元素

removeChild(节点) 删除一个节点

JS变量

什么是变量
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

如何使用变量
var 声明变量

var i;

变量的赋值

var i=10;

变量的命名
1.由字母，数字，下划线，$符号组成，不能以数字开头
2.不能是关键字和保留字
3.区分大小写
4.遵守驼峰命名法

JS的数据类型

简单数据类型
1.Number----------------数字类型
2.String------------------字符串类型
3.Boolean--------------布尔类型（true/false）
4.Undefined-----------未定义类型
表示声明了没有赋值的变量
5.Null-------------------空类型
表示一个空

复杂数据类型
Object-------------------对象类型
Function-----------------函数类型
Array---------------------数组类型