第一、Javascript核心基础语法

 

第一章  Javascript核心基础语法

 

一、 为什么要使用JavaScript ：

1.  服务器端动态网页最大缺陷：每次请求都要到服务器进行，加重服务器的负担；

2.  提高用户体验度，增加交互性。

 

二、 JavaScript和 JAVA 的区别：

1.  JAVA从编码到运行经过：编译、类装载、字节码校验、解释器 ---> 运行。即需要编译 ---> 解释 ---> 运行。

2.  JavaScript是一种解释型语言，代码存在于 HTML 网页中（或者外部连接），不需要编译即可以执行。解释特点：一行一行进行解释、执行。

3.  更多区别不再赘述。

 

三、 JavaScript的前景： HTML5+JavaScript

 

四、 JavaScript技术体系：

1.  JavaScript核心语言定义。数据类型、常量、变量、运算符、语句等。

2.  原生对象和内置对象。

3.  BOM（浏览器对象模型）

4.  DOM（文档对象模型）

5.  事件模型

 

五、 JavaScript添加到 XHTML 文档中

1.  内嵌式：

1)  <script type="text/javascript">JS代码 </script>

2)  <noscript>当禁用了 JS 时，这行文字显示在页面上 </noscript>

3)  脚本隐藏：<script type="text/javascript"><!--JS 代码 --></script> ，当前浏览器如果不支持脚本，运行到 HTML 注释时进行跳过不显示信息；当浏览器支持 JS 脚本，运行到 script 标签将 HTML 解释器转换为 JS 解释器，忽略 HTML 注释，并运行脚本。

2.  外部链接<script type="text/javascript" src=""></script> 。当 type 限制了脚本类型，外联脚本扩展名无所谓。

3.  脚本放在事件属性中：<input type="button" onclick="alert('test')" value=" 点我 " />

4.  伪URL 方式： <a href="javascript:alert('test2')"> 点我 </a>

 

六、 JavaScript变量、常量

1. JavaScript是弱类型语言，定义变量时无需明确数据类型声明，而且变量并不一定要初始化。

2. 变量（空间现分配）。 var a;a=5(Number 类型 );a="string"(string 类型 )

3. 常量： const a=5; 这里如果没有初始化，类型就为 undefined

 

七、 JavaScript数据类型

（一） 原始数据类型 5 种：

1.  Undefined类型：

没有被赋过值即未定义类型（没有分配空间）

如：a--->  XX  当 a 为 undefined 时，空间没有分配

 

2.  Null类型

空间已分配，但对象为空（引用数据类型）

如：a-->  null   已分配，对象为空。

请看下列代码：

var num=null;

alert(typeof num);

返回object 类型 null 被认为是对象的占位符

 

3.  Boolean

特别现象：(Chrome JavaScript 控制台 )

 

再看看其他情况：

""==false;

evaluating...

true

0==false;

evaluating...

true

总结（数据类型自动进行了转换）：直接用== 判断 null/undefined 时，永远返回 false ，据说是设计 JavaScript 时规定的。。。

在if 条件中使用：

①　 至少有一个字符的字符串、非0 数字或对象，返回 true

②　 空字符串、0 、 null 、 undefined 返回 false 。

 

4.  Number类型

①　 可以表示32 为的整数，也可以表示 64 位的浮点数。

 

②　 Number类型的外边界及无穷（无穷不能参与计算）：

Number.MAX_VALUE*100;

evaluating...

Infinity

③　 特殊值：NaN （ not a number ）函数： isNaN()

NaN不能用于算术计算，而且与自身不相等

NaN==NaN;

evaluating...

false

0/0;

evaluating...

NaN

1.0/0;

evaluating...

Infinity

4/0;

evaluating...

Infinity

isNaN("dddss22");

evaluating...

true

isNaN("122");

evaluating...

false

而JAVA 中，当任何实型除以 0 ，都会抛出数学异常，浮点数除外： 1.0/0 -->Infinity

 

5.  String类型

JavaScript没有字符类型，所以声明字符串可以用双引号或者单引号

 

6.  数据类型转换

①　 自动转换：

"2"+1;

evaluating...

21

"2"-1;

evaluating...

1

②　 转换数字的方法：parseInt() parseFloat()  只能对 string 类型转换，其他类型返回 NaN

parseInt("2dd");

evaluating...

2

parseInt("d2dd");

evaluating...

NaN

parseInt(true);

evaluating...

NaN

parseInt("1.5dd")

evaluating...

1

parseFloat("1.5dd")

evaluating...

1.5

 

练习：

a.  Select标签中用 JavaScript 写出 1900--2000 的 option

 

	<script type="text/javascript">
        	for(i=2000;i>=1900;i--){
document.write("<option value='"+i+"'>"+i+"</option>");
}
        </script>

 

 

b.  JavaScript写出九九乘法表

 

两个FOR循环

<table border="1">
	<tr>
  <script type="text/javascript">
        	for(i=1;i<=9;i++){
				for(j=1;j<=9;j++){
					document.write("<td>"+j+"*"+i+"="+j*i+"</td>");
					if(j==i){
						for(k=0;k<9-j;k++){
							document.write("<td></td>");
						}
						document.write("</tr>");
						break;
					}
				}
			}
  </script>
</table>

 

一个FOR循环

 

<table border="1">
	<tr>
  <script type="text/javascript">
        	for(i=1,j=1;i<=9;j++){
					document.write("<td>"+j+"*"+i+"="+j*i+"</td>");
					if(j==i){
						j=0;
						i++;
						document.write("</tr>");
					}
			}
  </script>
</table>

 

 

 

（二） 引用数据类型 -  对象

 

1.  对象分为：预定义对象和自定义对象；

预定义对象：

①　 原生对象：如Object,Function,Array 等等

②　 内置对象：Global Math

③　 宿主对象：DOM BOM

 

 

2.  概述：

①　 Object： JS 中所有对象的基“类”。属性： constructor 、 prototype

 

②　 原始类型包装器：Boolean 、 Number 、 String 。

String.length 属性（ JAVA 中 String 的 length() 是方法）

String.slice() <==>JAVA String.subString();

下面这句代码进行了类型转换：

 

 

num = "ABCD";
alert(num.slice(1,3));

 

 

③　 Array:

1)  数组的初始化：arr=new Array();arr=new Array(5);arr=[1,"abcd",true];

2)  特点：

a.  自增长

b.  每个数组元素类型可以不同，因为JS 是弱类型语言，每个元素可以是任 意的数据类型

c.  当数组某几个元素没有初始化，返回undefined 。如：

arr = new Array();arr[0]=true;arr[7] = 2;alert(arr[5]);  ==>返回 undefined

 

④　 Date:getHours();getMinutes();getSeconds();

需要注意的是：month 默认从 0 开始，即现实中的 5 月份， getMonth() 返回 4

 

⑤　 Global:需要记忆的方法有： parseInt parseFloat eval 等等

Eval：调用解释器解释、执行参数内的字符串；其重要性相对于： JAVA 中的反射。

事例：业务需要从服务器端传递一个数组到客户端：{1,2,3,4,5};

首先在服务器中将数组写为一个字符串："[1,2,3,4,5]"  并传递到前台

在JS 中我们获取到这个字符串可以如下构造这个数组：

eval("var arr=[1,2,3,4,5]");alert(arr);

 

⑥　 函数

a.  关键字function +  函数名  +  形参列表  +  方法体

b.  因为JS 是弱类型语言，所以函数定义返回类型没有必要。

c.  几个特别的例子：

1.  调用有参数列表的函数，但是没有传递参数，返回undefined ，因为形参 没有初始化， undefined 计算还是 undefined

function a(b,c){return b+c;} alert(a());

 

2.  调用无参数列表的函数，但是传递了参数；函数有隐式的arguments 数组 获取参数

function a(){return arguments[0]+arguments[1];} alert(a(1,2));

 

3. 

 

function a(){return arguments[0]+arguments[1];} 
var result=a; //复制指向这个方法体的指针
alert(result);//返回：function a(){return arguments[0]+arguments[1];} 
alert(result(1,9));

 

 

 

4. 匿名函数： var a=function(){};