知识点
什么是JavaScript
JavaScript 是一种最流行的脚本语言 JavaScript 是属于 web 的语言,适用于 PC和移动端的开发 为HTML 页面增加交互性、数据验证等特性 JavaScript可以改变
HTML内容 HTML属性 CSS样式 隐藏显示HTML元素
< body>
< p id= "demo" > JavaScript 改变 HTML 内容。< / p>
< button type= " button" onclick= 'document. getElementById ( "demo" ) . innerHTML
= " This JavaScript! " '> 改变! < / button>
< / body>
document.getElementById("demo ")是查找 id="demo"的HTML元素,找到后,把元素内容(innerHTML)更改为"This JavaScript“
特点
交互性 安全性 (不可以访问本地的硬盘) 扩平台性 (浏览器可以解析js文件) JavaScript只需解析就可以执行,而java需要先编译成字节码文件,再执行。
JavaScript 如何嵌入网页
将 JavaScript 语句插入 HTML 文档,内嵌和链接两种方式:
使用<script> 标签将JavaScript代码嵌入HTML网页
< head>
< script type= "text/javascript" >
……
< / script >
< / head>
< script type= "text/javascript" >
alert ( "呵呵" ) ;
< / script>
把JavaScript代码写在一个*.js文件中,将JavaScript 源文件链接到 HTML 文档中 需要注意的是:如果<script>标签通过src属性引入了外部的文件,里面的js代码就不会执行
。
< head>
< script language= "text/javascript" src= "文件名.js" >
< / script>
< / head>
JavaScript 的基本语法
变量
变量声明
var 变量名 const 声明一个只读的常量,一旦声明,常量的值就不能改变 ES6:let。let 声明的变量只在 let 命令所在的代码块内有效 变量名必须以字母或下划线(“_”)开头,变量可以包含数字、从 A 至 Z 的大小写字母 avaScript 区分大小写,即变量 myVar、 myVAR 和 myvar 是不同的变量
var a= 10 ; var x, y, z = 10 ;
函数
function 方法名称 ( str, num ) {
方法体;
return ;
}
function sum ( one, two )
{
var result = one + two;
return result;
}
调用函数 函数调用是和表单元素的事件一起使用,调用格式为:事件名=“函数名” ;
< INPUT name= “add” type= “button” value= “加法" onClick=" sum ( 2 , 5 ) ">
变量作用域
函数内 var声明的变量是局部变量,作用域是该函数 函数外 var声明的变量是全局变量,作用域是整个HTML文件 函数内 未用var声明的变量也是全局变量,作用域是HTML文件 函数内 var声明的变量(局部变量),可以与全局变量同名 即当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope
< head>
< title> 变量作用域示例< / title>
< script language= "text/javascript" >
var i, j= 10 ;
function output ( )
{
var j= 0 ;
i= 100 ;
j++ ;
j++ ;
document. write ( " j=" , j) ;
document. write ( " i=" , i) ;
i++ ;
}
< / script> < / head>
< body> < br> < br>
< script>
document. write ( "尚未调用函数output(),所以i无定义,不能引用!<br>" ) ;
document. write ( "j的初始值=" , j, "<br>" ) ;
document. write ( "调用output(),观察函数的输出!<br>" ) ;
output ( ) ;
document. write ( "<br>调用output()后,观察函数对i,j的影响:i=" , i, " j=" , j) ;
< / script>
< / body>
数据类型与运算符
数据类型
String 字符串类型 双引号和单引号都是字符串
Number 数字类型 不区分整数和小数
Boolean 布尔类型 Null 空(给引用赋值) Undefined 未定义(声明变量,没赋值) parseFloat( )函数将字符串转换为float数据; parseInt( )函数将字符串转换为int数据 示例代码
< ! DOCTYPE html>
< html>
< head>
< meta charset= "UTF-8" >
< title> Insert title here< / title>
< / head>
< body>
< script type= "text/javascript" >
var str = "abc" ;
var num = "11" ;
var flag = true ;
var data = null ;
var un;
var str2 = "bcd" ;
alert ( typeof ( str2) ) ;
var str2 = 15 ;
alert ( typeof ( str2) ) ;
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html>
< head>
< meta charset= "UTF-8" >
< title> Insert title here< / title>
< / head>
< body>
< script type= "text/javascript" >
var num = 3710 ;
var str = "12" ;
var n = 3 ;
var m;
m = ++ n;
var str4 = "14" ;
var num4 = 14 ;
alert ( str4 === num4) ;
< / script>
< / body>
< / html>
一些语句
* 判断语句
if ( 8 == num) {
赋值的问题,需要注意。
} else {
}
* 循环语句
for ( var i= 0 ; i<= 8 ; i++ ) {
}
* document对象write ( "字符串" )
* 把文本的内容写在浏览器端
* while ( ) { }
JavaScript 的对象
String对象
属性 length
⟹
\Longrightarrow
⟹ 字符串的长度 方法
方法 用途 bold() 粗体显示字符串 fontcolor(color) 设置字体的颜色 fontsize(size) 设置字体的大小 italics() 斜体显示 link(url) 设置链接 sup() 上标
方法 用途 charAt(index) 返回指定位置的字符 indexOf(searchvalue,fromindex) 检索字符串 lastIndexOf() 从后向前的 replace() 替换字符串 substring(start,stop) 从哪开始,到哪结合(包含开始不包含结束) substr(start,length) 从哪开始,截取长度
< ! DOCTYPE html>
< html>
< head>
< meta charset= "UTF-8" >
< title> Insert title here< / title>
< / head>
< body>
< script type= "text/javascript" >
var str = "abc" ;
alert ( str. length) ;
document. write ( str) ;
document. write ( str. charAt ( 2 ) ) ;
document. write ( str. indexOf ( "f" ) ) ;
var str2 = str. replace ( "bc" , "ef" ) ;
document. write ( str2) ;
document. write ( str. substring ( 1 , 3 ) ) ;
document. write ( str. substr ( 1 , 3 ) ) ;
document. write ( mybold ( str) ) ;
function mybold ( s ) {
var result = "<b>" + s+ "</b>" ;
return result;
}
document. write ( str. fontcolor ( "red" ) ) ;
document. write ( str. link ( "http://www.baidu.com" ) ) ;
document. write ( 3 + "2" . sup ( ) ) ;
< / script>
< / body>
< / html>
Array对象
var arr = [ 2 , 3 , 4 ] ;
var arr = new Array ( 5 ) ;
var arr = new Array ( 5 , 6 ) ;
方法 用途 concat() 链接数组或者元素都可以 join(separator) 转化成字符串 pop() 删除并返回最后一个元素 push() 向末尾添加一个元素,返回新的长度
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> Insert title here< / title>
< / head>
< body>
< / body>
< script type= "text/javascript" >
var arr = [ "NBA" , "CBA" , "CUBA" , "WNBA" ] ;
alert ( arr. length) ;
document. write ( arr+ "<br/>" ) ;
arr[ 4 ] = "abc" ;
document. write ( arr+ "<br/>" ) ;
document. write ( arr+ "<br/>" ) ;
var arr2 = arr. concat ( "NBA" ) ;
document. write ( arr2+ "<br/>" ) ;
document. write ( arr. join ( "-" ) + "<br/>" ) ;
document. write ( arr+ "<br/>" ) ;
var str = arr. pop ( ) ;
document. write ( str+ "<br/>" ) ;
document. write ( arr+ "<br/>" ) ;
< / script>
< / html>
Date对象
var date = new Date ( ) ;
方法 用途 toLocaleString() 根据本地的日期格式转化成字符串 getDate() 返回一个月中的某一天 getDay() 返回一周中的某一天(0-6) getMonth() 获取月份(0-11) getFullYear() 获取年 getTime() 获取毫秒数 setTime() 通过毫秒数设置日期 Date.parse(datestring) 解析字符串(符合 RFC2822 或 ISO 8601 日期格式)
,返回从1970-1-1 00:00:00 UTC 到该日期对象的毫秒数
setTimeout的用法 setTimeout(”调用的函数”,”定时的时间”)
var myTime=setTimeout("disptime( ) " , 1000 );
clearTimeout(myTime);
采用定时显示,使用定时器函数,每隔1秒调用disptime( )函数显示时间
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> Insert title here< / title>
< / head>
< body>
< / body>
< script type= "text/javascript" >
var date = new Date ( ) ;
document. write ( date+ "<br/>" ) ;
document. write ( date. toLocaleString ( ) + "<br/>" ) ;
document. write ( date. toLocaleDateString ( ) + "<br/>" ) ;
document. write ( date. toLocaleTimeString ( ) + "<br/>" ) ;
var monthday = date. getDate ( ) ;
var weekday = date. getDay ( ) ;
var month = date. getMonth ( ) + 1 ;
var year = date. getFullYear ( ) ;
document. write ( year+ "-" + month+ "-" + monthday+ " " + getWeek ( weekday) + "<br/>" ) ;
function getWeek ( num ) {
var arr = [ "星期日" , "星期一" , "星期二" , "星期三" , "星期四" , "星期五" , "星期六" ] ;
return arr[ num] ;
}
var m = date. getTime ( ) ;
document. write ( m+ "<br/>" ) ;
var date2 = new Date ( ) ;
date2. setTime ( 1414916247532 ) ;
document. write ( date2. toLocaleString ( ) + "<br/>" ) ;
var date3 = new Date ( 1414916247532 ) ;
document. write ( date3. toLocaleString ( ) + "<br/>" ) ;
var str = "11/11/2014" ;
var mm = Date. parse ( str) ;
var date4 = new Date ( mm) ;
document. write ( date4. toLocaleString ( ) + "<br/>" ) ;
< / script>
< / html>
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> Insert title here< / title>
< / head>
< body>
< script type= "text/javascript" >
function disptime ( )
{
var time = new Date ( ) ;
var hour = time. getHours ( ) ;
var minute = time. getMinutes ( ) ;
var second = time. getSeconds ( ) ;
var apm= "AM" ;
if ( hour> 12 )
{ hour= hour- 12 ;
apm= "PM" ;
}
if ( minute < 10 )
minute= "0" + minute;
if ( second < 10 )
second= "0" + second;
document. myform. myclock. value= hour+ ":" + minute+ ":" + second+ " " + apm;
var myTime = setTimeout ( "disptime( )" , 1000 ) ;
}
< / script>
< BODY onLoad= "disptime( )" >
< FORM NAME = "myform" >
< INPUT name= "myclock" type= "text" value= "" >
< / FORM >
< / body>
< / html>
Math对象
方法 用途 ceil(x) 上舍入 floor(x) 下舍入 round(x) 四舍五入
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> Insert title here< / title>
< / head>
< body>
< / body>
< script type= "text/javascript" >
document. write ( Math. ceil ( 14.2 ) + "<br/>" ) ;
document. write ( Math. floor ( 14.6 ) + "<br/>" ) ;
document. write ( Math. round ( 14.3 ) + "<br/>" ) ;
for ( var i= 0 ; i< 10 ; i++ ) {
document. write ( Math. floor ( Math. random ( ) * 10 + 1 ) + "<br/>" ) ;
}
< / script>
< / html>
浏览器对象
分层结构
Window 对象
名称 说明 document 表示给定浏览器窗口中的 HTML 文档。 history 包含有关客户访问过的URL的信息。 location 包含有关当前 URL 的信息。 name 设置或检索窗口或框架的名称。 status 设置或检索窗口底部的状态栏中的消息。 screen 包含有关客户端的屏幕和显示性能的信息。
名称 说明 alert (“m提示信息”) 显示包含消息的对话框。 confirm(“提示信息”) 显示一个确认对话框,包含一个确定取消按钮 Prompt(“提示信息”) 弹出提示信息框 open (“url”,“name”) 打开具有指定名称的新窗口,并加载给定 URL 所指定的文档;如果没有提供 URL,则打开一个空白文档 close ( ) 关闭当前窗口 setTimeout(“函数”,毫秒数) 设置定时器:经过指定毫秒值后执行某个函数
Document 对象
名称 说明 alinkColor 设置或检索文档中所有活动链接的颜色 bgColor 设置或检索 Document 对象的背景色 body 指定文档正文的开始和结束 linkColor 设置或检索文档链接的颜色 location 包含关于当前 URL 的信息 title 包含文档的标题 url 设置或检索当前文档的 URL vlinkColor 设置或检索用户访问过的链接的颜色
名称 说明 clear ( ) 清除当前文档 close ( ) 关闭输出流并强制显示发送的数据 write (“text”) 将文本写入文档
History 对象
名称 说明 back() 加载 History 列表中的上一个 URL。 forward() 加载 History 列表中的下一个 URL。 go(“url” ornumber) 加载 History 列表中的一个 URL,或要求浏览器移动指定的页面数。
Location 对象
名称 说明 host 设置或检索位置或 URL 的主机名和端口号 hostname 设置或检索位置或 URL 的主机名部分 href 设置或检索完整的 URL 字符串
名称 说明 assign(“url”) 加载 URL 指定的新的 HTML 文档。 reload() 重新加载当前页 replace(“url”) 通过加载 URL 指定的文档来替换当前文档
JavaScript 事件处理
基本语法
事件名=" JavaScript 代码或调用函数"
< INPUT type= "BUTTON" … onClick= "alert(“单击!" ) ; ”>
< INPUT type= "BUTTON" … onMouseDown= "check( ) " >
事件名 说明 onClick 鼠标单击 onChange 文本内容或下拉菜单中的选项发生改变 onFocus 获得焦点,表示文本框等获得鼠标光标。 onBlur 失去焦点,表示文本框等失去鼠标光标。 onMouseOver 鼠标悬停,即鼠标停留在图片等的上方 onMouseOut 鼠标移出,即离开图片等所在的区域 onMouseMove 鼠标移动,表示在
层等上方移动
onLoad 网页文档加载事件 onSubmit 表单提交事件 onMouseDown 鼠标按下 onMouseUp 鼠标弹起
实例
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< HTML >
< HEAD >
< META http- equiv= "Content-Type" content= "text/html; charset=gb2312" >
< TITLE > 图片切换< / TITLE >
< / HEAD >
< BODY >
< IMG
src= "https://elearning.ecnu.edu.cn/images/console/logos/header_institution.png"
name= "picture" width= "400" height= "255" align= "middle"
onMouseOver= "src='https://elearning.ecnu.edu.cn/images/console/logos/header_institution.png'"
onMouseOut= "src='https://elearning.ecnu.edu.cn/webapps/bb-BBWeChat-BBLEARN/img/wechat_logo.png'" >
< H1 > 移动变化图像< / H1 >
< / BODY >
< / HTML >
JavaScript 的函数
eval 函数
计算字符串表达式的值
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> Insert title here< / title>
< / head>
< body>
< / body>
< script type= "text/javascript" >
var str1= prompt ( "请输入一个表达式" , "" ) ;
var result= eval ( str1) ;
document. write ( str1+ "=" + result) ;
< / script>
< / html>
isNaN 函数
验证参数是否为 NaN(非数字)
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> Insert title here< / title>
< / head>
< body>
< / body>
< script type= "text/javascript" >
var x = prompt ( "输入一些数据" , "" ) ;
if ( isNaN ( x) )
alert ( x + " 不是一个数字" ) ;
else
alert ( x + " 是一个数字" ) ;
< / script>
< / html>
实例:显示指定数的阶乘值
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> 函数简例< / title>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< script type= "text/javascript" >
function factor ( num ) {
var i, fact= 1 ;
for ( i= 1 ; i< num+ 1 ; i++ )
fact= i* fact;
return fact;
}
< / script>
< / head>
< body>
< p>
< script>
document. write ( "调用factor函数,5的阶乘等于:" , factor ( 5 ) , "。" ) ;
< / script>
< / p>
< / body>
< / html>
练习
用JavaScript设计并实现程序,页面有一个文本框,显示当前年、月、日,当鼠标移上去,文本框就变换为当前的具体时间显示。
< ! DOCTYPE html>
< html>
< head>
< meta charset= "UTF-8" >
< title> 日期显示< / title>
< script src= "jedate/jedate.js" > < / script>
< / head>
< body>
< input type= "text" id= "test" / >
< script type= "text/javascript" >
var t= document. getElementById ( "test" ) ;
function nodetail ( )
{
var d= new Date ( ) ;
t. value= d. getFullYear ( ) + "-" + ( d. getMonth ( ) + 1 ) + "-" + d. getDate ( ) ;
}
function detail ( )
{
var time = new Date ( ) ;
var hour = time. getHours ( ) ;
var minute = time. getMinutes ( ) ;
var second = time. getSeconds ( ) ;
var apm= "AM" ;
if ( hour> 12 )
{ hour= hour- 12 ;
apm= "PM" ;
}
if ( minute < 10 )
minute= "0" + minute;
if ( second < 10 )
second= "0" + second;
t. value= hour+ ":" + minute+ ":" + second+ " " + apm;
}
nodetail ( ) ;
t. onmouseout= nodetail
t. onmouseover= detail
< / script>
< / body>
< / html>