日期:2014-05-17  浏览次数:20792 次

韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
因为js是由浏览器来解释执行的,因此这里有一个问题,不同类型的浏览器可能对js的支持不一样。

js运行原理
以js嵌入到html为例说明:
①本地运行

②远程访问运行


万维网(www)

万维网(www)综合图



js开发工具
如何选择开发工具:
我们选择用记事本,大家对javascript有一定了解后,我们再使用高级开发工具(vs,eclipse)。
这是为什么呢?
1.更深刻的理解javascript技术,培养代码感。
2.有利于公司面试。

多查询javascript帮助文档,学会查文档
1.w3school.chm
2.javascript.chm


js语言的特点
javascript语言是简单的
javascript是基于对象和事件驱动的(动态的)
它可以直接对用户或客户输入做出响应,无须经过WEB服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标,移动窗口,选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
javascript是跨平台的
javascript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持javascript的浏览器就可以正确执行。

js语言的特点
1.javascript是脚本编程语言
2.javascript是解释执行的
3.javascript可以对客户端编程,也可以对服务器编程(较少)

javascript vs jscript ——简单了解
javascript和jscript
①jscript是微软开发的,而javascript则是网景和sun合作开发的
②在网景开发livescript(javascript前身)时,微软就意识到这个脚本语言会很火,于是找到网景表示喜欢合作开发livescript,但是网景公司最终选择和微软的对头sun公司合作开发livescript,并更名为javascript。
③微软一气之下,开发了针对ie的脚本语言,并命名为jscript。在当时的这两种脚本语言中语法是大相径庭,给当时的程序员带来很大的烦恼,后来w3c出面了,w3c统一标准(ECMAScript)所以现在的这两种脚本语言的语法可以说90%以上是相同的。
④在一定程度上,你可以认为jscript和javascript。
⑤在网上你搜索javascript帮助手册,完后打开一看是jscript帮助手册,就不足为怪了。

第一个案例,在网页弹出一个对话框,显示“hello world”
<html>
	<head>
		<!--JS 代码一般是放在head标签间,但实际上也可以在别的位置-->
		<script language="javascript">
			window.alert("hello!");
		</script>
	</head>
	<body></body>
</html>

问题:
(1)js位置
js位置可以随意
(2)js必须用
<script language="javascript">
……
<script/>
包起来
注意:如果没有使用<script>包起来,则浏览器会将其视为普通文本
(3)在一个html文件中(jsp/php/asp)可以出现多对<script>片段,浏览器会按照先后顺序依次执行。

工欲善其事必先利其器
为了能够运行你的程序,你要安装一个浏览器(ie,firefox,chrome等均可)

js的运行原理
请参考前面的js运行原理图

案例2
hello world程序改进
对hello world程序加以改进,让它成为一个简单的加法运算程序

①如何定义变量
②如何运算
<html>
	<head>
		<script language="javascript">
			//js中变量的定义(在js中变量用var表示,不管实际类型。)
			var num1=456;
			var num2=89;
			var result=num1+num2;
			window.alert('结果是'+result);
		</script>
	</head>
	<body></body>
</html>

为什么需要变量
不论是使用哪种语言编写程序,变量都是其程序的基本组成单位。js是弱数据类型的语言,在定义变量时,不需要指明该变量的类型(由js引擎来决定)
var name="shunping"; //name是字符串
var kk=2 //kk是数
var yy // yy是undefined

如果name=234; //这时name自动变成数

不声明变量直接使用
x-345; //亦可

js的变量的类型究竟怎样决定
(1)js是弱数据类型语言
即:在定义变量的时候,统一使用var表示,甚至可以去掉var这个关键字
(2)js中的变量的数据类型是由js引擎决定

js基本语法
javascript中的标识符
标识符是指javascript中定义的符号,例如,变量名,函数名,数组名等。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成,但标识符不能以数字开头,不能是javascript中的保留关键字。

合法的标识符举例:indentifier、username、user_name、_userName、$username
非法的标识符举例:int、98.3、Hello World
(1)javascript严格区分大小写computer和Computer是两个完全不同的符号
(2)javascript程序代码的格式
每条功能执行语句的最后必须用分号(;)结束,每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。
(3)块语句使用{}来表示
(4)javascript程序的注释
/*...*/中可以嵌套 "//"注释,但不能嵌套"/*...*/"。

javascript的调试困难,不是编译型的语言。

js的命名规范(变量/函数)
(1)使用大小写字母,数字,_,$可以命名
(2)不能以数字开头
(3)不能使用js的关