------- Windows Phone 7手机开发、.Net培训、期待与您交流! -------
(1)为什么要学习JavaScript
主要有三个原因:
客户端表单验证:客户端用户在填写表单页面时如果某项出现错误,包括未填或者格式错误,那么客户端要及时给出提示,这样就需要用到表单验证,减轻服务端的压力。
页面动态效果:可以编写影响鼠标单击事件的代码,创建动态页面特效,从而高效的控制页面内容,例如层的切换特效和树形菜单特效,它们可以再有限的页面空间里展现更多的内容,从而增加客户端的体验 ,进而使我们的网站更加有动感。
动态改变页面内容:实际工作中,通常需要动态的在页面中为表格添加一行,删除一行或者改变表格中的内容,这些功能经常在购物网站中使用,是用户可以方便的改变购物的数量。
(2)JavaScript组成
包括核心语法(ECMAScript),浏览器对象模型(BOM),文档对象模型(DOM)
①ECMAScript是一个描述,规定了脚本语言的所有属性,方法和对象的标准,因此在使用Web客户端脚本语言编码时一定要遵循ECMAScript标准。主要描述了以下内容:
语法,变量和数据类型,运算符,逻辑控制语句,关键字和保留字,对象
②浏览器对象模型(BOM),提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。通常可实现如下功能:
弹出新的浏览器窗口,移动或关闭浏览器窗口以及调整窗口的大小,在浏览器窗口中实现页面的前进和后退功能。
③文档对象模型(DOM),是HTML文档对象模型定义的一套标准方法,用来访问和操纵HTML文档。
(3)脚本的基本结构
JavaScript代码是用<script>标签嵌入HTML文档中的,可以将多个脚本嵌入到一个文档中,只需将每个脚本都封装在<script>标签中即可,浏览器遇到它时,将逐行读取内容,直到标签结束,如果有错误,就会显示警告,如果javascript语句没有错误,浏览器就会编译并且执行语句。
<script type="text/javascript">
<!--javascript语句--> 这里是注释标签
</script>
使用javascript脚本在页面上显示输出
例如:<head>
<title>输出Hello World</title>
<script type="text/javascript">
document.write("使用javascript脚本循环输出hello world")
for (var i = 0; i < 5; i++)
{ document.write("<h3>hello world</h3>") }
document.write("<h1>hello world</h1>")
</script>
</head>
(4)在网页中引用javascript的方式
javascript作为客户端程序,嵌入网页有以下三种方式:
使用<script>标签,使用外部javascript文件,直接在HTML标签中
使用<script>标签:它的位置并不是固定的,可以包含在head或者body中的任何地方。
外部javascript文件:是将javascript写入一个外部文件中,以*.js为后缀保存文件,然后把*.js文件指定给<script>标签中的“src”属性。
例如:<title>输出Hello World</title>
<script src="hello.js" type="text/javascript">
</script>外部引用hello.js文件 src属性表示指定外部javascript文件的路径。
直接在HTML标签中:有时需要在页面中加入很简短的javascript代码实现一个简单的页面效果。
例如:<input type="button" value="弹出消息框" οnclick="javascript:alert('欢迎你');" />
(5)JavaScript核心语法
①变量的声明和赋值
JavaScript是一种弱类型预言,没有明确的数据类型,也就是说,在声明变量时,不需要指定数据类型,变量的类型由赋给变量的值决定。
语法:var 合法的变量名;
var是声明变量所使用的关键字,“合法的变量名”是遵循javascript中变量命名规则的变量名,javascript中的变量名与java变量的命名规则相同,可以再声明变量的同时为变量赋值,这叫做变量的初始化。
例如:var width=20;
var x,y,z=10;
需要注意的是:javascript中区分大小写,所以大小写不同的变量名表示不同的变量,另外,由于javascript是一种弱类型语言,所以允许不声明变量而直接使用,熊将会自动声明该变量。例如:x=99; 这里没有声明变量x,直接使用。不建议这样使用。
②数据类型
由于javascript是弱类型语言,声明变量时可以不声明数据类型,而是由变量决定,有时也需要检测变量的数据类型用typeof运算符
undefind(未定义类型) null(空类型) number(数值类型)即可表示32位的整数,也可表示64位的浮点数 string(字符串类型) boolean(布尔类型)
typeof运算符用来判断一个值或变量究竟属于哪种数据类型
例如:<script type="text/javascript">
var width,height=10,name="rose";
var arrrlist=new Date();
document.write(typeof(width)+"<br>");
document.write(typeof(height)+"<br>");
document.write(typeof(name)+"<br>");
document.write(typeof(arrlist));
</script>
③运算符号
包括算术运算符 比较运算符 逻辑运算符 赋值运算符
④逻辑控制语句
if结构 switch结构 for循环 while循环 do while循环
不同的是:switch中case语句可以是字符串,
例如:
<script type="text/javascript">
var weekday="星期一";
switch(weekday)
case "星期一":
alert("新的一周又开始了");
break;
</script>
⑤注释 单行注释以//开始,以行末结束 多行注释以/*开始*/结束
⑥常用的输入输出
alert("提示信息")
例如: <script type="text/javascript">
var username = "rose";
var string1 = "我的名字叫 rose";
alert("Hello World");
alert("我的名字叫" + username);
alert(string1);
</script>
提示(prompt)
prompt()方法的基本语法格式为:prompt("提示信息","输入框的默认信息")
例如:var color=prompt("请输入你喜欢的颜色","红色")
可以省略第二个参数
例如:var color=prompt("请输入你喜欢的颜色",",")
<script type="text/javascript">
document.write("hello world");
var j = prompt("请输入连续输出标题3的次数", ",");
for (var i = 0; i < j; i++) {
document.write("<h3>hello world</h3>");
}
alert("共连续输出标题:"+j+"次");
</script>
⑦语法约定
大小写的区分:
javascript的关键字,例如for和if,永远都是小写
内置对象,例如Math和Date是以大写字母开头的
DOM对象的名称通常是小写,但其方法经常是多个单词的大小写混合,通常第一个字母是小写,之后单词的首字母是大写,例如:getElemengByld和genDay
变量,对象和函数的名称:
它们的名称可以包括大写字母,小写字母,数字,下划线和美元符号$,但名字必须以字母,下划线或美元符号$开头。
分号:
允许开发者自行决定是否以分号结束一行代码,如果没有分号,就把行代码的结尾看做是该语句的结尾,不推荐使用。