JavaScript简介与基础语法

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变量

<
4000
h3>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。