从零开始学前端：初识JavaScript --- 今天你学习了吗？（JS：Day01）

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：jQuery官网 — 今天你学习了吗？（CSS：Day26）

前言

上课啦上课啦，香喷喷的js来了~

第一节课：初识JavaScript

一、什么是JavaScript？

JavaScript(简称“JS”)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是他也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与self及Scheme较为接近。(总结起来就是：javaScript与Java没有丝毫关系，起这个名字完全就是蹭热度！)

JavaScript的标准是EMCAScript。截至2012年，所有浏览器都完整的支持ECMAScript5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。(总结：JavaScript的标准是EMCAScript)

注意：JavaScript与Java没有关系，起这个名字，起初只是为了蹭Java 的热度。

二、前端三层

• 结构层：HTML
• 表现层：CSS
• 行为层：JS

三、JavaScript由哪几部分组成

• ECMAScript（语法规则，英文全程：欧洲计算机协会）【相当于英语中的语法】，简称为es，我们会学习es5和es6。
• DOM（文本对象模型）【document object model】，之后的讲解中，会称div不仅仅为div标签，div元素，也会称div节点。
• BOM（浏览器对象模型）【browser object model】

调试代码在浏览器的console[控制台中心查看]

四、JavaScript代码写在哪里

1. 内部样式：script标签中。
2. 内嵌样式：行内方法调用，如onclick，写在标签当中。
3. 外部样式：外部创建 index.js 引入<script src=" "></script>

五、Script标签可以写在哪里

1. body标签里【推荐】
2. 与body平级
3. head标签里

*不可以放在style中（CSS样式）里面（这个不可以哦~）

六、JavaScript注释

HTML:

<!-- -->

CSS:

/* */

JS:

//   单行注释
/*
	 多行注释
*/ 

七、打印

1. alert() ：弹出警告
   

2. console.log() ：写入到浏览器的控制台
   

3. confirm() ：弹出内容
   

八、获取元素

1. 一般标签

标签	意义
document.getElementById(‘xxx’)	匹配id名是xxx的标签
document.getElementByTagName(“xxx”)	匹配标签名是xxx的集合
document.getElementByName(“xxx”)	匹配name是xxx的集合
document.getElementByClassName(“xxx”)	匹配class名称xxx的集合

2. 特殊的标签

• document.body
• document.head
• document.title

“.”的意思可以理解为“的”

九、HTML事件

• HTML事件是发生在HTML元素上的事情。
• 当在HTML页面中使用JavaScript时，JavaScript可以触发这些事件。

常见的HTML事件

• onchange HTML元素改变
• onclick 用户点击HTML元素
• onmouseover 用户在一个HTML元素上移动鼠标
• onmouseout 用户从一个HTML元素上移开鼠标
• onkeydown 用户按下键盘按键
• onload 浏览器已完成页面的加载

例子：

document.getElementById("mydiv").onclick = function() {}
//document.getElementById("mydiv")   我（主）
//onclick    打（谓）
//function   你（宾）

十、定义变量

定义变量可以使用什么？
es5：var，function(){}
es6：let

在这里我们使用var关键词来定义变量：

使用var变量命名需注意：

1. 变量命名时无需过多修饰、太长；
2. 见名知义，不能表达不明确；
3. 变量命名严格区分大小写；
4. 不能以数字开头；
5. 尽量不要使用中文作为变量名；
6. 不能使用关键字或保留字

定义变量注意问题：

1. 所有变量要先声明再使用；
2. 同时定义多个变量，可以用逗号隔开；
3. 一个变量只能声明一次；

预习：从零开始学前端：初识函数，合法属性与自定义属性 — 今天你学习了吗？（JS：Day02）