JavaScript
一. 概念
JavaScript(下文我们会用简称 JS 来代替) 是脚本编程语言, JS 语言开发的文件是以. JS 为后缀, 通过在 HTML 文件中引入该 JS 文件来控制 HTML 代码的交互功能以及前台数据处理的业务逻辑 (JS 语言代码也可以直接写在 HTML 文件中), 采用的 ECMAScript 语法, 属于编程语言.
ECMAScript 目前普遍使用的存在 ES5 与 ES6 两个版本
二. JS 的引入
行间式: JS 代码直接书写在标签的钩子事件中
<div id="box" onclick="this.style.backgroundColor ='red'"></div>
内联式: JS 代码书写在 script 标签中, script 需要放置在 body 的最下方, 也可以放在 head 和要找的元素下面
- <script>
- box.style.backgroundColor = 'pink'
- </script>
外链式: 链接了外部 JS 的 script 标签, 就相当于单标签, 内部代码块会自动屏蔽
<script src="js / 外联. js">
JS / 外联. JS
box.style.background = 'blue'
三. JS 的基础语法
变量
- // 关键字 变量名 = 变量值
- // 关键字四种: 不写也相当于定义一个 Windows. 变量名的变量 | var | let | const
- n1 = 10; // 全局变量
- // console.log(n1);
- var n2 = 20; // 局部变量
- // alert(n2);
- let n3 = 30; // 块级变量
- // document.write(n3);
- const N4 = 40; // 常量
- // console.log(N4);
- // N4 = 50; // 报错, 常量值不能修改
数据类型
专门建立的学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- // 值类型
- // 1) 数字类型: number
- var num1 = 10;
- var num2 = 3.14;
- console.log(num1, num2);
- console.log(typeof(num1), typeof num2);
- // 2) 字符串类型: string
- var s1 = '单引号的字符串';
- var s2 = "双引号的字符串";
- console.log(s1, s2);
- console.log(typeof s1, typeof s2);
var s3 = ` 多行字符串:
再来一行 `;
- console.log(typeof s3, s3);
- // 3) 布尔类型: boolean
- var b1 = true;
- var b2 = false;
- console.log(b1, b2);
- console.log(typeof b1, typeof b2);
- // console.log(true + true); // 1+1
- // 4) 未定义类型: undefined
- var owen;
- console.log(owen);
- var nick = undefined;
- console.log(nick);
- // 引用类型
- // 5) 对象类型
- var obj = new Object();
- console.log(typeof obj, obj);
- var obj2 = {
- };
- console.log(typeof obj2, obj2);
- // 6) 函数类型
- var fn = function () {
- };
- console.log(typeof fn, fn);
- // 其它
- // 7) 空类型
- var jerry = null;
- console.log(typeof jerry, jerry);
- // 8) 数组
- var arr = [1, 3, 2, 5, 4];
- console.log(typeof arr, arr);
- // 9) 时间
- var date = new Date();
- console.log(typeof date, date);
随机数
- // 随机数: Math.random() - (0, 1)
- // console.log(Math.random());
- // 正整数区间 [m, n]
- // (0, 1) * 10 => (0, 10) 取值 parseInt() => [0, 9] + 5 => [5, 14]
- // parseInt(Math.random() * 11) + 5 => [5, 15]
- // [m, n] => + 的值就是 m,* 的值 n - m + 1
- // parseInt(Math.random() * (n - m + 1)) + m => [m, n]
- var r_num = parseInt(Math.random() * (14 - 7 + 1)) + 7;
- console.log(r_num);
- // (0, 1) * 超大的数 取整
- // 一个正整数 % num => [0, num-1] + m => [m, num-1+m] => n = num+m-1 => num = n-m+1
- // 一个正整数 % (n-m+1) + m => [m, n]
- var random_num = parseInt( Math.random() * 10000000000 % (14 - 7 + 1) ) + 7;
- console.log(random_num)
运算符: 详情见课件
- // 1) 算术运算符:+ - */ % + -- | += ...
- console.log(5 / 2); // 2.5
- console.log(parseInt(5 / 2));
- console.log(parseFloat(5 / 2));
- // parseInt | parseFloat 可以完成 string => number
- res = parseInt('3.14.15abc');
- console.log(res); // 从头往后找整数部分
- res = parseFloat('3.14.15abc');
- console.log(res); // 从头往后找小数部分 (最多只识别一个小数点)
- res = parseInt('a3.14.15abc'); // NaN
- console.log(typeof res, res);
- // 2) 弱语言类型的 JS
- res = 10 + '5';
- console.log(res); // 字符串: 105
- res = 10 - '5';
- console.log(res); // 数字: 5
- // 数字 => 字符串
- res = '' + 5;
- console.log(typeof res, res);
- // 字符串 => 数字
- res = +'5';
- console.log(typeof res, res);
- // 3) 自增自减
- num = 10;
- num += 1;
- console.log(num);
- num++;
- console.log(num);
- num--;
- console.log(num);
- // 了解: 符号 在前优先级高于一切运算符, 在后优先级比赋值符还低
- // ++ 在前先自增再运算;++ 在后先运算再自增
- num = 10;
- res = num++;
- console.log(num, res);
- num = 10;
- res = ++num;
- console.log(num, res);
- // 4) 比较运算符的比较
- console.log(5 == '5'); // true, 只做值比较
- console.log(5 === '5'); // false, 做值与类型比较
- console.log(5 != '5'); // false, 只做值比较
- console.log(5 !== '5'); // true, 做值与类型比较
- // 5) 逻辑运算符 && || !
- console.log(true && true);
- console.log(false || false);
- console.log(!true);
- // 短路现象
- // &&: 有假则假, 前为假, 后不用判断
- num = 10;
- console.log(false && ++num); // num++ | ++num 都被短路不会被执行
- console.log(num);
- console.log(true || ++num); // num++ | ++num 都被短路不会被执行
- console.log(num);
- // 6) 三元运算符 (三目运算符)
- // 条件 ? 结果 1 : 结果 2
- res = 5 == '5' ? '值相等':'值不等';
- console.log(res);
分支结构
专门建立的学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- // 1)if 分支结构
- /* python
- * if 条件:
- * 代码块 1
- * elif 条件:
- * 代码块 2
- * else:
- * 代码块 3
- * */
- /** JS
- * if (条件) {
- * 代码块 1
- * }
- * else if (条件) {
- * 代码块 2
- * }
- * else {
- * 代码块 3
- * }
- */
- var num = parseInt(Math.random() * 16);
- console.log(num);
- if (num> 10) {
- console.log("产生的数超过 10")
- } else if (5 <= num && num <= 10) {
- console.log("产生的数间于 5~10")
- } else {
- console.log("产生的数不超过 5")
- }
- // 2)switch 分支结构
- /*
- month = parseInt(Math.random() * (2 - 0 + 1)) + 0;
- console.log(month);
- switch (month) {
- case 1:
- console.log('1 月 31 天');
- break; // 用来结束 case, 跳出 switch 分支结构
- case 2:
- console.log('2 月 28 天');
- break;
- default: // 没有走任何 case, 会进入 default 分支
- console.log('月份参数有误');
- }
- */
- month = parseInt(Math.random() * (12 - 1 + 1)) + 1;
- console.log(month);
- switch (month) {
- case 1:
- case 3:
- case 5:
- case 7:
- case 8:
- case 10:
- case 12:
- console.log('%s 月 31 天', month);
- break; // 用来结束 case, 跳出 switch 分支结构, 多个分支可以共享一个 break
- case 2:
- console.log('2 月 28 天');
- break;
- case 4:
- case 6:
- case 9:
- case 11:
- console.log('%s 月 30 天', month);
- break;
- default: // 没有走任何 case, 会进入 default 分支, 没有错误的情况可以省略
- console.log('月份参数有误');
- }
循环结构
- // 1) for 循环
- /*
- for (循环变量1; 条件表达式2; 增量3) { 循环体4 }
- 生命周期:1 243...243 2
- */
- // 1~10 直接的偶数
- for (var i = 1; i <= 10; i++) {
- if (i % 2 === 0) {
- console.log(i);
- }
- }
- // continue | break
- // 1 2 4 5
- for (var i = 1; i <= 5; i++) {
- if (i === 3) continue;
- console.log(i)
- }
- // 1 2 3
- for (var i = 1; i <= 5; i++) {
- if (i> 3) break;
- console.log(i)
- }
- // 了解
- var i = 1;
- for (; i <= 5;) {
- console.log(i);
- i++
- }
- // 2)while
- var i = 1;
- while (i <= 5) {
- console.log(i);
- i++;
- }
- // 3)do...while 循环: 先执行一次循环体, 再判断条件
- var num = 90;
- do {
- console.log(num);
- num++;
- } while (num <= 100);
- // for: 解决知道循环次数的循环
- // while:
- // 解决一切 for 与 do...while 能解决的问题 (结合函数的思想)
- // 解决不知道循环次数的循环 (循环用 break 结合)
- // do...while: 完成循环体必须要提前执行一次的循环
函数
函数概况
/* 函数
定义:
关键字 函数名 (参数列表) {
函数体;
返回值
}
var 函数名 = 关键字 (参数列表) {
函数体;
返回值
}
var 函数名 = (参数列表) => {
函数体;
返回值
}
函数成员:
函数名: 函数名存放的就是函数的地址
通过 函数名 () 调用函数的
参数列表: 将外界资源传给内部的桥梁
你传你的, 我收我的, 用... 接收可变长
函数体: 解决需求的代码块
功能代码块
返回值: 将内部数据反馈给外部
只能返回一个值, 不写或空 return 返回 undefined
匿名函数:
没有声明名字的函数
产生一个局部作用域
资源回收快
*/
有名函数
- // 定义
- function add(n1, n2) {
- return n1 + n2
- }
- // 使用
- res = add(10, 20);
- console.log(res);
- // 函数名的运用
- my_add = add;
- console.log(my_add(100, 200));
- // 参数列表: 你传你的, 我收我的, 用... 接收可变长
- // 少传未接收到的形参赋值为 undefined, 多传的实参自动被丢弃
- function fn(n1, n2) {
- console.log('传输的 n1:%s | n2:%s', n1, n2)
- }
- fn(10, 20);
- fn();
- fn(100);
- fn(1000, 2000, 3000);
- // 可变长参数
- function func(...num) {
- console.log(num)
- }
- func(1, 2, 5, 3, 4);
匿名函数
- // 匿名函数
- // 匿名函数的自调用 - 调用一次后就会被回收资源
- (function () {
- console.log('匿名函数')
- })();
- // 用变量接收 - 函数的第二种声明方式
- var fun = function () {
- console.log('函数的第二种声明方式')
- };
- fun();
- // 函数的第三种声明方式
- var fun2 = (n1, n2) => { // 有函数体标明 {}
- console.log('n1:%s | n2:%s', n1, n2);
- return n1 + n2
- };
- console.log(fun2(222, 444));
- var fun3 = (n1, n2) => n1 + n2; // 只有返回值可以省略 {}
- console.log(fun3(222, 444));
匿名函数的局部作用域作用
- // 匿名函数自调用, 可以产生局部作用域与外界隔离
- (function () {
- let number = 888
- })()
- // console.log(number) // 外界不可以直接访问
四种变量分析
专门建立的学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- function fn() {
- n1 = 10; // 只有全局变量外界才能访问
- var n2 = 20;
- let n3 = 30;
- const n4 = 40;
- }
- fn();
- console.log(n1);
- if (true) { // 块级作用域
- n1 = 10;
- var n2 = 20;
- let n3 = 30; // let 与 const 声明的变量右块级作用域
- const n4 = 40; // 常量
- }
- console.log(n1);
- console.log(n2);
- {
- let aaa = 10
- }
数据类型的使用
字符串
- // string => str
- // 1) 声明
- // 单引号 | 双引号 | 反引号
- // 2) 字符串拼接
- res = 'you are' + '' +'good man!';
- console.log(res);
- // 3) 字符串的切片
- s = 'you are good man!';
- n_s = s.slice(8, 12);
- console.log(n_s); // good
- // 4) 字符串替换
- s = 'you are good man!';
- n_s = s.replace('man', 'woman');
- console.log(n_s);
- // 5) 字符串拆分
- s = 'you are good man!';
- res = s.split(' ');
- console.log(res);
- // 6) 字符串迭代
- s = 'abcdef';
- for (num of s) {
- console.log(num)
- }
数组
- // array => list
- // 1) 声明
- arr = [1, 4, 2, 3, 5];
- console.log(arr);
- // 2) 反转
- arr.reverse();
- console.log(arr);
- // 3) 组合
- str = arr.join('@');
- console.log(str);
- // 4) 切片
- new_arr = arr.slice(1, 4);
- console.log(new_arr);
- // 5) 排序
- arr.sort();
- console.log(arr);
- // 6) 增删改查
- // 查: 只有正向索引
- console.log(arr[2]);
- // 增
- arr.push(888); // 尾增
- console.log(arr);
- arr.unshift(666); // 首增
- console.log(arr);
- // 删
- res = arr.pop(); // 尾删
- console.log(arr, res);
- res = arr.shift(); // 首删
- console.log(arr, res);
- // 增删改 综合方法: splice
- // 三个参数: 开始操作的索引 操作的位数 操作的结果 (可变长)
- arr = [1, 2, 3, 4, 5];
- // 数组长度: arr.length
- arr.splice(arr.length, 0, 666, 888);
- console.log(arr);
字典
- // object => dict
- // 1) 定义
- height = 180;
- dic = {
- 'name': 'Owen', // 本质是对象
- age: 18, // 所有的 key(属性名) 都是字符串类型, 所以可以省略引号
- height, // 当 value 为变量, 且变量名与 key 同名, 可以省略 value
- };
- console.log(dic);
- // 2) 访问
- console.log(dic.name);
- console.log(dic['age']);
- // 3) 增删改
- // 增
- dic.sex = '男';
- console.log(dic);
- // 删
- delete dic.sex;
- console.log(dic);
- // 改
- dic.name = 'Nick';
- console.log(dic);
概括
1,JS 变量: 不写 | var | let | const
2,JS 的基本数据类型: 值类型: number | string | boolean | undefined 引用类型: object | function 其它: null | Array | Date
3, 随机数: parseInt(Math.random() * (n - m + 1)) + m
4, 类型转换:"" + number => string | +string => number | parseInt(string) => number
5, 运算符:/ | ++ | === | &&,||,! | 条件? 结果 1: 结果 2
6, 类型的运用: string | [1, 2, 3] splice(index, count, args) | {}
7, 流程控制
8, 函数
function 函数名 (){}
var 函数名 = function (){}
let 函数名 = () => {}
来源: http://www.jianshu.com/p/ab62df41554f