JavaScript基础
1JavaScript简介
1.1JavaScript的诞生
JavaScript诞生于1995年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言,最初名字叫做Mocha,1995年9月改为LiveScript。12月,Netscape公司与Sun公司(Java语言的发明者)达成协议,后者允许将这种语言叫做JavaScript。这样一来,Netscape公司可以借助Java语言的声势。
1996年3月,Netscape公司的浏览器Navigator2.0浏览器正式内置了JavaScript脚本语言.此后其他主流浏览器逐渐开始支持JavaScript。
1.2JavaScript版本
· 1997年7月,ECMAScript 1.0发布。
· 1998年6月,ECMAScript 2.0版发布。
· 1999年12月,ECMAScript 3.0版发布。
· 2007年10月,ECMAScript 4.0版草案想要提交ECMA组织,但由于4.0版的目标过于激进,改动太大,并且微软,谷歌等大公司极力反对;一直到2008年7月ECMA开会决定,中止ECMAScript 4.0的开发(即废除了这个版本)
· 2009年12月,ECMAScript 5.0版正式发布
· 2011年6月,ECMAScript 5.1版发布
· 2015年6月,ECMAScript 6正式发布,并且更名为“ECMAScript 2015”。
1.3JavaScript组成
ECMAScript、Bom、Dom三部分组成。
2JavaScript基本语法
2.1 <script>标签
1.script标签可以写在html文档中任意位置,一般写在head中或body末尾;
2.<script src=””></script> 中的src属性为外链,当script标签中有src属性时,标签内不能写代码,会被直接忽略;
3.属性 type=”text/javascript”。
2.2 var变量
2.2.1变量的定义
变量的定义:储存数据的容器。如一杯水,数据是水,变量为水杯。
声明格式 var 变量名 var myScore = 100; 其中,var为关键字,myScore为变量,100为数据,=为赋值符号。
2.2.2变量的命名规范
1.变量名必须由数字、字母、下划线_和美元符$组成;
2.第一个字符不能为数字;
3.不能使用关键字或保留字;
4.变量命名最好做到见名知意;
5.命名区分大小写,但建议使用这个小功能;
6.使用驼峰命名原则,myStudentScore,多个单词组成,从第二个单词开始首字母大写。
JavaScript书写规范:
1保持缩进;
2.每一句结尾用分号。
2.3数据类型
2.3.1基本数据类型
2.3.1.1 Number:数字
1 toFixed(num): 在数字后面调用,num为小数位,有四舍五入的功能,得到一个字符串。
2 parseInt(num)取整数,非四舍五入。
3 parseFloat()取小数点后一位。
2.3.1.2 String字符串
用引号(单/双引号)括起来的内容。 var myName =‘laoxie’;
2.3.1.3 Boolean布尔值
有且只有两个值,true / false。
2.3.2引用数据类型
2.3.2.1 Array:数组
2.3.2.2 Object:对象
2.3.3特殊数据类型
2.3.3.1 NaN
Not a Number,数学运算并无法得到数字时,会返回NaN,是一个特殊的值。
2.3.3.2 Null 空值
Null有且只有一个值,即特殊值null。表示一个空对象引用,用typeof操作符检测Null会返回Object。
2.3.3.3 Undefined
Undefined有且只有一个值,即undefined,当变量只声明不赋值时,默认得到undefined。
2.3.4 数据类型判断
typeof ,例如 typeof‘啦啦’=>string。可以用alert(typeof(number));在浏览器中弹窗显示数据类型。
2.3.5数据类型的转换
值(a) |
转换为 |
|
|
|
|
|
字符串String(a) |
数字Number(a) |
布尔值Boolean(a) |
undefined |
=> |
‘undefined’ |
NaN |
false |
null |
=> |
‘null’ |
0 |
false |
true |
=> |
‘true’ |
1 |
|
false |
=> |
‘false’ |
0 |
|
”“ |
=> |
|
0 |
false |
“1.2” |
=> |
|
1.2 |
true |
“one” |
=> |
|
NaN |
true |
0 |
=> |
“0” |
|
false |
-0 |
=> |
“0” |
|
false |
NaN |
=> |
“NaN” |
|
false |
Infinity |
=> |
“Infinity” |
|
true |
-Infinity |
=> |
“-Infinity” |
|
true |
1 |
=> |
“1” |
|
true |
var result = String(parseInt(num1%5)); 可直接将运算结果转换为字符串,在alert中可以直接用+来字符串拼接,而非将若干数据相加。
2.4运算
2.4.1算术运算
+加 、-减、*乘、/除、%取模(取余)
var num1 = 20;
var num2 = 10;
var result = num1 + num2;
alert(‘运算结果为:’ + result);
var result5 = num1 %5;
alert(‘运算结果为:’ + result5);
2.4.2 +字符串拼接
在两个或以上的数据用‘+’时,若其中一个为数字字符串,那么系统会进行字符串拼接,其他的算术运算不会出现这种问题。
2.4.3 赋值操作
‘=’为赋值符号,‘==’为等号,‘===’为恒等于。
var num = 10 ;
var num = num + 5; / num += 5 ;
2.4.4 关系运算(返回布尔值)
==(等于), !=(不等于)
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)
===、恒等于/全等于,比较的时候要求值和类型都相等(不会进行类型隐式转换)
!==、不全等于
关系运算符的比较规则:
1. 数字和数字比较,直接比较大小;
2. 数字和字符串比较, 字符串转换为数字后再比较;
3. 字符串和字符串比较, 进行字符的ASCII码值比较;
2.4.5逻辑运算
逻辑且、与
|| 逻辑或
!逻辑非
if( (year % 4 === 0 && year %100 !== 0) || (year % 400 === 0) ){
alert(闰年);
}else{
alert(平年);
}
2.5 输出
2.5.1 alert()
为浏览器弹窗输出
2.5.2 document.write()
将结果输出到body中
2.5.3 console.log()
在控制台显示输出结果
3 案例与作业分析
3.1 在input中输入数字进行运算
1.获取html中输入的值
分两步:1.通过var num = document.getElementById(id名); 将input赋予给变量num;2.在function jisuan(){
var _num = num.value;
}
实现点击后再获取到input中输入的值(非标签)。
2.实现点击按钮再实现计算功能
通过function jisuan(){} 与 <button onclick=”jisuan()”></button>,来实现点击按钮获取到输入的数据后,再进行计算。
说明:
需要注意的是,var _num = num.value; 一定要在function中,如果在function上面,则无法获取到输入到input的数据。
3.2猜数字游戏
Math.random() 会生成0-1中的随机数,不包括1;
通过 var number = parseInt( Math.random() * 100 + 1);可以随机生成1-100随机数,包括1和100。