JavaScript基础(1)-ECMAScript
一、JavaScript简介
1、JavaScript历史背景
布兰登 • 艾奇(Brendan Eich,1961年~),1995年在网景公司,发明的JavaScript。
刚开始JavaScript叫做LiveScript,但是由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。
同时期还有其他的网页语言,比如VBScript、JScript等等,但是后来都被JavaScript打败了,所以现在的浏览器中,只运行一种脚本语言就是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的发展:蒸蒸日上
http://2004.sina.com.cn/
http://2008.sina.com.cn/
http://2012.sina.com.cn/
上面三个网站可以感受一下网页技术的发展。
2003年之前,JavaScript被认为“牛皮鲜”,用来制作页面上的广告,弹窗、漂浮的广告。什么东西让人烦,什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。
2004年,JavaScript命运开始改变,那一年,谷歌公司开始带头使用Ajax技术,Ajax技术就是JavaScript的一个应用。并且,那时候人们逐渐开始提升用户体验了。Ajax有一些应用场景,比如,当我们在百度搜索框搜文字时,输入框下方的智能提示,可以通过Ajax实现。比如,当我们注册网易邮箱时,能够及时发现用户名是否被占用,而不用调到另外一个页面。
2007年乔布斯发布了第一款iPhone,这一年开始,用户就多了上网的途径,就是用移动设备上网。
JavaScript在移动页面中,也是不可或缺的。并且这一年,互联网开始标准化,按照W3C规则三层分离,JavaScript越来越被重视。
2010年,人们更加了解HTML5技术,HTML5推出了一个东西叫做Canvas(画布),工程师可以在Canvas上进行游戏制作,利用的就是JavaScript。
2011年,Node.js诞生,使JavaScript能够开发服务器程序了。
如今,WebApp已经非常流行,就是用网页技术开发手机应用。手机系统有iOS、安卓。比如公司要开发一个“携程网”App,就需要招聘三队人马,比如iOS工程师10人,安卓工程师10人,前端工程师10人。共30人,开发成本大;而且如果要改版,要改3个版本。现在,假设公司都用web技术,用html+css+javascript技术就可以开发App。也易于迭代(网页一改变,所有的终端都变了)。
虽然目前WebApp在功能和性能上的体验远不如Native App,但是“WebApp慢慢取代Native App”很有可能是未来的趋势。
4、JavaScript入门易学性
JavaScript对初学者比较友好。
JavaScript是有界面效果的(比如C语言只有白底黑字)。
JavaScript是弱变量类型的语言,变量只需要用var来声明。而Java中变量的声明,要根据变量的类型来定义。
比如Java中需要定义如下变量:
int a; float a; double a; boolean a;
而JavaScript中,只用定义一个变量:
var a;
JavaScript不用关心其他的一些事情(比如内存的释放、指针等),更关心自己的业务。
5、JavaScript是前台语言
JavaScript是前台语言,而不是后台语言。
JavaScript运行在用户的终端网页上,而不是服务器上,所以我们称为“前台语言”。JavaScript就是一个简单的制作页面效果的语言,就是服务于页面的交互效果、美化、绚丽、不能操作数据库。
后台语言是运行在服务器上的,比如PHP、ASP、JSP等等,这些语言都能够操作数据库,都能够对数据库进行“增删改查”操作。Node.js除外。
6、JavaScript的组成
JavaScript基础分为三个部分:
ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM:操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM:操作浏览器部分功能的API。比如让浏览器自动滚动。
PS:JS机械重复性的劳动几乎为0,基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。
7、JavaScript的特点
(1)简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序。
(2)解释执行(解释语言):事先不编译、逐行执行、无需进行严格的变量声明。
(3)基于对象:内置大量现成对象,编写少量程序可以完成目标。
二、第一个JavaScript代码
1、js引入
a、在页面中,我们可以在body标签中放入如下标签对儿:
<script type="text/javascript"> //js代码段 </script>
b、引入js文件:
<script type="text/javascript" src="demo.js"></script>
2、语法规则
学习程序,是有规律可循的,程序要遵循一定的准则,这个准则就是:语法。
(1)JavaScript对换行、缩进、空格不敏感;
注意:每一条语句末尾都要加上分号,虽然分号不是必须加的,但为了程序今后要压缩,如果不加分号,压缩之后将不能运行。
(2)所有的符号,都是英语的,比如括号、引号、分号;
(3)JavaScript的注释:
a、单行注释: // 我是注释
b、多行注释: /* 多行注释 */
注意:sublime中,单行注释的快捷键是ctrl+/,多行注释的快捷键是ctrl+shift+/。
3、JavaScript中输出信息的写法
(1)弹出警告框:alert语句
<script type="text/javascript"> alert("娃哈哈"); </script>
(2)控制台输出:console.log()
console表示“控制台”,log表示“输出”,控制台在Chrome浏览器的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 = 100;
var是英语“variant”变量的缩写。后面要加一个空格,空格后面的东西就是“变量名”。
定义变量:var就是一个关键字,用来定义变量。所谓关键字,就是有特殊功能的小词语。关键字后面一定要有空格隔开。
变量的赋值:等号表示赋值,将等号右边的值,赋给左边的变量。
变量名:我们可以给变量取的名字。
注意:
a、在JavaScript中,永远都是用var来声明变量,这和C、Java等语言不同(有兴趣的同学可以看一下es6);
b、变量要先定义,才能使用,比如,我们不设置变量,直接输出的话,控制台将会报错,一般有经验的程序员,会把声明和赋值写在一起,比如:var a = 10; // 声明,并且赋值10
(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; // 定义了一个变量,并且赋值100
console.log(typeof a); // 输出a变量的类型,typeof()表示“获取变量的类型”
PS:在JavaScript中,只要是数,就是数值型(number)的。无论整浮、浮点数(即小数)、无论大小、无论正负,都是number类型的。
b、字符串型:string
用单引号或者双引号括起来的字符,如下示例:
var a = "abcde"; var b = '路飞'; var c = "123123"; var d = ""; // 空字符串 console.log(typeof a,typeof b,typeof c,typeof d); // string string string string
c、连字符和加号的区别
键盘上的“+”可能是连字符,也可能是数字的加号,如下:
console.log("我" + "爱" + "你"); // 连字符,把汉字连在一起,输出:我爱你 console.log("我+爱+你"); // 原样输出:我+爱+你 console.log("我"+512) // 输出:我512 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 a = parseInt(5.8 + 4.7); console.log(a); // 输出:10
三、数据类型
数据类型包括:基本数据类型 和 引用数据类型;
基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象;
当我们把值赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值;
1、基本数据类型
a、number
var a = 123; console.log(typeof a) // 输出:number // 特殊情况:Infinity(无限大)是 number类型 var a1 = 5/0; console.log(a1) // Infinity console.log(typeof a1) // 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
Arrray
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); // es6的模块字符串,tab键上面的反引号``, 添加变量使用${变量名} var str1 = `3月20日,${name}战争爆发,以${am}为主的联合部队击溃了军队。`; console.log(str1);
五、数据类型转换
语言中我们的数据类型有很多,在某个页面中展示的数据类型也不同,比如说电话号码就要求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.123wadjhkd'; 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 ji = 20; if(ji >= 10){ console.log('恭喜你,吃鸡成功,大吉大利') } console.log('hello world'); // 这里的代码还会执行
b、if-else,例如:
var ji = 20; if(ji >= 10){ 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 = i+1; // 改变循环条件 }
练习:将1-100所有是2的倍数在控制台中打印,如下代码:
var i = 1; while(i <= 100){ if(i%2 == 0){ console.log(i) } i++; }
b、do-while循环,例如:
// 不管有没有满足while中的条件do里面的代码都会先执行一次 var i = 3;// 初始化循环变量 do{ console.log(i) 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);
练习:在浏览器中输出直角三角形,如下代码:
for(var i = 1; i <= 6; i++){ for(var j = 1;j <= i; j++){ document.write("*"); } document.write('<br>'); }
练习:在浏览器中输出等腰直角三角形,如下代码:
for(var i = 1; i <= 6; i++){ // 控制行数 // 控制空格数 for(var s = i; s < 6; s++){ document.write(' ') } 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(Array.isArray(arr)); // true
2、String(字符串)对象
方法 |
含义 |
charAt() |
返回指定索引的字符 |
concat() |
返回字符串值,表示两个或多个字符串的拼接 |
replace(a,b) |
字符串b替换了a |
indexOf() |
返回某个指定的字符串值在字符串中首次出现的位置,没有则返回-1 |
slice() |
返回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 = '1234567755'; var newStr = a.replace('4567','****'); console.log(newStr); // 123****755 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; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步