前端学习之JavaScript(1)

目录

• 一. JavaScript简介
  • 1. JavaScript历史背景
  • 2. JavaScript和ECMAScript的关系
  • 3. JavaScript入门易学性
  • 4. JavaScript是前台语言
  • 5. JavaScript的组成
  • 6. JavaScript的特点
• 二. 第一个JavaScript代码
  • 1. js引入
  • 2. 语法规则
  • 3. JavaScript中输出信息的写法
  • 4. 变量
    • (1) 变量的声明和赋值
    • (2) 变量的命名规范
    • (3) 变量的类型
    • (4) 变量值的传递(赋值)
    • (5) 变量格式的转换
• 三. 基本数据类型
  • 1. 基本数据类型
  • 2. 引用数据类型
• 四. 运算符
  • 1. 赋值运算符
  • 2. 算数运算符
  • 3. 比较运算符
  • 4. 字符串拼接和字符串运算的特殊情况
• 五. 数据类型转换
  • 1. 将数值类型转换成字符串类型
  • 2. 将字符串类型转换成数值类型: Number(), parseInt(), parseFloat()
  • 3. 任何数据类型都可以转换为boolean类型
• 六. 流程控制
  • 1. if, if-else, if-else if-else
  • 2. 逻辑与(&&), 逻辑或(||)
  • 3. switch语句
  • 4. while循环, do-while循环
  • 5. for循环
• 七. 常用内置对象
  • 1. Array(数组)对象
  • 2. String(字符串)对象
  • 3. Date(日期)对象
  • 4. Math(算数)对象
• 八. 函数
  • 1. 函数的定义
  • 2. 函数的调用
  • 3. 函数的参数
  • 4. 函数的返回值

一. 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;
}