前端学习之JavaScript(1)

一. JavaScript简介
二. 第一个JavaScript代码
三. 基本数据类型
- 1. 基本数据类型
- 2. 引用数据类型
四. 运算符
五. 数据类型转换
六. 流程控制
七. 常用内置对象
八. 函数

一. JavaScript简介

1. JavaScript历史背景

布兰登 ·艾奇(Brendan Eich, 1961年~), 1995年在网景公司, 发明的JavaScript.

2. JavaScript和ECMAScript的关系

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)制定的标准.

JavaScript是由公司开发而成的, 问题是不便于其他的公司拓展和使用. 所以欧洲的这个ECMA的组织, 牵头制定JavaScript的标准, 取名为ECMAScript.

简单来说, ECMAScript不是一门语言,而是一个标准. 符合这个标准的比较常见的有: JavaScript、Action Script(Flash中用的语言). 就是说, 你JavaScript学完了, Flash中的程序也就轻而易举了.

ECMAScript在2015年6月, 发布了ECMAScript 6版本, 语言的能力更强(也包含了很多新特性). 但是, 浏览器的厂商不能那么快去追上这个标准.

《ECMAScript 6 入门》 – 阮一峰 http://es6.ruanyifeng.com/

3. JavaScript入门易学性

JavaScript对初学者比较友好.

JavaScript是有页面效果的(比如C语言只有白底黑字).

JavaScript是弱变量类型的语言, 变量只需要用var来声明, 而Java中变量的声明, 要根据变量的类型来定义.

比如Java中需要定义如下变量:

int a;		//整数

float a;	//单精度浮点数

double a;	//双精度浮点数

String a;	//字符串

boolean a;	//布尔

而JavaScript中, 只用定义一个变量:

var a;

JavaScript不用关心其他的一些事情(比如内存的释放,指针等), 更关心自己的业务逻辑.

4. JavaScript是前台语言

JavaScript是前台语言, 而不是后台语言.

JavaScript运行在用户的终端网页上, 而不是服务器上, 所以我们称为"前台语言". JavaScript就是一个简单的制作页面效果的语言, 它服务于页面的交互效果, 美化, 绚丽, 但是不能操作数据库.

后台语言是运行在服务器上的, 比如PHP, ASP JSP等等, 这些语言都能够操作数据库, 都能对数据库进行"增删改查"操作.

5. JavaScript的组成

JavaScript基础分为三个部分:
- ECMAScript: JavaScript的语法标准. 包括变量, 表达式, 运算符, 函数, if语句, for语句等.
- DOM: 操作网页上的元素API. 比如让盒子移动, 变色, 轮播图等.
- BOM: 操作浏览器部分功能的API. 比如让浏览器自动滚动.

PS: JS机械重复性的劳动几乎为0, 基础都是创造性的劳动, 而不像HTML, CSS中margin, padding都是机械重复劳动.

6. JavaScript的特点

(1) 简单易用: 可以使用任何文本编辑工具编写, 只需要浏览器就可以执行程序.
(2) 解释执行(解释语言): 事先不编译, 逐行执行, 无需进行严格的变量声明.
(3) 基于对象: 内置大量现成对象, 编写少量程序可以完成目标.

二. 第一个JavaScript代码

1. js引入

a. 在HTML页面中, 我们可以在body标签中放入如下标签对:

<script type="text/javascript">

    //js代码段

</script>

b. 引入js文件

<script type="text/javascript" src="demo.js"></script>

2. 语法规则

学习程序, 是有规律可循的, 程序要遵循一定的准则, 这个准则就是: 语法.

(1) JavaScript对换行, 缩进, 空格不敏感

注意: 每一条语句末尾都要加上分号, 虽然分号不是必须的, 但为了程序今后要压缩, 如果不加分号, 压缩之后将不能运行.

(2) JavaScript中所有的符号都是英文字符, 不能是中文字符.
(3) JavaScript的注释:
- a. 单行注释: //单行注释
- b. 多行注释: /*多行注释*/

注意: sublime中, 单行注释的快捷键是ctrl+/, 多行注释的快捷键是ctrl+shift+/.

3. JavaScript中输出信息的写法

(1) 弹出警告框: alert语句

<script type="text/javascript">

    alert("娃哈哈")

</script>

(2) 控制台输出: console.log()

console表示"控制台", log表示"输出", 控制台在Chorme浏览器的F12中, 控制台是程序员调试程序的地方, 程序员经常使用这条语句输出一些东西, 来测试程序是否正确.

(3)用户输入: prompt()语句

prompt()就是专门用来弹出能够让用户输入的对话框, 代码如下:

<script type="text/javascript">

    var a = prompt("今天是什么天气?");

	console.log(a);

</script>

上方代码中, 用户输入的内容, 将被传递给变量a.

prompt()语句中, 用户不管输入的是什么内容, 都是字符串类型的.

(4) alert和prompt的区别:

alert("从前有座山");		// 直接使用,不需要变量

var a = prompt("请输入一个数字:"); // 必须用一个变量来接收用户输入的值

4. 变量

(1) 变量的声明和赋值

var a = 10;

var是英语"varient"(变量)的缩写, 后面要加一个空格, 空格后面的东西就是"变量名".

定义变量: var就是一个关键字, 用来定义变量. 所谓关键字, 就是有特殊功能的小词语. 关键字后面一定要有空格隔开.
变量的赋值: 等号表示赋值, 将等号右边的值, 赋给左边的变量.
变量名: 我们可以自定义一个变量的名字.

注意:

a. 在JavaScript中, 永远都是用var来声明变量, 这和C, Java等语言不同.
b. 变量要先定义, 才能使用. 比如, 我们不设置变量, 直接输出的话, 控制台将会报错, 一般有经验的程序员, 会把声明和赋值写在一起, 例如:

var a = 10; //声明一个变量a,并把10赋值给a

(2) 变量的命名规范

a. 变量名有命名规范: 只能由英语字母, 数字, 下划线, 美元符号$构成, 且不能以数字开头, 并且不能是JavaScript保留字.
b. 下列的单词, 叫做保留字, 就是说不允许当作变量名, 了解即可:

    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

c. 大写字母是可以使用的, 并且大小写敏感, 也就是说A和a是两个变量.

(3) 变量的类型

变量里面能够存储数字, 字符串, 变量会自动的根据存储内容的类型不同, 来决定自己的类型.

a. 数值型: number

如果一个变量中存放了数字, 那么这个变量就是数值型的, 如下示例:

var a = 100;			//定义了一个变量a, 并且赋值为100

console.log(typeof a);	//输出a变量的类型, typeof()表示"获取变量的类型"

PS: 在JavaScript中, 只要是数, 就是数值型(number)的. 无论整数, 浮点数, 无论大小, 无论正负, 都是number类型的.

b. 字符串型: string

用单引号或者双引号包裹起来的字符, 如下示例:

var a = "abcde";

var b = "路飞学城";

var c = "123456";

var d = "",		//空字符串

console.log(typeof a, typeof b, typeof c, typeof d);

//打印结果: string string string string

c. 连字符和加号的区别

键盘上的+可能是连字符, 也可能是数字的加号, 如下:

console.log("大" + "逗" + "比");  //连字符,把汉字连在一起,输出结果: 大逗比

console.log("大+逗+比");  //原样输出: 大+逗+比

console.log("你这个" + 2 + "B" + "青年");  //输出: 你这个2B青年

console.log(1 + 2 + 3);  //先计算再输出结果: 6

总结:如果加号两边都是数值, 此时是加, 否则就是连字符.

(4) 变量值的传递(赋值)

a = b;  //把b的值赋给a, b的值不变

(5) 变量格式的转换

parseInt()可以将字符串转化成数字, 例如: parseInt("5");

parseInt还具有以下特性:
- a. 带有自动净化的功能: 只保留字符串最开头的数字, 后面的中文自动消失, 例如:
```
console.log(parseInt("2018小马哥你真帅!"));  //输出: 2018
```
- b. 带有自动截断小数的功能: 只截取整数部分. 例如:
```
var a = parseInt(5.8) + parseInt(4.7);

console.log(a);  //输出: 9

var b = parseInt(5.8 + 4.7);

console.log(b);  //输出: 10
```

三. 基本数据类型

数据类型包括: 基本数据类型 和 引用数据类型.

基本数据类型指的是简单的数据段, 引用数据类型指的是有多个值构成的对象.

当我们把值赋值给一个变量时, 解释器首先要判断的就是这个值是基本数据类型还是引用数据类型.

1. 基本数据类型

a. number(数字对象)

var a = 123;

caosole.log(typeof a)  //输出: number

//注意特殊情况: Infinity(无限大)是 number 类型的

var b = 5/0;  //很显然 5/0 是一个无限大的数字

console.log(b);  //Infinity

console.log(typeof b)  //number

b. string(字符串对象)

var str = "123";

console.log(typeof str)  //string

c. boolean(布尔对象)

var b1 = false;

console.log(typeof b1);  //boolean

d. null(空对象)

var c1 = null;  //空对象

console.log(typeof c1)  //object

e. undefined(未定义对象)

var d1;  //只声明未赋值表示变量为定义

console.log(typeof d1)  //undefined

2. 引用数据类型

引用数据类型有以下几种, 后面再来介绍.

Function(函数)
Object(对象)
Array(数组)
String(字符串)
Date(日期)

四. 运算符

1. 赋值运算符

=, +=, -=, *=, /=, %=

2. 算数运算符

+, -, *, /, %, ++, --

3. 比较运算符

==(比较双方的值), ===(比较双方的值和数据类型), !=, !==, <, >, <=, >=.

注意: ==(!=)比较的是值, ===(!==)比较的是值和数据类型, 例如:

var s = "1";

var n = 1;

console.log(s == n);  //true

console.log(s === n);  //false

4. 字符串拼接和字符串运算的特殊情况

a. 字符串类型的数值和数值类型相减结果是数值, 例如:

var a = "3";

var b = 2;

console.log(a - b);  // 1

b. NaN( not a number )是一个number类型

var b1 = "one";

var b2 = "two";

ret = b1 * b2;

console.log(ret, typeof(ret))  //NaN number

c. 字符串拼接

var name = "伊拉克";

var am  = "美军";

// 字符串拼接

var str = "3月20日," + name + "战争爆发,以" + am + "为主的联合部队击溃了军队.";

console.log(str);

// 输出结果: 3月20日,伊拉克战争爆发,以美军为主的联合部队击溃了军队.

// es6的模块字符串,tab键上面的反引号``,添加变量使用${变量名}

var str1 = `3月20日,${name}战争爆发,以${am}为主的联合部队击溃了军队.`;

console.log(str1);

// 输出结果: 3月20日,伊拉克战争爆发,以美军为主的联合部队击溃了军队.

五. 数据类型转换

语言中我们的数据类型有很多, 在某个页面中展示的数据类型也不同, 比如说电话号码就要求number类型, 而姓名就要求string类型的. 那么在适当的情况下我们可以将数据类型进行转换.

1. 将数值类型转换成字符串类型

a. 隐式转换

var n1 = 123;

var n2 = "123";

var n3 = n1 + n2;

console.log(n3)  // 输出结果: 123123

console.log(typeof n3)  //输出结果: string

b. 强制类型转换: String(), toString

var n1 = 123;

var str1 = String(n1);

console.log(str1, typeof(str1));  //输出结果: 123 string

var num = 234;

str2 = num.toString()

console.log(str2, typeof(str2));  //输出结果: 234 string

2. 将字符串类型转换成数值类型: `Number()`, `parseInt()`, `parseFloat()`

var stringNum = "789.123qazwsx";

var str = "666";

console.log(Number(stringNum), Number(str))  //输出结果: NaN 666

console.log(parseInt(stringNum))  //输出结果: 789

console.log(parseFloat(stringNum))  //输出结果: 789.123

3. 任何数据类型都可以转换为boolean类型

// 非假(0)即真

var b1 = "123";  //true

var b2 = 0;  //false

var b3 = -123;  //true

var b4 = Infinity;  //true

var b5 = NaN;  //false

var b6;  //false

var b7 = null;  //false

六. 流程控制

1. `if`, `if-else`, `if-else if-else`

a. if语句, 例如:

var age = 20;

if(age >= 18){

    console.log("您已成年,游戏时间无限制")

};

console.log("hello world");  //这里的代码还会执行

b. if-else, 例如:

var age = 20

if(age >= 18){

    console.log("您已成年,游戏时间无限制")

}else{  //这里的代码不会执行

    console.log("对不起,您还未成年.今天的游戏时间已达到上限")

}

c. if-else if-else, 例如:

if(true){

    //满足条件执行这段代码

}else if(true){

    //满足条件执行这段代码

}else if(true){

    //满足条件执行这段代码

}else{

    //满足条件执行这段代码

}

2. 逻辑与(`&&`), 逻辑或(`||`)

a. 模拟: 如果 "总分 > 400分" 并且 "数学成绩 > 89分" 则被清华大学录取, 例如:

var sum = 405;

var math = 91;

if(sum > 400 && math > 90){

    console.log("成功被清华大学录取")

}else{

    alert("高考失利")

}

b. 模拟: 如果 "总分 > 500分" 或者 "英语 > 85分" 则被复旦大学录取, 例如:

if(sum > 500 || english > 85){

    console.log("成功被复旦大学录取")

}else{

    alert("高考失利")

}

3. `switch语句`

var gameScore = "better";

switch(gameScore){

    case "good":

        console.log("玩得很好");

        break;  // break表示退出,若不写则直到下一个break才退出(break穿透)

    case "better":

        console.log("玩的老牛逼了");

        break;

    case "best":

        console.log("恭喜你,吃鸡成功");

        break;

    default:

        console.log("很遗憾,你失败了")

}

4. `while循环`, `do-while循环`

a. while循环, 例如:

var i = 1;  //初始化循环变量

while(i <= 9){  //判断循环条件

    console.log(i);

    i += 1;  //改变循环条件

}

练习: 将1~100所有偶数在控制台打印出来, 如下代码:

var i = 1;

while(i <= 100){

    if (i % 2 == 0){

        console.log(i);

    }

    i += 1;

}

b. do-while循环, 例如:

//不管有没有满足while中的条件,do里面的代码都会先执行一次

var i = 1;  //初始化循环变量

do{         //do内部开始循环

    console.log(i);

    if(i == 4){

        console.log("不太吉利")

    }else if(i == 8){

        console.log("恭喜发财")

    }

    i++;    //改变循环条件

}while(i < 10)  //判断循环条件

5. `for循环`

for(var i = 1; i <= 10; i++){

    console.log(i)

}

练习: 将1-100之间的所有偶数打印在控制台, 如下代码:

for(var i = 1; i <= 100, i++){

    if(i % 2 == 0){

        console.log(i)

    }

}

练习: 将1-100之间所有数之和打印在控制台, 如下代码:

sum = 0;

for(var i = 1; i <= 100; i++){

    sum += i

}

console.log(sum);	//输出结果: 5050

练习: 在浏览器中输出直角三角形, 如下代码:

for(var i = 1; i <= 6; i++){

    for(var j = 1; j <= i; i++){

        document.write("*")

    }

    document.write("<br>");

}

练习: 在浏览器中输出等腰直角三角形, 如下代码:

for(var i = 1; i <= 6; i++){	//控制行数

    //控制空格数

    for(var s = i; s < 6; s++){

        document.write("&nbsp;")

    }

    for(var j = 1; j <= 2*i-1; j++){

        document.write("*")

    }

    document.write("<br>")

}

七. 常用内置对象

JavaScript中的所有事物都是对象: 字符串, 数值, 数组, 函数...此外, JavaScript允许自定义对象.

JavaScript提供多个内建对象, 比如String, Date, Array等等. 对象只是带有属性和方法的特殊数据类型.

1. `Array`(数组)对象

(1)数组的创建有两种方式
- a. 字面量方式, 推荐使用这种方式, 简单便捷, 例如:
```
var colors = ["red", "green", "yellow"];
```
- b. 构造函数的方式, 使用new关键词对构建函数进行创建对象, 例如:
```
var colors = new Array();
```
(2)数组的赋值

var arr = [];

//通过下标(索引)进行赋值

arr[0] = 123;

arr[1] = "嘿嘿";

arr[2] = "哈哈";

(3)数组的常用方法和示例

方法或属性	描述
concat()	连接两个或更多的数组,并返回结果
join()	把数组的所有元素放入一个字符串
toString()	把数组转换为字符串,并返回结果
slice(start,end)	选取数组的一部分,并返回一个新数组
pop()	删除数组的最后一个元素,并返回删除的元素
push()	向数组的末尾追加一个或更多元素,并返回新的长度
reverse()	反转数组的元素顺序
sort()	对数组的元素进行排序
shift()	删除并返回数组的第一个元素
unshift()	向数组的开头添加一个或更多元素,并返回新的长度
Array.isArray(待测)	判断对象是否为数组
length	数组的一个属性,设置或返回数组元素的个数

var north = ["北京", "山东", "天津"];

var south = ["东莞", "深圳", "上海"];

var newCity = north.concat(south);

console.log(newCity);	//["北京", "山东", "天津", "东莞", "深圳", "上海"]

var score = [98, 78, 76, 100, 0];

var str = score.join("|");

console.log(str);	// 98|78|76|100|0

str1 = score.toString();

console.log(str1);	// "98,78,76,100,0"

var arr = ["张三", "李四", "王五", "赵六"];

var newArr = arr.slice(1, 3);

console.log(newArr);	// ["李四", "王五"]

arr.pop();

console.log(arr);		// ["张三", "李四", "王五"]

arr.push("小马哥");

console.log(arr);		// ["张三", "李四", "王五", "小马哥"]

var names = ["alex", "wusir", "xiaoma", "angle"];

names.reverse();

console.log(names);		// ["angle", "xiaoma", "wusir", "alex"]

var names = ["alex", "wusir", "xiaoma", "angle"];

names.sort(names);

console.log(names);		// ["alex", "angle", "wusir", "xiaoma"]

var arr = ["张三", "李四", "王五", "赵六"];

arr.shift();

console.log(arr);		// ["李四", "王五", "赵六"]

arr.unshift("小马哥");

console.log(arr);		// ["小马哥", "李四", "王五", "赵六"]

var arr = [1];

console.log(Arrar.isArray(arr));	// true

2. `String`(字符串)对象

方法	含义
charAt()	返回指定索引的字符
concat()	返回字符串值,表示两个或多个字符串的拼接
replace(a,b)	字符串b替换了字符串a
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置,没有则返回-1
slice(start,end)	返回`start`到`end-1`之间的字符串,索引从0开始
split()	把字符串分割为字符串数组
substr(start,end)	字符串截取，顾头不顾尾
toLowerCase()	返回一个新的字符串,该字符串的字母都变成了小写
toUpperCase()	返回一个新的字符串,该字符串的字母都变成了大写
match()	查找到一个或多个正则表达式的匹配
search()	查找与正则表达式相匹配的值

var str = 'hello';

var charset = str.charAt(1);

console.log(charset);	// e

var str1 = 'al';

var str2 = 'ex';

console.log(str1.concat(str2, str1));	// alexal

var a = "123456789";

var newStr = a.replace("456", "***");

console.log(newStr);	// 123***789

var str = 'world';

console.log(str.indexOf('o'));  // 1

console.log(str.indexOf('a'));  // -1

var str = '正能量';

console.log(str.slice(1,2));  // 能

var str = '我的天呢，a你在说什么呢？a哈哈哈';

console.log(str.split('a')); // ["我的天呢，", "你在说什么呢？", "哈哈哈"]

var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';

console.log(str.substr(0,4)); // 我的天呢

var str = 'XIAOMAGE';

console.log(str.toLowerCase());  // xiaomage

var str = 'xiaomage';

console.log(str.toUpperCase());  // XIAOMAGE

3. `Date`(日期)对象

创建日期对象只有构造函数一种方式, 使用new关键字, 例如:

var myDate = new Date();	//创建了一个Date对象

常用方法和示例:

方法	含义
Date()	根据本地时间返回当天的日期和时间
getFullYear()	根据本地时间返回指定日期对象的年份(四位数年份时返回四位数字)
getMonth()	根据本地时间返回指定日期对象的月份(0-11)
getDate()	根据本地时间返回指定日期对象的月份中的第几天(1-31)
getDay()	根据本地时间返回指定日期对象的星期中的第几天(0-6)
getHours()	根据本地时间返回指定日期对象的小时(0-23)
getMinutes()	根据本地时间返回指定日期对象的分钟(0-59)
getSeconds()	根据本地时间返回指定日期对象的秒数(0-59)
toLocaleString()	据本地时间格式,把Date对象转换为字符串

var myDate = new Date();

console.log(Date());

console.log(myDate.getFullYear());

console.log(myDate.getMonth());

console.log(myDate.getDate());

console.log(myDate.getDay());

console.log(myDate.getHours());

console.log(myDate.getMinutes());

console.log(myDate.getSeconds());

console.log(myDate.toLocaleString());

4. `Math`(算数)对象

方法	含义
Math.ceil()	向上取整,称为"天花板函数"
Math.floor()	向下取整,称为"地板函数"
Math.min(a,b)	求a和b中的最小值
Math.max(a,b)	求a和b中的最大值
Math.random()	随机数,默认0-1之间(包括0,不包括1)的随机数,公式`min+Math.random()*(max-min)`表示min~max之间的数

var x = 1.234;

var a = Math.ceil(x);

var b = Math.floor(x);

console.log(a, b);		// 2 1

console.log(Math.min(3, 8));	// 3

console.log(Math.max(3, 8));	// 8

var ran = Math.random();

console.log(ran);	// 大于等于0 小于1 的数

ran2 = 100 + Math.random() * 100;	// min + Math.random() * (max - min)

console.log(ran2);	// 100-200之间的随机数

八. 函数

函数就是将一些语句进行封装, 然后通过调用的方式, 执行这些语句.

作用:
- 将大量重复的语句写在函数里, 以后需要这些语句的时候, 可以直接调用函数, 避免重复劳动.
- 简化编程, 让编程模块化.

1. 函数的定义

function 函数名(){

    //函数体

}

function: 是一个关键字, 中文是"函数","功能"的意思.
函数名: 命名规范和变量的命名规范是一样的, 只能是字母, 数字, 下划线, 美元符号, 不能以数字开头.
参数: 后面有一对小括号, 里面是放参数用的.
函数体: 函数体放在大括号里面, 是这个函数的语句.

2. 函数的调用

函数名();

3. 函数的参数

函数的参数包括形参和实参(实际参数和形式参数的个数要相同), 例如:

sum(3, 4);

sum("3", "4");

sum("Hello", "World");

// 函数: 求和

function sum(a, b){

    console.log(a + b);

}

4. 函数的返回值

console.log(sum(3, 4));

// 函数: 求和

function sum(a, b){

    return a + b;

}