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学习型技术博客、期待与您交流! ------------