写在前面
本文是对 javascript 的部分说明和提点,不展开特别全面的论述 ,所以 需要 参考文档 (点击这儿下载)的帮助
本文主要讲述javascript的语法与HMTL结合的方法 , 第二篇讲述javascript对象(包含javascript基本对象、bom对象和dom对象)、第三篇幅附上 javascript案例(包括与HMTL表单的验证案例、动态时间案例、下拉列表左右选择、鼠标点击效果、省市联动等)[链接点不动,说明文章还没有写]
javascript不同于java等语言,出现错误也很少提示,所以应该书写认真。
一、javascript(js)是什么
是基于对象和事件驱动的语言,
- 基于对象:提供很对对象,直接拿来用,像String对象,可以直接拿来使用其中的一些方法,如字符串分割等
- 事件驱动: 网页动态效果
- 客户端: 浏览器中
javascript和java没有任何关系,就像 雷锋和雷峰塔,只是名字一样而已。
javascript 的组成:
- ECMAScript : ECMA 组织机构 规定的 js语法
- BOM : (broswer object model )浏览器对象模型
- DOM : (document object model)文档对象模型
二、javascript 与 HTML 的结合
第一种方法:
在HTML网页中 用 <script></script>
直接编写js代码
<html >
<head></head>
<body>
HTML 代码
</body>
<script type="text/javascript">
js代码
</script>
</html>
第二种方法:
在外部创建一个.js 的文件,里面直接编写js 代码 。 HTML网页直接用<script></script>
将 .js文件引进来
<html >
<head></head>
<body>
HTML 代码
</body>
<script type="text/javascript" src="此处是 .js 文件的路径">
</script>
</html>
NOTE : <script></script>
可以放在HTML 中的任意位置,如放在<head>
中, <body>
中 ,但是最好放在 </body>
的后面,因为HMTL是从上向下解析,如果 js 代码放在前面,可能 某些需求会变的难以实现 。
另外,<script></script>
中的type="text/javascript"
属性对于现代浏览器来说可以省略。
三、javascript 语法简单说明
该语法详细部分请参考 W3S 手册
文中该语法部分在W3CSchool 参考文档中的 正文标题javascript—–课程表——javascript——–js教程 部分
(一)、原始类型 和 声明变量
无论声明何种类型,全部都用关键字 var
五种原始类型;
- String : var str = " abc " ;
- number :var n = 123.25 / 123 / 123e5 ;
- boolean :var flag = true / false
- null : var a = null ;
- undifined :var aa ;
可以用 new
对象来声明变量,如 :var n = new Num() ;
、var date = new Date () ;
(二)、三大语句
以下语句在javascript中同样适用:
if...else.. if ...else if ...else... for (){...........} while(){.........} do{.......}while() switch(a) { //a可以是字符串,区别于java,不过java中jdk1.7 开始支持了 case 1: break; case 1: break; default: ...... }
(三)、运算符
不做太多详述,查 W3S 手册 , 这里只做几点不同的说明:
- javascript中不区分整数和小数,比如: 123 / 1000 的结果是0.123, 而不是0 。
- 字符串在相加时,是做字符串的链接 ; 相减时是做运算 。 比如 : var str =" 123 "
, str+1
的结果是 1231 , 而 str-1
的结果是 122 。
- == 比较的是值,===比较的是值和类型
(四)、数组
数组的定义:
- var arr = [1,"hello",true]
、 var arr = [1,"hello",true]
- 使用Array对象(后面详述) var arr1 = new Array(5);
arr1[0] = "1";
- 使用Array对象(后面详述) var arr2 = new Array(3,4,5);
需要说明的是 数组可以存放不同类型的数据
(五)、函数
关键字 function
:
- function 方法名(参数值) { 方法体 }
- 匿名函数fuction (参数值) { 方法体 }
(通常只用一次,不希望再被调用,有些大型项目,给方法起名字确实是个头疼活)
- 动态函数(用的很少) var add = new Function("参数列表","方法体和返回值");
javascript中的函数通常是作为HMTL的事件驱动函数,在HTML网页中定义一个按钮,触发的函数就写在javascript中: 比较典型的用法:
<html>
<head></head>
<body>
//定义一个按钮
<button onclick="myFunction()" >
点击这里
</buttion>
</body>
<script type="text/javascript">
//定义事件函数
function myFunction(){
alert("Hello World");//弹出对话框
}
</script>
</html>
NOTE: javascript中没有函数重载, 如果有多个函数重载了,那么只执行最后一个函数。 其他不执行的重载函数的参数值在传递过程中保存到arguments 数组中。 如果有必要,可以直接对 arguments数组进行长度(参数个数)判断,定位是那个重载函数,然后进行取数组值等操作。
(六)、注释
同java ; 单行 用 //
; 多行用 /*.....*/
(七)全局变量和局部变量
全局变量: 在
<script></script>
内定义的变量,在什么地方都可以使用,甚至在另一个<script></script>
中也可以使用局部变量:只能在局部使用,如: 方法函数中定义的变量,只能在函数体中使用。
在IE8以上版本中,按F12 , 能看到关于变量作用域的提示的错误,算是一个调试工具吧 。
如:提示如下错误
-SCRIPT5009: “aa”未定义
15-js的局部变量.html, 行20 字符3
(八)、几个全局函数说明
这儿有几个函数,由于不属于任何的一个对象(开始说过,js是基于对象的,依托对象,js会用很多丰富的函数使用),这些函数直接写名字,不需要写成对象名.函数名()
的形式。 (关于其他重要丰富函数,将会在javascript对象 中说明)
- eval ( ) : 执行js代码
var str="alert('aaaa') ;
eval (str); // 弹出框,内容是aaaa。 而非 alert( 'aaaa' );
- encodeURI() :对字符进行编码 ; decodeURI() :对字符进行解码
//编码
var str1 = "中文aaa46";
var encode = encodeURI(str1);
document.write(encode); //输出 %E4%B8%AD%E6%96%87aaa46
//解码
var decode1 = decodeURI(encode);
document.write(decode1); //输出 中文aaa46
isNaN() : 判断当前字符串是否是数字
如果是数字,返回false ;如果不是数字,返回true
parseInt():类型转换,转换成int类型