一、Javascript简介
前端三层:
HTML 结构层 从语义的角度描述页面结构
CSS 样式层 从装饰的角度描述页面的样式
JavaScript 行文层 从交互的角度描述页面的行为
1、JavaScript作用
数据验证
读写HTML元素
与浏览器窗口及其内容的交互效果
网页特效(轮播图、tab栏切换、炫酷HTML5页面)
WEB游戏制作
基于Node.js技术进行服务器端编程
2、JavaScript简史
在WEB日益发展的同时,网页的大小和复杂性不断增加,受制于网速的限制,为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担,当时走在技术革新最前沿的Netscape(网景) 公司,决定着手开发一种客户端语言,用来处理这种简单的验证。
1995年,就职于Netscape 公司的布兰登·艾奇(Brendan Eich),开始着手为即将于1996年2月发布的Netscape Navigator 2浏览器开发一种名为LiveScript 的脚本语言。为了尽快完成LiveScript 的开发,Netscape 与Sun 公司建立了一个开发联盟。在Netscape Navigator 2 正式发布前夕,Netscape 为了搭上媒体热炒Java 的顺风车,临时把LiveScript 改名为JavaScript。
出任Mozilla CTO
由于JavaScript1.0获得的关注度越来越高,1996年,微软就在其Internet Explorer 3 中加入了名为JScript 的JavaScript 实现,这意味着有了两个不同的JavaScript 版本,导致JavaScript没有一个标准化的语法和特性。
1997 年,以JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA,European Computer Manufacturers Association)。该协会指定39 号技术委员会(TC39,Technical Committee #39)负责“ 标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”。TC39 由来自Netscape、Sun、微软、Borland 及其他关注脚本语言发展的公司的程序员组成,他们经过数月的努力完成了ECMA-262标准,定义一种名为ECMAScript的新脚本语言。
3、ECMAscript发展
1998年6月,ECMAScript 2.0版发布。
1999年12月,ECMAScript 3.0版发布,成为JavaScript的通行标准,得到了广泛支持。
2007年10月,ECMAScript 4.0版草案发布,对3.0版做了大幅升级。草案发布后,由于4.0版的目标过于激进,各方对于是否通过这个标准,发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司,反对JavaScript的大幅升级,主张小幅改动;以JavaScript创造者Brendan Eich为首的Mozilla公司,则坚持当前的草案。
2008年7月,由于各方分歧太大,争论过于激进,ECMA开会决定,中止ECMAScript 4.0的开发,将其中涉及现有功能改善的一小部分,发布为ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为Harmony(和谐)。会后不久,ECMAScript 3.1就改名为ECMAScript 5。
2009年12月,ECMAScript 5.0版正式发布。Harmony项目则一分为二,一些较为可行的设想定名为JavaScript.next继续开发,后来演变成ECMAScript 6;一些不是很成熟的设想,则被视为JavaScript.next.next,在更远的将来再考虑推出。
2011年6月,ECMAscript 5.1版发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。
2013年3月,ECMAScript 6草案冻结,不再添加新功能。新的功能设想将被放到ECMAScript 7。
2013年12月,ECMAScript 6草案发布。然后是12个月的讨论期,听取各方反馈。
2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015。
js他的实际组成:ECMAscript、DOM、BOM。
Javscript,JScript,ActionScript等脚本语言都是基于ECMAScript标准实现的。
在JavaScript,JScript和ActionScript中声明变量,操作数组等语法完全一样,因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法,这些都是各自语言的扩展。
JavaScript是由ECMAScript,DOM和BOM三者组成的。
4、课程设置
语言核心
DOM、BOM、页面特效
jQuery
二、Hello world!
程序员喜欢在调试程序时,在页面上输出一些内容,常用的一句话就是“hello world”,你好世界。
<script type="text/javascript">
alert("hello world!");
</script>
1、js书写位置
初学者写js代码是写在html文件里,所有的js代码需要写在一对script标签内部。script标签位置可以是html结构的任意位置。
注意:属性type,属性值是“text/javascript”,表示,书写的是纯文本类型的JavaScript代码。
<script type="text/javascript"> 这里书写js代码 </script> |
开始习惯写在head标签内部。
2、注释
html的注释
<!--这是注释--> |
css的注释
/*这是css注释*/ |
js的注释:
/*这是一个js的注释 我可以换行书写 块级注释 */ |
块级注释:可以注释多行代码或文字。
//这是一行文字 //再写就出错了 //我是单行注释,作用范围只有一行 |
单行注释:只能注释一行代码,书写位置在这一行代码的首位置。
webstorm快捷键:单行注释快捷键ctrl+/,块级注释快捷键ctrl+shift+/。
3、alert语句
alert是“示警、警示”的意思,在js里可以让页面弹出一个警示框,里面的内容是程序员自定义。
alert语句写在script标签内部,本身是一个js内置的功能、函数,使用时后面必须紧跟一个小括号(英文状态下),所写的警示内容,必须写在小括号内。
alert("天气变冷,多加衣服");
语法:
①书写方式:alert是一个功能函数,如果要执行一个函数,后面必须加小括号,alert弹出的内容必须写在小括号内部,如果是一段话文字,需要写在一对引号里,可以是单引号也可是双引号,不能一单一双。所有符号必须是英文状态下的。
alert(“天气变冷,多加衣服”); //引号是中文的 alert("天气变冷,多加衣服'); //引号一单一双 |
报错:未知的语法错误。
②分号的必要性:每一条语句后面必须加分号,如果不加会出现错误。
alert("我是1") alert("我是2") alert("我是3") |
如果代码正常换行,也不会出现错误。
alert("我是1")alert("我是2")alert("我是3") |
identifier 语法错误 非法的标识符
如果有分号,不会出现任何错误。
alert("我是1");alert("我是2");alert("我是3"); |
原因:浏览器加载页面,有解析器解析代码。js代码解析时,如果遇见分号,会认为这是一条语句的结尾,正常解析后面的代码,如果没有分号,解析器按照它的方式来解析换行就是一个语句的结尾,如果没有分号,认为这条语句没有结束,会出现解析错误。
上传的代码一般都是压缩过后,没有自动换行,也没有分号,会出现错误。
③代码执行顺序:js代码,如果没有特殊结构,都是从上往下从左往右依次加载。
④js对于语句之间的换行、空格、缩进不敏感。
alert("亲爱的农夫呀");alert("你丢的是这把金斧头?"); alert("还是这把银斧头");alert("农夫:都不是"); alert("亲爱的农夫呀"); alert("你丢的是这把金钥匙?"); |
没错,正常可以执行。
书写方法:为了提高代码可读性,尽量做到合理换行。
4、prompt语句
prompt也是js内置好的功能,弹出的是一个对话框,可以让用户输入内容。
语法:prompt后面紧跟一个小括号,有两个参数可以书写,参数之间用逗号隔开。
prompt("你今年多大啦","18"); |
第二个参数可以不写。
5、console控制台
一般前端人员喜欢用谷歌浏览器,浏览器有个强大功能,就是控制台。
控制台可以帮我们调错。
控制台可以帮我们罗列出页面里存在的所有错误。
指出错误所在的位置,错误的类型。
快捷键:F12。找到console面板。
控制台也可以直接输出一些语句。
可以利用一些代码在控制台显示语句。
输出语句:console.log();
console本身是js的一个内置对象,对象里面还有很多功能和方法,通过点语法可以调用这些功能。log就是其中的一种方法,本身是日志,console.log表示在控制台打印输出我们的内容。
console.log("我是在控制台输出的"); |
在语言核心学习部分:都是在这三条语句基础上实现的。
三、字面量
字面量(literal)是一种固定值的表示方法。也可以叫做常量。
比如:数字、字符串、数组、json对象等类型的数据都有自己的字面量表示法。
字面量就是字面上的意思,看见什么就能认出是什么
1、数字字面量
数字字面量指的是常用的数学意义上的数字的表示法。
alert(123);
书写时不需要添加任何特殊符号,直接写数字。
数字:整数、浮点数(小数)、特殊值。
①整数字面量
整数可以被表示成十进制(基数为10)、八进制(基数为8)以及十六进制(基数为16)。
十进制是最基本的数值字面量格式,可以直接在代码中输入。
八进制字面值必须带前导0、0O、0o 。八进制整数只能包括数字0-7。
十六进制的前缀是0x或0X。后面可以包含数字(0-9)和字母a~f或A~F。
在进行算术计算时,所有八进制和十六进制的数字都会被转换成十进制。
十进制直接书写数字即可,不需要加任何的前缀。
//console.log(100);
//console.log(12);
//console.log(-34);
八进制:必须有前缀,每一个位数值取值范围必须是0-7之间。
逢八进一。
//八进制
console.log(0110);
console.log(01);
console.log(010);
console.log(0100);
console.log(01000);
console.log(010000);
console.log(0100000);
console.log(0o77);
console.log(0o25);
八进制的每个位数不能超过7,如果超过了,假如前缀是0,它会强制转成十进制。
console.log(089);
如果是以0o/0O开头,超过7的范围,控制台会直接报错:语法错误,有非法字符。
console.log(0o89);
计算:034=8*3+1*4=28
十六进制:逢十六进一。每个位数的取值范围是0-9、a-f(A-F)。
console.log(0x2b); //2*16+1*11=43
console.log(0x5c); //5*16+1*12=92
console.log(0x56); //86
如果超过规定取值范围,不会转十进制,直接报错。
console.log(0x4g);
所有负的整数,只要在前面加-号就可以
console.log(-0x30); //-48
②浮点数字面量
书写:整数.小数
浮点数字面量有几种表示方法:
//浮点数字面量
console.log(3.1415926);
console.log(0.618);
console.log(.618);
console.log(42356.89);
console.log(0.4235689e5);
console.log(0.00000056);
console.log(0.56e-6);
浮点数没有进制的问题,所有的浮点数都是十进制下的数字。
重点记忆:幂的表示法。
③特殊值
有两个:无穷Infinity,NaN。
无穷:计算机计算能力有限,如果大于某一个临界点或者小于某一个临界点,计算机没法算出具体的数字,直接输出的是一个正无穷或负无穷。Infinity或者-Infinity。
//Infinity
console.log(Infinity);
console.log(-Infinity);
console.log(8.6e99489403003455);
console.log(-8.6e99489403003455);
NaN:not a number,不是一个数。你的这个数字已经没办法用正常的表示法表示法,不是一个正常意义的数字。其实还是一个数字字面量
//NaN
console.log(NaN);
console.log(0/0);
console.log(12/0);
2、字符串字面量
字符串就是人类说的话、词语。各种语言、数字、其他符号等等。
字符串字面值可以包含有零个或多个字符,由双引号对或单引号对儿包围。字符串被限定在同种引号之间;也即,必须是成对单引号或成对双引号。
console.log("我会说English,考试拿第1")
console.log(1);
console.log("1");
在字符串中可以使用一些特殊字符,比如
\n 换行
\t Tab制表
字符串中可以使用转义字符\,
\' 单引号
\” 双引号
\\ 反斜杠
console.log("恰\t似\n一江春水\n向东流");
console.log("他说:\"给点money\"");
console.log("输出\\");
四、变量
与字面量相对,字母量是固定值,不变的。变量里面的值是可以发生变化的。
变量(Variables),本身相当于一个容器,可以存储任意类型的数据。数字、字符串、布尔值、数组、变量、函数等等,都是数据。
限制:变量内部只能放一种数据,放入新数据,旧的就会被舍弃。
1、体验变量
举例来看一个实际变量的产生和引用的过程。
//定义
var abc;
//赋值
abc = 12;
//引用输出变量
console.log(abc);
使用变量时,使用的是里面的数据而不是变量的名字。
变量内部存储的数据并不是一成不变,可以发生变化。
//定义
var abc;
//赋值
abc = 12;
//重新赋值
abc = "haha";
//引用输出变量
console.log(abc);
2、变量的声明
变量的声明也叫作变量的定义,定义一个新的变量,表示可以往里面存储数据了。
变量必须先声明(关键字var),才能使用。试图访问一个没有声明的变量,将抛出ReferenceError错误。
变量如果不声明,不能直接使用。
声明需要用到个关键字,var,后面必须跟一个空格,空格之后才是自定义的变量的名称。
//声明必须有var 关键字
var a;
a = 12;
console.log(a);
console.log(b);
说明:变量必须先定义,才能使用,如果没有定义就使用,会抛出一个引用错误referenceError。变量不存在未定义。
变量名定义时需要遵循一些标识符命名规范。
变量的名称是标识符(identifiers),任何标识符的命名都需要遵守一定的规则。
第一个字符必须是一个字母、下划线(_)或一个美元符号($);
其他字符可以是字母、下划线、美元符号或数字。
因为JavaScript语言是区分大小写的,这里所指的字母可以是(大写的)“A”到字母“Z”和(小写的)“a”到“z”。并且不能是JavaScript的关键字和保留字。
关键字,就是有特定用途的小词语。关键字后面一定要有空格隔开。
保留字没有任何特定的用途,但是有可能在将来被用作关键字。
关键字:
break do instanceof typeof case else new var catch finally return void continue for switch while debugger* function this with default if throw delete in try
保留字:
abstract enum int short boolean export interface static byte extends long super char final native class
synchronized float package throws const goto private transient debugger implements protected volatile double
import public
//定义一些变量,遵循标识符命名规范
var a;
var _;
var $;
//var 5a;
var a123;
var O_O;
var TAT;
var _$A$_;
//var a*;
//var $%^;
//var for;
//var double;
3、变量的赋值
用 var 声明的未赋初值的变量,值会被设定为undefined,表示我的变量内部是未定义的,变量后面可以用来保存任何值。
//声明一个变量
var a;
console.log(a);
赋值需要用到一个符号:等号=,表示给变量赋值。
等号表示赋值,会将=右边的值,赋给=左边的变量。
a = 3;
赋值需要用到一个符号:等号=,表示给变量赋值。
等号表示赋值,会将=右边的值,赋给=左边的变量。
变量赋值时,=左边的变量值改变,=右边的值是不变的。左变右不变。右边的值可以是任意类型的数据,甚至是变量。
//变量赋值 左变右不变
var a = 3;
var b;
b = a + 2;
var c;
c = a;
a = c + 5;
console.log(a);//8
console.log(b);//5
console.log(c);//3
同时定义多个变量:变量只需要var一次,今后更改变量的值,无需重复var。多个变量之间用逗号隔开,最后一个变量后面加分号。
//定义多个变量
var a,b,c;
实际工作中,一般讲变量的定义和赋初值写在一起
//定义与赋初值一起写
var d = 3;
console.log(d);
4、变量声明提升
JavaScript 变量的另一特别之处是,你可以引用稍后声明的变量,而不会引发异常。这一概念称为变量声明提升(hoisting);JavaScript 变量感觉上是被“举起”或提升到了所有函数和语句之前。然而提升后的变量将返回 undefined 值,所以即使在使用或引用某个变量之后存在声明和初始化操作,仍将得到 undefined 值。
指的就是我们可以先引用变量,后定义,不会报错。
注意:变量提升,只提升定义(声明),不提升赋值。相当于引用的时候只定义,没赋值,输出undefined。
//先使用
console.log(a);
//再定义
var a=123;
//相当于
var a;
console.log(a);
a = 123;
五、数据类型
JavaScript中的值,无论是字面量还是变量,都有明确的类型。
简单数据类型5种
Number 数字类型
String 字符串类型
undefined undefined类型,变量未定义时的值,这个值自己是一种类型
Boolean 布尔类型,仅有两个值true 和 false,
null null类型,这个值自己是一种类型
复杂数据类型
object
数字类型:数字字面量、存储数字的变量。数据类型不再区分整数、浮点数、特殊值。
字符串类型:所有的字符串都是这个类型。
如何检测数据类型。
1、数据类型检测
可以使用一个叫做typeof的方法进行检测。
将要检测的数据放在typeof的小括号内即可检测类型。
console.log(typeof (123));
typeof作为一个关键字,可以不写小括号,后面跟一个空格,再写检测的数据,也可以进行检测
2、变量的数据类型
JavaScript的数据类型,是一种动态的数据类型。体现在变量上,变量的数据类型是随着内部存储数据的类型变化而变化的。
变量的数据类型,就是它内部存储的数据的数据类型。
var a = 2;
console.log(typeof a);
var a = 2;
console.log(a);
a = "haha";
console.log(a);
a = true;
console.log(typeof a);
数据类型之间也可以进行相互转化。
1、数字转字符串
加号的作用:
在涉及加法运算符(+)的数字和字符串表达式中,JavaScript 会把数字值转换为字符串。
在涉及其它运算符时,JavaScript语言不会把数字变为字符。
console.log(1 + 2);
console.log(1 + "2");
console.log("23" + "2");
可以将一个数字加一个空的字符串。
console.log(typeof(12 + ""))
2、字符串转数字
学习两个转换的方法:转整数、转浮点数。
有3 个函数可以把非数值转换为数值:Number()、parseInt()和parseFloat()。第一个函数,
即转型函数Number()可以用于任何数据类型,而后两个函数则专门用于把字符串转换成数值。
parseInt方法:
①可以对数字进行取整运算。
②将其他类型的转为数字类型。
console.log(parseInt(123.12));
注意进制问题:
另外,由于ECMAScript 3 和 5存在着分歧,调用 parseInt()函数时最好总是带上进制(radix) 参数,这个参数用于指定使用哪一种数制。如果指定了进制,那字符串前可以不带前缀“0”、“0o”、“0x”。
如果不指定第二个参数,ECMAScript 5默认为十进制。
var num1 = parseInt("10", 2); //2 (按二进制解析)
var num2 = parseInt("10", 8); //8 (按八进制解析)
var num3 = parseInt("10", 10); //10 (按十进制解析)
var num4 = parseInt("10", 16); //16 (按十六进制解析)
console.log(parseInt("189"));
console.log(parseInt("010"));
console.log(parseInt("010",8));
console.log(parseInt("10",8));
看一下不同的字符串转成的数字:
console.log(parseInt("12"));
console.log(parseInt("12.23"));
console.log(parseInt("12个人"));
console.log(parseInt("有12个人"));
console.log(parseInt("Infinity"));
console.log(parseInt("5.2e10"));
parseFloat:将字符串转为浮点数
console.log(parseFloat("12.23"));
console.log(parseFloat("12.23.34"));
console.log(parseFloat("12.23百分比"));
console.log(parseFloat("涨了12.23百分比"));
实例:想看一下用户通过对话框输入的数据是什么类型。字符串类型。
如果想参与数学运算,得转成数字。
//让用户输入年龄,看距离100岁还有多少年
var a = parseInt(prompt("你今年几岁了?"));
//计算,用100-你的年龄
var b = 100 - a;
console.log("距离100岁还有"+b+"年");
七、数学运算符
1、数学运算符
算术运算符使用数值(字面量或者变量)作为操作数并返回一个数值。标准的算术运算符就是加、减、乘、除、求余。
+ 加法运算符.
- 减法运算符.
/ 除法运算符.
* 乘法运算符.
% 取模运算符.取余运算。
除法里面如果是整除,不会出现余数,如果不能整除,会出现余数。
取余方法就是除法里面,得到不是商,而是那个余数。
被除数 / 除数 = 商 (剩余数)
var a = 20; var b = a % 6; console.log(b);
一个数取6的余数,结果只有6种情况,0-5.
运算顺序:先算乘除取余、再算加减,如果有小括号,先算小括号。
2、Math对象
Math对象实际上是一个js内置好的强大的数学对象,里面包含很多属性和方法,帮我们做一些数学运算。
Math.random(); 返回大于等于0小于1的一个随机数
Math.pow(num,power); 返回num的power次幂
Math.sqrt(num); 返回num的平方根
Math.PI 返回π的值
random本身是随机的意思,后面直接写小括号,内部不用写任何数字,没有参数。
console.log(Math.random());
求一个数的多少次方
console.log(Math.pow(2,8));
给一个数开平方,求平方根。
console.log(Math.sqrt(2)); console.log(Math.sqrt(3)); console.log(Math.sqrt(5));
圆周率是math对象里面的一个属性,后面不需要加括号。直接引用。
console.log(Math.PI);
1)计算下列算式,并将结果输出:
var num = 324 * (23 + 214) / (568 - 129) - 11 * (235 - 24); console.log(num);
2)住房公积金缴纳金额与工资两者的关系是:
住房公积金 = 税前工资 * 0.1 * 2 ;
编写程序,让用户输入税前工资,弹出对应的公积金数额。
//用户输入工资
var salary = parseFloat(prompt("请输入你的税前工资"));
//计算住房公积金
var gongjijin = salary * 0.1 * 2;
//输出用户要焦缴纳的住房公积金
alert("您需要缴"+gongjijin+"住房公积金");
3) 用JS计算下列算式,并将结果在弹出:
var num = Math.pow((23 + Math.pow(5,7)) / 45,2);
console.log(num);
4) 编写程序,提示用户输入圆锥的底面半径和高,然后弹出它的体积,计算圆锥体积的公式是:
体积V=1/3π半径2*高
//用户输入半径和高
var r = parseFloat(prompt("请输入圆锥的底面半径"));
var h = parseFloat(prompt("请输入圆锥的高度"));
//计算面积
var v = 1 / 3 *Math.PI * Math.pow(r,2) * h;
//输出
console.log("你输入的圆锥的面积是"+v);
5) 如果今天是星期二,那么1000天后是星期几?用户输入一个天数,计算这个天数后是星期几。
找规律
今天是星期2,7天之后是星期2
今天是星期2,14天之后是星期2
今天是星期2,21天之后是星期2
今天是星期2,22天之后是星期3
今天是星期2,24天之后是星期5
今天是星期2,27天之后是星期1
今天是星期2,28天之后是星期2
总结:7的倍数的天数之后,又是星期2.
不是七的倍数,用今天的星期数加上7的余数。如果超过了7,再去一次7的余数。
(1000 % 7 + 2) % 7
抽象为变量:
(num % 7 + day) % 7
//用户输入当天的星期数和天数
var day = parseInt(prompt("请输入今天是星期几"));
var num = parseInt(prompt("请输入一个天数"));
//运算
//var today = (num % 7 + day) % 7;
var today = (num + day) % 7;
alert(num+"天之后是星期"+today);
6) 用户输入一个三位数,弹出各个数位的和。
比如:
用户输入155,就弹出11
用户输入316,就弹出10
用户输入989,就弹出26
用户输入678,就弹出21
思路:
个位数:
155 % 10 = 5
十位数:想办法将十位数变为个位数。
parseInt(155 / 10) % 10 = 5
百位数:想办法让百位数变成个位数
parseInt(155 / 100) = 1
//输入一个三位数
var num = parseInt(prompt("请输入一个三位数的正整数"));
//拆分数字
var ge = num % 10;
var shi =parseInt( num / 10) % 10;
var bai = parseInt(num / 100);
var sum = ge + shi + bai;
//输出
alert("您输入的"+num+"的每个位数的和是"+sum);