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

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

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
- 前言
- 第一节课：初识JavaScript
- - 一、什么是JavaScript？
  - 二、前端三层
  - 三、JavaScript由哪几部分组成
  - 四、JavaScript代码写在哪里
  - 五、Script标签可以写在哪里
  - 六、JavaScript注释
  - 七、打印
  - 八、获取元素
  - 九、HTML事件
  - 十、定义变量

前言

上课啦上课啦，香喷喷的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代码写在哪里

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

五、Script标签可以写在哪里

body标签里【推荐】
与body平级
head标签里

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

六、JavaScript注释

HTML:

<!-- -->

CSS:

/* */

JS:

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

七、打印

alert() ：弹出警告
console.log() ：写入到浏览器的控制台
confirm() ：弹出内容

八、获取元素

一般标签

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

特殊的标签

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变量命名需注意：

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

定义变量注意问题：

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

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

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

从零开始学前端：函数 --- 今天你学习了吗？（JS：Day8）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:九九乘法表.全选反选全不选 - 今天你学习了吗?(JS:Day7) 文章目录从零开始学前端:程序猿小白也可 ...
从零开始学前端：定位 --- 今天你学习了吗？（CSS：Day17）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:显示隐藏与文本溢出 - 今天你学习了吗?(CSS:Day16) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：浮动 --- 今天你学习了吗？（CSS：Day15）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS盒子模型属性 - 今天你学习了吗?(CSS:Day14) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：作用域、执行顺序 --- 今天你学习了吗？（JS：Day9）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:函数 - 今天你学习了吗?(JS:Day8) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今天你学 ...
从零开始学前端：字体图标的引入 --- 今天你学习了吗？（CSS：Day18）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:定位 - 今天你学习了吗?(CSS:Day17) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：过渡和动画 --- 今天你学习了吗？（CSS：Day20）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:flex布局 - 今天你学习了吗?(CSS:Day19) 文章目录从零开始学前端:程序猿小白也可以完全掌 ...
从零开始学前端：显示隐藏与文本溢出 --- 今天你学习了吗？（CSS：Day16）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:浮动 - 今天你学习了吗?(CSS:Day15) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...

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