JavaScript语言基础
1.概述
1.1 概念
JavaScript是一种基于对象和事件驱动具有安全性能的解释型脚本语言。在Web应用中得到了非常广泛的应用。它不需要进行编译，而是直接嵌入在HTTP页面中，把静态页面转变成运行用户交互并响应应用事件的动态页面。
1.2 Java与JavaScript的分别
Java与JavaScript除了名字里都有java，语法有一点相似之处，就完全不相干了。主要区别有：
1.基于对象和面向对象
JavaScript是一种面向对象和事件驱动的脚本语言，而Java是真正的面对对象的语言。
2．解释和编译
JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需要编译，而是将文本格式字符代码发送给客户端由浏览器解释执行；而Java的源代码在传递到客户端执行之前，必须经过编译才可执行。
3.弱变量和强变量
JavaScript采用弱变量，即在变量使用前不需要声明，而是解释器在运行时检查其数据类型；Java则是使用强类型变量检查，即所有变量在编译之前必须声明。
1.3 导入JavaScript文件
1.3.1 直接嵌入JavaScript
使用<script></script>标签对封装脚本代码，当浏览器读取到<script>标签时，将解释执行其中的脚本。实例代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第一个JavaScript网页</title>
<script language="javascript">
//获得Date对象的一个实例
var now = new Date(); //获取小时数
var hour = now.getHours();
var minu = now.getMinutes(); //获取分钟数
alert("你好！现在是" + hour + ":" + minu );
</script>
</head>
<body>
</body>
</html>
1.3.2 链接外部JavaScript
在Web页面中引入JavaScript的另一种链接外部JavaScript文件的形式。如果脚本代码比较复杂或是同一段代码可以被多个页面使用，可以将这些脚本代码单独放置在一个单独的文件中，扩展名为.js.
在Web页面外部链接js的代码是：
<script language=”javascript” src=”js.js”></script>
<script language="javascript" src="js\js.js"></script>
</head>
<body οnlοad="getClock(clock)">
<div id="clock"></div>
Js代码--- Js.js
function getClock(clock){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var date = now .getDate();
var day = now.getDay();
month = month + 1 ;
var arr_week = new Array("星期日","星期一","星期二","星期三","星期三","星期四","星期五","星期六");
//获得中文星期
var week = arr_week[day];
//组合系统日期
var time = year + "年" + month + "月" + date + "日" + week ;
clock.innerHTML = "系统公告：" + time;
}
2.JavaScript语言基础
2.1 JavaScript语法
1. JavaScript区分大小写
2. 每行的结尾的分号可有可无
3. 变量是弱类型
定义变量时只使用var运算符，就可以将变量任意赋值
如var str = “javascript” ; var age = 18;
4.使用大括号标签代码块
5.注释：有两种注释
1）单行注释 以//开头，后面的全是注释内容
2）多行注释 以 “/*”开头，以“*/”结尾，其之间的内容为注释内容。
2.2 JavaScript中的关键字
JavaScript中的关键字不能用作变量名，函数名以及循环标签。
JavaScript中的关键字如下表
2.3 JavaScript的数据类型
JavaScript的数据类型只有6种，数值型、字符型、转义字符、空值（null）和未定义。
1.数值型–分为整型与浮点型
1）整型：整数、也可以是十进制、八进制或十六进制
2）浮点型：由整数部分加小数部分组成，只能是十进制数
2.字符型–使用单引号或双引号括起来的一个或多个字符。
3.布尔型– 只有true或false，主要用来表示一个状态或标志。在js中也可以用0 和 1 代表 false 和 true;
4.转义字符– 以反斜杠开头的不可显示的特殊字符通常称为控制字符。通过转义字符可以在字符串中添加不可显示的特殊字符。
2.3.1 Js中常用的转义字符有
5.空值 – 用于定义空的或不存在的引用。
6.未定义值– 当使用了一个并未声明的变量，或者使用一个以声明但没有赋值的变量时，将返回未定义值（undefined）。
2.4 变量
（1）定义变量的方式
a) 隐式定义：直接给变量赋值；
b) 显式定义：使用var关键字定义变量。
c) var的作用：
在JavaScript脚本中可以省略var。
但是，在某些时候，如果我们要强调是新声明了一个变量，那就必须使用var了。
用var和不用var的区别：
如果不用var：
1）如果上下文中该变量存在，直接用已有的变量；
2）如果上下文中该变量不存在，才声明一个新的变量。
如果用var，表明声明一个新的变量。
（2）变量类型
a)全局变量：直接定义的变量，可以被所有的脚本访问；
b)局部变量：在函数里定义的变量，只在函数内有效；
c)如果全局变量和局部变量使用相同的变量名，则局部变量将覆盖全局变量。
2.5 运算符
（1）赋值运算符：使用“=”作为赋值运算符；
（2）算术运算符：支持所有的基本算术运算符，包括加、减、乘、除、求余、自减和自加。
（3）位运算符：与Java支持的位运算符基本相同；
（4）加强的复制运算符：赋值运算符可以与算术运算符、位运算符等结合，从而形成功能更加强大的运算符。
（5）比较运算符：判断连个变量或者场凉的大小，比较运算的结果是一个布尔值；
（6）逻辑运算符：与（&&）、或（||）、非（！）；
（7）三目运算符：(expression) ? If-true-statement : if-false-statement
（8）Typeof和instanceof运算符：
Typeof运算符用于判断某个变量的数据类型；instanceof运算符用于判断某个变量是否为指定类的实例。
2.6 应用流程控制语句
1.if条件判断语句 –对变量或表达式进行判定并根据判定结果进行相应处理
格式
If(expression){
Statement1
}else{
Statement2
}2.switch语句 – 典型的多路分支语句
格式
switch(expression){
case judgement 1 :
statement1;
break;
case judgement 2 :
statement2;
break;
case judgement 3 :
statement3;
break;
default:
defaultstatement;
break
}3.for循环语句 – 也称计次循环语句，用于循环已知的情况
格式
for(initialize;test;increment){
statement;
}4.while循环语句– 另一种循环体
while(expression){
Statement;
}5.do…while循环语句类似while循环，但是它是从循环到底部才检测循环表达式。
格式
do{
statement
}while(expressment)2.7 函数
定义：函数由关键定function、函数名加一组参数以及置于大括号中需要执行的一段代码定义的。
格式：
fuction functionName([parameter 1 , parameter 2,………]){
Statement;
[return expression;]
}参数说明：
fuctionName---必选参数，用于指定函数名。
parameter – 可选参数，用于参数列表。
statements – 必选参数，是函数体，用于实现函数功能。
expression --- 可选参数，用于返回值。
2.7.1 函数的调用
函数有以下8个特点：
1、使用function关键字定义函数。
2、没有任何的返回值类型。
3、函数的定义优先执行，与顺序无关。
4、可以通过函数名赋值函数，函数变量的类型是function对象。
5、参数列表不能有var关键字。
6、函数的参数列表在具体调用的时候实参个数可以和形参个数不同。
7、JavaScript函数天然的支持可变参数。
8、同名的函数最后声明会覆盖前面以声明。Javascript中没有函数重载。
练习
1，显示“*”为正方形，5行5列。
2，显示“*”为三角型，5行，第1行有1个“*”，第2行有2个“*”……
3，显示乘法口诀。
1*1=1
1*2=22*2=4
....
1*9=92*9=18 ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三角形</title>
<script language="javascript" type="text/javascript">
function getSquare (){
//1}打印正方形的方法
for(var i = 0 ; i < 5 ; i ++){
document.write("*****<br>");
}
}
function
//打印三角形的方法
getTriangle(){
for(var i = 1 ; i <= 5 ; i ++){
for(var j = 1 ; j <= i ; j ++){
document.write("*");
}
document.write("<br>");
}
}
//打印九九乘法表的方法
function getTable(){
for(var i = 1 ; i <= 9 ; i ++ ){
for(var j = 1 ; j <= i ; j ++){
document.write(j + "*" + i + "=" + j* i + " ");
}
document.write("<br>");
}
}
</script>
</head>
<body>
<div id="triangle">
<input type="button" οnclick="getSquare()" value="正方形"/><input type="button" οnclick="getTriangle()" value="三角形"/><input type="button" οnclick="getTable()" value="九九乘法表"/>
</div>
</body>
</html>3. 面向对象
JavaScript面向对象的脚本语言，此时开发者在开发的时候需要找对象，默认提供了内置的对象。
3.1 基本数据类型包装类
Js提供了3个特殊的引用类型：Boolean、Number、String。 当读取基本数据类型时， 后台应付创建一个对应的基本包装类对象，所以我们在操作基本数据类型时，直接调用一些方法。
如：var s1 = “HelloWorld”; var s2 = s1.subString(2);
S1是包含一个字符串，字符串是基本数据类型。但是在第二行却调用了substring方法，并将结果报存在了s2中。基本数据类型不是对象，应该是不能具备方法。实际上后台创建String，通过对象调用该方法，最后释放对象（销毁对象）。
常用对象
3.2 String对象
1）属性
String对象的常用属性是length,该属性返回String对象的长度
2）方法
3）String对象的常用方法有
3.3 Math对象
定义：Math对象提供了大量的数学常量和数学函数。在使用Math对象时，不能使用new 关键字创建对象实例，而是直接使用”对象名.成员”的格式来访问其属性与方法。
3.3.1 Math的常用方法
3.4 Date对象
想要获得网页上的时间，就要使用Date对象获得当前系统时间并按照指定的格式进行显示。
3.4.1 创建Date对象
1）dateObj = new Date();
2）dateObj = new Date(dateValue);
3）dateObj = new Date(year ,month,date[,hour,month,second,ms]) 括号内的都是可选的
参数说明：
dateValue:如果是数值，则表示指定日期与1970年1月1日午夜间全球标准时间的毫秒数，若是字符串，系统将会自动用parseInt()转化
year:一个4位数年份，若是输入0~99间的数，给会自动加上1900
其他时间也是如此。
3.4.2 Date对象的方法
Date的常用方法
代码实例：
Date为Date的对象显示系统时间
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Date示例</title> //*********************************************************** //JS代码 <script language="javascript"> function realSysTime(clock){ var now=new Date(); //创建Date对象 var year=now.getFullYear(); //获取年份 var month=now.getMonth(); //获取月份 var date=now.getDate(); //获取日期 var day=now.getDay(); //获取星期 var hour=now.getHours(); //获取小时 var minu=now.getMinutes(); //获取分钟 var sec=now.getSeconds(); //获取秒钟 month=month+1; var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var week=arr_week[day]; //获取中文的星期 var time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec; //组合系统时间 clock.innerHTML="当前时间："+time; //显示系统时间 } window.οnlοad=function(){ window.setInterval("realSysTime(clock)",1000); //实时获取并显示系统时间 } </script> //*********************************************************** </head> <body> <div id="clock"></div> </body> </html>效果图：
3.5 Window的对象
Window对象即是浏览器窗口对象，是所有对象的顶级对象，在Js中起举足轻重的作用。Window对象是直接使用“对象名.成员”的格式访问其属性与方法的。
3.5.1 Window的常用属性
3.5.2 Window对象的常用方法
4. DOM技术
4.1 概述
DOM是一种与浏览器、平台及语言无关的接口，能够以编程方式访问和操作Web页面。
DOM(Document Object Model)是文档对象模型的简称，是表示文档（如HTML文档）访问、操作构成文档的各种元素（如HTML标记和文本串）的应用程序接口（API）。
4.1.1 DOM的分层结构
在DOM中，文档的层次结构被表示为树形结构。树是倒立的，树根在上，树叶在下，树的节点表示文档中的内容。DOM的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象。
以一个HTML文档说明DOM结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个HTML文档</title>
</head>
<body>
欢迎进入黑马论坛！<br>
<a href="http://bbs.itheima.com/forum.php">http://bbs.itheima.com/forum.php</a>
</body>
</html>对应的Document层次结构为：
说明：在树型结构中，直接位于一个节点之下的节点被称为该节点子节点（children）；直接位于一个节点之上的节点被称为父节点（parent）.
4.2 遍历文档
在DOM中，HTML文档各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node的树，对于任何一个树型结构来说，最常做的就是遍历树。
Node的常用属性
练习：遍历HTML文档，并获取文档中的全部标记及标记总数以上的值，若是没有皆为null
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title>一个简单的文档</title>
<script language="javascript">
//全局变量，保存Element标记名，使用完毕要清空
var elementList = "";
//参数node是一个Node对象
function getElement(node) {
var total = 0;
//检查node是否为Element对象
if(node.nodeType==1) {
//如果是，计数器加1
total++;
//保存标记名
elementList = elementList + node.nodeName + "、";
}
//获取node的全部子节点
var childrens = node.childNodes;
for(var m=node.firstChild; m!=null;m=m.nextSibling) {
//对每个子节点进行递归操作
total += getElement(m);
}
return total;
}
function show(){
//获取标记总数
var number=getElement(document);
//去除字符串中最后一个逗号
elementList=elementList.substring(0,elementList.length-1);
alert("该文档中包含："+elementList+"等"+number+"个标记！");
//清空全局变量
elementList="";
}
</script>
</head>
<body οnlοad="show()">
欢迎访问黑马论坛！
<br>
<a href="http://www.mingribook.com"> http://www.mingribook.com</a>
</body>
</html>
4.3 获取文档中指定的元素
有两种方法只可以直接搜索文档中指定元素
1）通过元素的ID属性获取元素
使用Document对象的getElementsById()方法可以通过元素的ID属性获取元素
2）通过元素的name属性获取元素
使用Document对象的getElementsByName()方法可以通过元素的name属性获取元素。但是返回值并不是一个元素，而是一个数组。
4.4 操作文档
在DOM中不仅可以通过节点的属性查询节点，还可以通过对节点进行创建、插入、删除和替换等操作都可以通过节点（Node）对象来完成。Node对象的常用方法如下表：
练习 应用DOM操作文档，实现评价的添加和删除功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发表评价</title>
<link rel="stylesheet" href="CSS/style.css">
<script language="javascript">
function addElement() {
//创建TextNode节点
var person = document.createTextNode(form1.person.value);
var content = document.createTextNode(form1.content.value);
//创建td类型的Element节点
var td_person = document.createElement("td");
var td_content = document.createElement("td");
//创建一个tr类型的Element节点
var tr = document.createElement("tr");
//创建一个tbody类型的Element节点
var tbody = document.createElement("tbody");
//将TextNode节点加入到td类型的节点中
td_person.appendChild(person);
td_content.appendChild(content);
//将td类型的节点添加到tr节点中
tr.appendChild(td_person);
tr.appendChild(td_content);
//将tr节点加入tbody中
tbody.appendChild(tr);
//获取table对象
var tComment = document.getElementById("comment");
//将节点tbody加入节点尾部
tComment.appendChild(tbody);
//清空评论人文本框
form1.person.value="";
//清空评论内容文本框
form1.content.value="";
}
//删除第一条评论
function deleteFirstE(){
//获取table对象
var tComment = document.getElementById("comment");
if(tComment.rows.length>1){
//删除表格的第二行，即第一条评论
tComment.deleteRow(1); ，
}
}
//删除最后一条评论
function deleteLastE(){
//获取table对象
var tComment = document.getElementById("comment");
if(tComment.rows.length>1){
//删除表格的最后一行，即最后一条评论
tComment.deleteRow(tComment.rows.length-1);
}
}
</script>
</head>
<body>
<table width="600" height="70" border="0" align="center" cellpadding="0" cellspacing="1" bordercolorlight="#FF9933" bordercolordark="#FFFFFF" bgcolor="#666666">
<thead>
<tr>
<td width="14%" align="center" bgcolor="#FFFFFF"><img src="head.jpg" width="70" height="74"></td>
<td width="86%" align="left" bgcolor="#FFFFFF"> 人生若真如一场大梦，这个梦倒也很有趣的。在这个大梦里，一定还有长长短短，深深浅浅，肥肥瘦瘦、甜甜苦苦，无数的小梦。有些已经随着日影飞去；有些还远着哩……</td>
</tr>
</thead>
</table>
<br>
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
<tr>
<td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td>
<td width="82%" align="center" bgcolor="#E5BB93">评论内容</td>
</tr>
</table>
<form name="form1" method="post" action="">
<table width="600" height="122" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="119" height="14"> </td>
<td width="481"> </td>
</tr>
<tr>
<td height="27" align="center">评 论 人：</td>
<td>
<input name="person" type="text" id="person" size="40">
</td>
</tr>
<tr>
<td align="center">评论内容：</td>
<td><textarea name="content" cols="60" rows="6" id="content"></textarea></td>
</tr>
<tr>
<td height="40"> </td>
<td><input name="Button" type="button" class="btn_grey" value="发表" onClick="addElement()">
<input name="Reset" type="reset" class="btn_grey" value="重置">
<input name="Button" type="button" class="btn_grey" value="删除第一条评论" onClick="deleteFirstE()">
<input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onClick="deleteLastE()"></td>
</tr>
</table>
</form>
</body>
</html>----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------
扫一扫
2108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
