JavaScript简介与基础语法

时间:2022-08-26 16:24:47

JavaScript基础

1JavaScript简介


1.1JavaScript的诞生

JavaScript诞生于1995年。由Netscape网景公司的程序员Brendan Eich(布兰登)Sun公司联手开发一门脚本语言,最初名字叫做Mocha19959月改为LiveScript12月,Netscape公司与Sun公司(Java语言的发明者)达成协议,后者允许将这种语言叫做JavaScript。这样一来,Netscape公司可以借助Java语言的声势。

19963月,Netscape公司的浏览器Navigator2.0浏览器正式内置了JavaScript脚本语言.此后其他主流浏览器逐渐开始支持JavaScript

1.2JavaScript版本

· 19977月,ECMAScript 1.0发布。

· 19986月,ECMAScript 2.0版发布。

· 199912月,ECMAScript 3.0版发布。

· 200710月,ECMAScript 4.0版草案想要提交ECMA组织,但由于4.0版的目标过于激进,改动太大,并且微软,谷歌等大公司极力反对;一直到20087ECMA开会决定,中止ECMAScript 4.0的开发(即废除了这个版本)

· 200912月,ECMAScript 5.0版正式发布

· 20116月,ECMAScript 5.1版发布

· 20156月,ECMAScript 6正式发布,并且更名为“ECMAScript 2015”

1.3JavaScript组成

ECMAScriptBomDom三部分组成。

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赋予给变量num2.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随机数,包括1100