Unsplash
JavaScript 是一种轻量级，解释型的，有着函数优先 (First-class Function) 的编程语言，虽然它是作为开发 WEB 页面的脚本语言而出名的，但是在很多非浏览器环境中也使用 JavaScript，例如 node.js 和 Apache CouchDB，JS 是一种基于原型、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如：函数式编程）编程风格
HTML CSS JavaScript
1. JavaScript 介绍
HTML 是一种标记语言，用来结构化我们的网页内容和赋予内容含义，例如定义段落、标题，或是在页面中嵌入图片和视频
CSS 是一种样式规则语言，我们将样式应用于我们的 HTML 内容， 例如设置背景颜色和字体，对页面的内容进行布局
JavaScript 是一种编程语言，允许你创建动态更新的内容，控制多媒体，图像动画等等
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：① 核心(ECMAScript) ECMAScript是一个标准；② 文档对象模型 DOM [Document Object Model] ， 描述了处理网页内容的方法和接口；③ 浏览器对象模型 BOM [Browser Object Model] ，描述了与浏览器进行交互的方法和接口
JavaScript 特点：① 解释性执行的脚本语言；② 基于对象；③ 简单弱类型；④ 相对安全（不会操控文件）；⑤ 事件驱动；⑥ 跨平台性；
2. JavaScript 引入方式
内部写入 在 HTML 文件中直接进行代码的书写，把全部 JavaScript 引用放在 <body> 中，放在页面的内容后面
<body>
<!-- 内容在这 -->
<script type="text/javascript" src="js/index.js"></script>
</body>
因为浏览器执行 HTML 文件，是从上而下执行的，若是把 JavaScript 放在内容的前面，页面还未加载完成，JS 代码却已经执行完毕了，可能导致有些 JS 事件无法触发，在这里可以通过 UI 事件来解决，UI 事件指的是那些不一定与用户操作有关的事件
windows.onload = function () {
//加载完毕之后执行
}
load 事件会在一个资源及其依赖资源已完成加载后立即发生，目的: 保证在执行 JS 代码之前, 页面已经完全加载完毕，一般用于 head 中的 script 代码段
外部写入 所有的 <script> 标签都放在页面的 <head> 标签中
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/index.js"></script>
</head>
JavaScript 使用 C 语言风格的注释，包括单行注释和块级注释
var num = 13;//单行注释
/*
var num = 13;
var arr = [];
块级（多行）注释
*/
3. JavaScript 输出
JavaScript的输出方式一共有三种，分别是：alert 警告窗、弹出框；console.log 控制台打印；document.write 文档输出
alert
console.log
document.write
确认信息框，点击确认，返回 True；点击取消，返回 False
confirm_1
confirm_2
信息提示框，将填写的信息返回控制台
prompt_1
prompt_2
注释：JavaScript 代码可以直接在 Console 控制台执行，在 Chrome 浏览器开发者工具中，快捷键 F12
4. JavaScript 声明及命名规则
直接量(literal)，程序中直接使用的数据值
变量(variable)，变量是使用 var 关键字定义的一个存储空间，将直接量储存起来，方便调用
JavaScript 的变量是松散类型（弱类型），可以用来保存任何类型的数据，在 C 语言当中，我们定义整型变量会使用到 int，定义字符型变量会使用 char，定义浮点型变量会使用 float，而在 JavaScript 当中，不过什么类型的数据，统一通过关键字 var 进行声明
命名规则，[变量名、属性名、函数名、方法名] 的命名规则：
a. 由数字，字母，下划线 _，美元符 $ 构成，第一个字符不能为数字；
b. 区分大小写；
c. 驼峰命名法 (helloWorld)；
d. 中间不能出现空格；
e. 不能使用系统关键字、保留字；
关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等，按照规则，关键字是语言保留的，不能用作标识符
break case catch continue default delete do else finally for function if in
instanceof new return switch this throw try typeof var void while with
保留字在某种意思上是为将来的关键字而保留的单词，因此保留字不能被用作变量名或函数名
abstract boolean byte char class const debugger double enum export extends final float goto implements import int
interface long native package private protected public short static super synchronized throws transient volatile
5. JavaScript 基本数据类型
数字类型 Number
var num = 10;
字符串类型 String，字符串必须使用引号，单引号或者双引号都可以，这两者没有区别
var str = "10";
布尔类型 Boolean 布尔值只有 True 和 False
var bol_1 = true,bol_2 = false;
未定义类型 Undefined，无初始值即为未定义类型
var a;
空类型 Null
var b = null;
我们一般使用 typeof 操作符来返回数据类型
数据类型
var myName = "Nian糕"; //不要使用name作为变量名
var age = 22;
var ifSingle = true;
alert(myName,age,ifSingle);
console.log(myName,age,ifSingle);
运行结果 1
运行结果 2
由上面的运行结果可以看到，警告窗只输出了一个参数，而控制台却把所有的参数都打印了出来，这是因为 alert 函数一般用于输出字符串类的提示或警告信息，不过它的参数只有 1 个，多余的会被丢弃
6. JavaScript 复合数据类型
数组 Array，一组值的有序集合，使用下标体现有序，数组的下标从零开始，通过下标访问某个数组元素
运行结果
对象 Object，一组键值对的集合，键值对以 : 相隔，属性间用逗号分隔，最后一个属性的逗号可省略，对象属性的访问方式有两种：① 点访问法；② 中括号访问法
var o = {};
var btnList = document.getElementsByTagName("button");
var btnList = document["getElementsByTagName"]("button");
//对象的声明赋值
var person = {
name: "Nian糕",
age: 22,
city:"广州"
};
console.log(person.city)
console.log(person["age"])
运行结果
var classOne = [{
name: "Nian糕",
gender: "male",
number: 13,
age: 22,
score: 95
},{
name: "抹茶松糕",
gender: "male",
number: 13,
age: 24,
score: 86
},{
name: "枸杞红豆糕",
gender: "female",
number: 13,
age: 22,
score: 90
}]
// 第一位同学的分数：classOne[0].score
// 第二位同学的分数：classOne[1].score
// 第三位同学的分数：classOne[2].score
var avgScore = (classOne[0].score + classOne[1].score + classOne[2].score)/3;
console.log("本班级的平均分是" + avgScore);
运行结果
打印所有人的分数
for (var i = 0; i < classOne.length; i++) {
console.log(classOne[i].name + "的分数为" + classOne[i].score);
};
运行结果
使用 for 循环求班级平均分
var totalScore = 0;
for (var i = 0; i < classOne.length; i++) {
totalScore = totalScore + classOne[i].score;
};
var avgScore = totalScore / classOne.length;
console.log("本班级的平均分是：" + avgScore);
查找班级里的男同学个数
var count = 0;
for (var j = 0; j < classOne.length; j++) {
if (classOne[j].gender === "male") {
count++;
}
}
console.log("班级的男同学个数为" + count);
运行结果
查找班级分数最高的同学
var maxScore = 0;
var studentIndex = 0;
for(var k = 0; k < classOne.length; k++) {
if(maxScore < classOne[k].score) {
maxScore = classOne[k].score;
studentIndex = k;
}
}
console.log("班级分数最高分为：" + maxScore);
console.log("班级分数最高分同学为：" + classOne[studentIndex].name);
7. JavaScript 算术运算符
r = a + b;
r = a - b;
r = a * b;
r = a / b;
r = a % b; //求模，取余
r = 'a' + 'b'; //字符串拼接
自增自减 ++ --，运算符在前，先赋值，再运算；运算符在后，先运算，再赋值
运行结果 1
运行结果 2
运行结果 3
运行结果 4
复合运算符
a += b; //a = a + b
a -= b; //a = a - b
a *= b; //a = a * b
a /= b; //a = a / b
a %= b; //a = a % b
8. JavaScript 关系操作符
a > b;
a < b;
a == b; //等于
a === a; //全等，即完全相等
a <= b;
a >= b;
a != b;
等于 == 的情况下，只要值相同就返回 True
全等 === 的时候，需要值和类型都要匹配才能返回 True
赋值运算符 = 并不是等于，如果我想把 5 这个值赋值给变量 a，那么写法应该是：a=5;
注释：关系操作符返回的是布尔值 True / False，控制字符的比较，比较的是相对应的 ASCII 码
运行结果
条件运算符
表达式 1？表达式 2：表达式 3，若表达式 1 为真，则返回表达式 2，否则返回表达式 2
(a>b)?(c=4):(c=3)
假设 a = 5, b = 3
5 > 3为真, 则执行c = 4
9. JavaScript 逻辑运算符
&& 逻辑与，前后两个条件均为真才会执行
| | 逻辑或，前后两个条件有一个为真就可以
! 非，求当前的值的非
短路现象，由逻辑与和逻辑或的特性造成的特殊现象
短路与：当条件 1 为假时，条件 2 执行与否不影响总结果，形成短路，称为一假即假
短路或：当条件 1 为真时，条件 2 执行与否不影响总结果，形成短路，称为一真即真
在数学中，我们这样书写一个式子：y=(x+2)*{[(4-x)*3-8]/4+3}
而在 JavaScript 中，我们这样书写：y=(x+2)*(((4-x)*3-8)/4+3)，因为，在 JavaScript 当中，小括号 () 的作用是提升优先级；中括号 [] 指的是数组；大括号 {} 指的是对象
10. NaN
NaN = not a number
一般在数学表达式计算失败的情况下返回，等号运算符 == 和 === 不能被用来判断一个值是否是 NaN，必须使用 Number.isNaN() 或 isNaN() 函数，在执行自比较之中：NaN，也只有NaN，比较之中不等于它自己
NaN
11. 获取元素
getElementById() 方法，接受一个参数：获取元素的 ID，如果找到相应的元素则返回该元素的 HTMLDivElement 对象，如果不存在，则返回 NULL
document.getElementById('div1'); //获取 id 为div1 的元素
getElementsByTagName()方法，将返回一个对象数组这个数组保存着所有相同元素名的节点列表
document.getElementsByTagName('li'); //获取所有 li 元素，返回数组
document.getElementsByName() 方法，通过标签的名字来获取标签 （返回的是一个数组，将所用相同标签名的标签返回）
document.getElementsByClassName() 方法 （IE 不兼容）通过标签的 class 值来获取标签 （返回的是一个数组，将所有相同 class 名的标签返回）
querySelector() 方法，接受一个参数：通过元素的 css 选择器查找元素，只筛选单个，如果找到相应的元素则返回该元素的 HTMLDivElement 对象，如果不存在，则返回 NULL
document.querySelector('#div1'); //获取 id 为 div1 的元素
document.querySelector('.div1'); //获取 class 为 div1 的第一个元素
querySelectorAll() 方法，通过元素的 css 选择器查找元素，筛选全部，将返回一个对象数组这个数组保存着所有符合选择器的节点列表，
document.querySelectorAll('li'); //获取所有 li 元素，返回数组
document.querySelectorAll('.list'); //获取所有 class 为 list 的元素，返回数组
12. JavaScript 事件
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseup 某个鼠标按键被松开
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
网友评论