【Web】JavaScript 语法入门

一、简介

动态性和交互性

1.由浏览器解释执行

2.常见的脚本语言：JavaScript和VBScript

P.S. Node.js 是使用JavaScript编写的服务器端框架。

二、 JavaScript脚本语言概述

ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM，document object model），描述处理网页内容的方法和接口
浏览器对象模型（BOM,browser object model），描述与浏览器进行交互的方法和接口

1.JavaScript是一种基于对象和事件驱动式的脚本语言。

2.JavaScript是一种嵌入HTML的脚本语言，它不需要编译，在客户端可以通过浏览器解释执行。

3.JavaScript的主要功能是：动态修改HTML页面内容；对浏览器事件作出响应；读写HTML元素；在数据被提交到服务器之前验证数据；检测用户的浏览器信息；控制cookies，包括创建和修改等

JavaScript和Java的关系

1.商业：JavaScript与Java名称上的近似，是当时NetScape为了营销考虑与SUN达成协议的结果。

2.使用：Java是面向对象的程序设计语言，即使是开发简单的程序，也必须从类定义开始。
JavaScript是基于对象的，本身提供了非常丰富的内部对象供设计人员使用。

3.执行方式：Java语言必须经过编译生成字节码，然后由JVM运行这些字节码。JavaScript是一种脚本语言，其源代码无需经过编译，由浏览器解释执行。

4.变量声明：Java是强类型变量语言，所有变量必须先经过声明才可以使用，所有变量都有其固定的数据类型。JavaScript是弱类型语言，其变量在使用前无需声明，而由解释器在运行时检查其数据类型。

三、 JavaScript导入

1.导入

<body>

/*Method1:使用javascript：前缀构建执行JavaScript代码的URL*/
  <a href="javascript:alert('运行JavaScript！');">运行JavaScript</a>

/*Method2:使用<script…/>元素来包含JavaScript代码*/
	<script type="text/javascript">
		alert("直接运行的JavaScript！");
	</script>

</body>

在XHTML中导入JavaScript


<script src=“test.js” type=“text/javascript”></script>

3.教材中的language语句段可省略


<script language = "JavaScript">
JavaScript语句段
</script>

4.其他说明

1）Javascript区分大小写

2）JavaScript中使用换行符作为一条语句的结束标志。

四、 Javascript数据类型

1.数值型数据

//Caution:十进制不要以0开始
//16进制 0x13
//八进制 014

2.Inifity

Infinity（无穷大，表示数值大于数值类型的最大值）和 –Infinity（负无穷，表示数值小于数值类型的最小值）。
Infinity和-infinity与其他数值进行运算时，整个算数表达式将变成另一个特殊的值NaN。但Infinity和-infinity可以进行比较运算，即Infinity等于Infinity，而-Infinity等于-Infinity

<script>
	//定义y为最小的数值
	var y = -1.79e3000; 


	alert(y);//"-infinity"


	alert(y + 3E3000);//"NaN"

	//定义a为Infinity
	a = Number.POSITIVE_INFINITY;
	//定义b为-Infinity
	b = Number.NEGATIVE_INFINITY;
	//使用警告对话框输出a+b的值
	alert(a + b);//"NaN"
                  //使用显式定义变量的方式定义变量d
	var d = 3e30000;
	//使用显式定义变量的方式定义变量e
	var e = 5e20000;
	//比较d是否等于e
	alert(d == e);//infinity = infinity
</script>

3.NaN(Not a Number)


<script>
i=5;
m=-1;
n=0;
alert(i/0);//+N除0，infinity
alert(m/0);//-N除0，-infinity
alert(n/0);//0除0，NaN

//NaN不会与任何数值相等，也就是NaN==NaN也会返回false，
//如果要判断某个变量是否是NaN，可以应用函数isNaN( )。

</script>

4.浮点数——精度问题

不要直接比较。

推荐使用差值比较-判断两个浮点数是否相等，可以计算两个浮点数的差，只要差小于一个足够小的数即可认为相等

5.字符串

JavaScript字符串的第一个字符索引为0。

五、变量

1.声明方法


/*显式定义：使用关键字“var”声明变量。*/

var v1;
var v1 = 3.1415;

/*隐式定义：不使用关键字“var”，直接使用赋值语句声明变量（不建议使用）。*/

v1 = 3.1415;

2.自动类型转换

让字符串变量和数值执行运算，到底是算术运算，还是字符串运算呢？

对于减号运算符，因为字符串不支持减法运算，所以系统自动将字符串转换成数值。
对于加法运算符，因为字符串可用加号作为连接运算符，所以系统自动将数值转化成字符串，并对两个字符串进行连接运算。

<script>
	//定义字符串变量
	var a = "3.145";
	//减号运算符：字符串不支持减法。自动将字符串转换成数值。
	var b = a - 2; //b=1.145
	//加法运算符：字符串连接符。
	var c = a + 2; //c=“3.1452”
	//输出b和c的值
	alert (b + "\n" + c);
</script>

3.变量作用域

全局变量
局部变量

1)没有代码块的概念

function(o)
{
	if (typeof o == "object") 
	{
		//定义变量j，变量j的作用范围是整个函数内，而不是if块内。
		var j = 5;
		for(var k = 0; k < 10; k++)
		{
			//因为JavaScript没有代码块范围
			//所以k的作用范围是整个函数内，而不是循环体内
			document.write(k);
		}
	}
//即使出了循环体，k的值依然存在
alert(k + "\n" + j);
}

2)局部变量undefined？

<script>
	//定义全局变量
	var scope = "全局变量";
	function test()
	{
		//因此全局变量被局部变量覆盖
		//而此时scope局部变量尚未赋值，故此处输出undefined
		document.writeln(scope + "<br />"); 
		//定义scope的局部变量，其作用范围为整个函数内
		var scope = "局部变量"; //若无此句，则两次输出均为“全局变量”
		//再次输出scope的值。
		document.writeln(scope + "<br />"); 
	}

	test();
</script>

4.其他运算符

1)不短路或

<script>
	
	var a = 5;
	var b = 10;
    var c = 10;
	//不短路或
	if (a > 4 | b++ > 10)
	alert(a + '\n' + b); //5 11
	//短路或，若左边一项成立，则不再执行右边一项
    if (a > 4 || c++ > 10)
		alert(a + '\n' + c);//5 10
</script>

2)逗号表达式

v1 = (b=5,c=6,d=57); //v1=57
v2 = 7,8,9;			 //v2=7

3)instanceof
instanceof 判断某个变量是否为指定类的实例。

Javascript中所有类都是Object的子类。

六、控制语句

1）循环语句for in
无需知道个数即可遍历所有属性

关键代码动手写一遍！！！

<!--for_in.html文件代码-->
<html>
<head>
<title>for...in语句使用示例</title>
<script language="JavaScript">
    function Student(Name,StuNum,Age)
   {
        this.name = Name;
        this.stunum = StuNum;
        this.age = Age;
    }
    function displayProp(obj)
   {
         var property;
        //使用for_in语句访问对象obj中的所有属性(property = name,stunum,age)
        for(property in obj)
             document.writeln(obj[property]+" ，");
             document.writeln("<br>");
	}
</script>
</head>
<body>
<script language="JavaScript">
    var Students=new Array();
    Students[0]=new Student("Mike","s001",20);
    Students[1]=new Student("Jenny","s002",21);
    Students[2]=new Student("Emma","s003",20);
</script>
<br>
<center>
<script language="javascript">
    var i=0;
    while(i<3){
	   displayProp(Students[i]);
	   i=i+1;
	}
</script>
</center>
</body>
</html>

2）with语句


//with（对象名）{
//语句段
//}
例：document.writerln(“hello<br>”);
        document.writerln(“world<br>”);
        document.writerln(“JavaScript<br>”);
可改写为：
with(document)
{
  writerln(“hello<br>”);
  writerln(“world<br>”);
  writerln(“JavaScript<br>”);
     }

可用于替换for in


function displayProp(obj){
	    var property;
        //使用with语句访问对象obj中的所有属性
		with(obj) {
			document.writeln(name+" ，");
			document.writeln(stunum+" ，");
			document.writeln(age);
            }
		   document.writeln("<br>");
	}

七、JavaScript函数

7.1 匿名(Anonymous)函数

//Demo1: new
<script>
	//定义匿名函数，并将函数赋给变量f
	var f = new Function('name', "document.writeln('Function定义的函数<br />');" + "document.writeln('你好' + name);");
	//通过变量调用匿名函数
	f('Neo');
</script>

//Demo2:funbtion

<script>
	var f = function(name)
	{
		document.writeln('匿名函数<br />');
		document.writeln('你好' + name);
	};
	f('Neo');
</script>

7.2 类和函数

Javascript函数的本质是一个类

	<script>
		//定义一个函数
		function test(name)
		{
			return "你好，" + name ;
		}
		//
		//直接调用函数
		var rval = test('Neo');
		//将函数作为类的构造函数
		var obj = new test('Neo');
		//alert(rval + "\n" + obj); 

	</script>

JavaScript是一种动态语言，允许随时为对象增加属性和方法，在直接为对象某个属性赋值时，可视为给对象增加属性。
关注 s1的subject属性：undefined！

<script>
	function Student(grade , subject)
	{
		//定义一个grade实例属性，
		//将grade形参的值赋值给该实例属性。
		this.grade = grade;
		//定义一个subject静态属性，
		//将subject形参的值赋值给该静态属性。
		Student.subject = subject;
	}
	s1 = new Student(5, 'Java');
	with(document)
	{
		writeln('s1的grade属性：' + s1.grade + "<br />");
		writeln('s1的subject属性：' + s1.subject + "<br />");
		writeln('Student的subject属性：' + Student.subject + "<br />");
	}


// s1的grade属性：5
// s1的subject属性：undefined
// Student的subject属性：Java


	//为s1对象的subject属性赋值，即为它增加一个subject属性
	s1.subject = 'Ruby';
        s1.name="Tom;"
	with(document)
	{
		writeln('<hr />为s1的subject属性赋值后<br />');
		writeln('s1的subject属性：' + s1.subject + "<br />");
                writeln('s1的name属性：' + s1.name + "<br />"); 
		writeln('Student的subject属性：' + Student.subject + "<br />");
	}


// 为s1的subject属性赋值后
// s1的subject属性：Ruby
// s1的name属性：Tom;
// Student的subject属性：Java
</script>

3)局部变量实例变量静态变量
同一个类只有一块静态属性内存.
每个对象有单独的一块内存。

局部变量：在函数中以普通方式声明的变量，包括以var或不加任何前缀声明的变量。局部变量只有在函数内部才可以被访问。
实例变量：在函数中义this前缀修饰的变量。实例变量属于单个对象，必须通过对象来访问。
静态变量：在函数中以函数名前缀修饰的变量。静态变量属于整个类，必须通过类（也就是函数）来访问。

敢于写空参数Undefined！！！

JavaScript会将没有传入实参的参数自动设为undefined

重点关注：

p1.national
p1.bb


	function Person(national, age)
	{
		//this修饰的属性为实例属性——一个对象一片内存
		this.age = age;
		//Person修饰的属性为静态属性——类，静态
		Person.national =national;    
		//以var定义的变量为局部变量——函数内部才可访问，类比私有变量
		var bb = 0;    
	}

		var p1 = new Person('中国' , 29);

OUTPUT：
创建第一个Person对象
p1的age属性为29
p1的national属性为undefined!!!
通过Person访问静态national属性为中国
p1的bb属性为undefined!!!

八、 JavaScript 对象和数组

8.1 数组

数组属于复合数据类型（复合数据类型包括对象，数组和函数）。

JavaScript数组的长度可以随意变化，总等于所有元素索引最大值+1(原因：数组下标从0开始)
访问数组元素不会产生数组越界，访问未赋值的数组元素时，该元素的值为undefined。

8.2 数组对象

JavaScript中可以通过内置对象Array来创建数组对象。

var Students=new Array()  //创建数组对象

8.3 对象的属性赋值

Javascript中的对象本质上是一个关联数组。
KEY-VALUE

方式一：	  student.name = "John"
          student.stunum = "12345 "
          student.age = 20

方式二：   student[0] = "John"
          student[1] = "12345 "
          student[2] = 20

方式三：   student[name] = "John"
          student[stunum] = "12345 "
          student[age] = 20

8.4 JavaScript的伪继承机制

prototype 原型
JavaScript的所有类都有一个prototype属性，在为Javascript类的prototype属性增加函数、属性时。即可视为对原有类的扩展。可以理解为：增加了prototype属性的类继承了原有的类--JavaScript的伪继承机制。

P.S.JavaScript中没有继承的概念

	//将walk方法增加到Person的prototype属性上
	Person.prototype.walk = function()
	{
		document.writeln(this.name + '正在慢慢溜达...<br />');
	}

8.5 JavaScript创建对象的三种方式



//1.使用关键字new创建对象
	var p1 = new Person('中国' , 29);

//2.使用Object创建即时对象

	//创建空对象
	var myObj = new Object();


//3.使用JSON语法创建对象
	var p={
    “name”:’neo’,
    “gender”:’male’
	}
	//JSON创建对象:最后一个属性定义后不再有英文逗号。

九、闭包

闭包的含义：就是在函数嵌套条件下，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕

强行延长了变量的生命周期


<script>
	//创建Person函数
	function Person()
	{
		//locVal是个局部变量，原本应该该函数结束后立即失效
		var locVal = '疯狂Java';
		this.info = function()
		{
			//此处会形成闭包
			document.writeln("locVal的值为：" + locVal);
			return locVal;
		}
	}
	var p = new Person();
	//调用p对象的info()方法
	var val = p.info();
	//输出val返回值，该返回值就是局部变量locVal。
	alert(val);
</script>

十、 JavaScript的事件处理

JavaScript具有事件驱动的特点。

事件就是用户对计算机所进行的相关操作，如鼠标的移动、鼠标键的点击等等。

事件驱动（Event Driver）就是鼠标或热键所引发的一系列动作。

事件以消息的形式由OS传递给浏览器，浏览器拥有BOM对象集合以及当前网页加载时所创建的DOM对象集合，根据一定的规则将这些消息与DOM或BOM对象对应起来。

10.1 JavaScript浏览器对象模型BOM(Browser Object)

就是指当用户打开浏览器时，浏览器中的JavaScript runtime engine将在内存中自动创建一组对象，用于对浏览器及HTML文档对象模型中数据的访问和操作。

document对象：是window对象的成员对象。这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分。

10.2HTML文档对象模型DOM(Document Object)

标签——>对应对象
对于网页中的每一个标签元素，都在内存中创建一个相应的内存对象。这些对象按照树型结构组织，这就是文档对象模型DOM。

10.3 事件处理方法(Event Handler)

对事件进行处理的函数称为事件处理程序（Event Handler）或事件处理方法。

事件处理的过程可以这样表示：发生事件 - 启动事件处理程序 - 事件处理程序作出反应。
其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。

posted @ 2017-11-29 21:31 Neo007 阅读(339) 评论(0) 编辑收藏举报

刷新页面返回顶部

Don't Panic

Talk is cheap,Show me the code

【Web】JavaScript 语法入门

一、简介

二、 JavaScript脚本语言概述

JavaScript和Java的关系

三、 JavaScript导入

四、 Javascript数据类型

五、变量

六、控制语句

七、JavaScript函数

7.1 匿名(Anonymous)函数

7.2 类和函数

八、 JavaScript 对象和数组

8.1 数组

8.2 数组对象

8.3 对象的属性赋值

8.4 JavaScript的伪继承机制

8.5 JavaScript创建对象的三种方式

九、闭包

十、 JavaScript的事件处理

10.1 JavaScript浏览器对象模型BOM(Browser Object)

10.2HTML文档对象模型DOM(Document Object)

10.3 事件处理方法(Event Handler)

公告

Don't Panic

Talk is cheap,Show me the code

【Web】JavaScript 语法入门

一、 简介

二、 JavaScript脚本语言概述

JavaScript和Java的关系

三、 JavaScript导入

四、 Javascript数据类型

五、 变量

六、 控制语句

七、JavaScript函数

7.1 匿名(Anonymous)函数

7.2 类和函数

八、 JavaScript 对象和数组

8.1 数组

8.2 数组对象

8.3 对象的属性赋值

8.4 JavaScript的伪继承机制

8.5 JavaScript创建对象的三种方式

九、 闭包

十、 JavaScript的事件处理

10.1 JavaScript浏览器对象模型BOM(Browser Object)

10.2HTML文档对象模型DOM(Document Object)

10.3 事件处理方法(Event Handler)

公告

一、简介

五、变量

六、控制语句

九、闭包