javascript
js介绍：
js的组成
1.ECMAScript
2.DOM
3.BOM
js和java的区别：
1.java是一个强类型，js是弱类型
2.java运行时需要编译，js直接解释（解释器是浏览器）
3.java和js都区分大小写
js的作用：
1.改变html内容
2.修改css样式
3.表单验证
4.操作浏览器
js的导入
1.外部导入
要求：
首先有外部的js文件，后缀名为.js
在html中通过script标签导入
格式：
<script type="text/javascript" src="路径">
</script>
2.内部导入
要求：
直接在script标签体中写js代码
格式：
<script type="text/javascript">js的代码</script>
注意事项：
若使用了script的src属性，标签体内的Js代码不会执行
script标签一般放在Head中，但具体情况具体分析
3.注释
//单行注释
/* */ 多行注释
js的变量
格式：
var 变量名=初始值；
------------------
var 变量名;
变量名=初始化值;
注意事项：
1.变量可以不声明
2.变量若需要声明，var 可以省略，但是不要省略
3.每行以分号省略，但不要省略
js的数据类型
两种：原始类型和引用类型
原始类型：
Undefined:只有一个值undefined，一个变量没有初始化的时候，一个函数没有返回值的时候，类型为Undefined
Null:只有一个值null
String:用引号引起来
Number:数字
Boolean:只有两个值，true false
在开发汇总，通过typeof 运算符来判断给定值或者变量是否属于原始类型，若属于原始类型，还可以判断出属于哪种原始类型
若是Undefined类型，通过typeof返回的是 undefined
若是String类型，通过typeof返回的是 string
若是Boolean类型，通过typeof返回的是 boolean
若是Null类型，通过typeof返回的是 object
类型转换：
String Number Boolean他们是伪对象
他们可以直接调用相应的方法和属性
1.转换字符串(调用toString)
10.toString() //错误
10.0.toString() //正确
true.toString() //正确
null和undefined不能调用
2.转成数字(常识)
parseInt(要转换的值或者变量)；把给定的值尝试转成整数
alert(parseInt('超市9.9')); //NaN
alert(parseInt('9.9超市')); //9
parseFloat();把给定的值尝试转成小数
注意：只是string可以使用
3.强制转换
a.把给定的值或变量转成字符串
使用String()
任何原始类型都可以转成字符串
b.把给定的值或变量转成数字
使用Number()
例如：
alert(Number(""));//0
alert(Number(" "));//0
alert(Number("9"));//9
alert(Number("9.9"));//9.9
alert(Number(null));//0
alert(Number(true));//1
alert(Number(false));//0
alert(Number("9kuai9"));//NaN
alert(Number("chaoshi"));//NaN
alert(Number(new Object()));//NaN
alert(Number(undefined));//NaN
String:空字符串和全是空格的字符串==>0
字符串形式的数字==>相应的数字
其他字符串==>NaN
null:0 其他对象==>NaN
undefined:NaN
boolean:true==>1 false==>0
c.把给定的值或变量转成boolean
使用Boolean()
例如：
alert(Boolean(undefined));//false
alert(Boolean(null));//false
alert(Boolean(new Object());//true
alert(Boolean(""));//false
alert(Boolean("hello"));//true
alert(Boolean(" hello"));
alert(Boolean(0)); //false
alert(Boolean(2)); //true
非空对象，非空字符串，非零数字转成true,其余的转成false
引用类型
Boolean(了解)
语法：
new Boolean(值或变量); //返回一个object
Boolean(值或变量); //返回一个boolean
常用方法：
toString()
注意：
如果省略value参数，或者设置为0 、-0、null、""、false、undefined或NaN，则该对象设置为false，否则设置为true(即使value参数是字符串"false")
Number:
语法：
new Number(值或变量)；//返回一个object
Number(值或变量); //返回一个number
常用方法：
toString();
String:
语法：
new String(value);
String(value);
常用方法：
获取字符：
charAt(index) 返回在指定位置的字符
charCodeAt(index) 返回在指定位置的字符的Unicode编码
获取字符索引：
indexOf(string)
拼接字符串：
concat(string)
截取字符串：
substring(开始索引，结束索引)
substr(开始索引，截取个数)
slici(开始索引，结束索引)
-1代表最后一个字符，-2代表倒数第二个字符
正则表达式：
split()
match()
replace()
search()
注意：
Array
Date
<!-- Date
语法：
new Date();
常用方法：
getFullYear() 从Date对象以四位数字返回年份
getMonth() (0~11)
getDate()
getHour()
getMinutes()
getSeconds()
-->
RegExp <!--
语法：
直接量语法
/正则表达式/[参数]
new
new RegExp("正则表达式"[,"参数"]);
参数：
i:忽略大小写
g:全局的
api:
reg的常用方法：
test():检索字符串中指定的值，返回true或false
string的常用方法
split():把字符串分割为字符串数组
replace(old|reg,new):替换与正则表达式匹配的字符串。没g,最多修改一个；有g，全局修改
match():找到一个或多个正则表达式的匹配。没g,最多获取一个；有g，全局查找。以数组形式返回
search():检索与正则表达式相匹配的值。忽略g,只返回第一个匹配到的索引值
-->
js的运算符
一元运算符
void:避免输出不应该输出的值
<a href="javascript:void(0)">点我试试</a>超链接不再跳转
位运算符
和java一样
逻辑运算符！
&&(and) ||(or) !(not)
一旦左边的表达式可以确定最终的结果，右边的表达式不再执行
对于and和or，若两边都是boolean和java一样
算术运算符
大部分和java一样
关系运算符！
> >= < <=
若运算符两边都是数字，和Java一样
若两边为字符串，比较ascii码
若一个数字和字符串形式的数字，转成数字
等性运算符！
条件运算符(三目)！
赋值运算符
逗号运算符
js的语句
if
循环
switch
全局函数
编码:
encodeURI() 把字符串编码为URI
decodeURI() 解码某个编码的URI、、
encodeURIComponent()
decodeURIComponent()
类型转换:
parseFloat()
parseInt()
Number()
String()
eval执行函数:
计算js字符串，并把它作为脚本代码来执行
扩展：
json:
格式1：
{"key","value","key","value"}
函数：
格式1：☆
function 函数名(参数列表){
方法体
}
格式2: ☆
var 函数名=function(参数列表){
方法体
}
格式3:
var 函数名=new Function(参数列表，方法体);
调用函数：
函数名(参数列表)；
注意事项：
定义函数的时候不用写返回值类型
参数列表中不需要写参数类型
返回值通过return 返回
js的函数参数不是那么明确，调用函数的时候不需要准确匹配参数个数
若有多个参数，可以使用arguments获取参数
arguments相当于一个数组，获取每个参数可以通过for循环 <script type="text/javascript">
function add(a,b){
alert(a+b);
}
var add1=function(a,b){
alert(a+b);
}
var add2=new Function("a","b","alert(a+b)");
/*add(1,2);
add1(10,20);
add2(100,200); */
function add3(a,b){
return a+b;
}
<!-- alert(add3(10,20)); -->
//add(1,2,3); //3
function add5(a){
alert(arguments.length);
}
//add5(1,2,3,4,5,6); //6
</script>
事件
事件驱动函数
常见的事件：
焦点事件：
onfocus
onblur
鼠标事件：
onclick
ondblclick onmousedown onmouseup
onmousemove onmouseout onmouseover
键盘事件：
onkeydown onkeypress onkeyup
表单事件：
onsubmit 表单提交事件
onchange
onselect
其他事件：
onload 某个页面或图片加载完成后做的事情
onunload 用户退出页面
重点：onfocus onblur onsubmit onload
绑定函数
方式1：通过元素的事件属性
<xxx 事件="函数名(参数列表)">
方式2：派发事件
document.getElementById("id值").事件=函数 | 函数名(参数列表){函数体}
阻止默认对象：
添加如下代码 event.returnValue=false;
阻止传播事件：
添加如下代码 event.cancelBubble=true;
<html>
<head>
<title>显示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
#outer{
background:yellow;
border:1px solid red;
height:200px;
width:200px;
}
#inner{
background:#f00;
border:1px solid red;
height:100px;
width:100px;
}
</style>
<script type="text/javascript">
function btnClick(){
alert(44944);
}
function loadBody(){
document.getElementById("btnId").οnclick=btnClick;
}
function btnClick_(){
alert("其实我不想走");
event.returnValue=false; //阻止默认对象
}
function outerC(){
alert("outer");
}
function innerC(){
alert("inner");
event.cancelBubble=true;
}
</script>
</head>
<body οnlοad="loadBody()">
<!-- <input type="button" value="点我试试" οnclick="btnClick()"/> -->
<input type="button" value="点我试试" id="btnId"/>
<hr/>
<a href="08.函数.html" οnclick="btnClick_()">点我就跑</a>
<div id="outer" οnclick="outerC()">
<div id="inner" οnclick="innerC()">
</div>
</div>
</body>
</html>
BOM(浏览器对象模型)
BOM介绍
三个对象：
window：窗口
如果文档包含框架(frame或iframe标签),浏览器会为html文档创建一个window对象，
并为每个框架创建一个额外的window对象
常用属性：
self
parent
top:祖宗
opener:返回对创建此窗口的窗口的引用
常用方法：
消息框：
alert("警示信息");警示框
confirm("");确认框，点击确定时返回true，点击取消返回false
prompt("请输入您的姓名"[,"默认值"]);输入框，点击确定的时候返回输入框的内容，否则返回null
定时器：
setInterval(函数，周期) 按照指定的周期(毫秒计)调用函数或计算表达式
clearInterval(定时器)取消由setInterval()设置的定时器
setTimeout(函数，时间)在指定的毫秒数后调用函数或计算表达式
clearTimeout(定时器)
注意：
window对象的方法和属性可以省略window
例如：
window.alert() == alert();
window.location == location;
定时器
<html>
<head>
<title>显示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
</style>
<script type="text/javascript">
var num=0;
var timer;
//开始计时
function start(){
timer=setInterval(showTime,200);
}
function showTime(){
//获取text
var tObj=document.getElementById("textId");
//给text设置值
tObj.value=num++;
}
//停止计时
function end(){
clearInterval(timer);
}
var num_=0;
var timer_;
function start_(){
timer_=setTimeout(start_,200);
var tObj=document.getElementById("textId_");
tObj.value=num_++;
if(num_>=20){
clearTimeout(timer_);
}
}
</script>
</head>
<body οnlοad="loadBody()">
<input type="button" value="开始计时" οnclick="start()"/>
<input id="textId" />
<input type="button" value="停止计时" οnclick="end()"/>
<br/>
<input type="button" value="开始计时" οnclick="start_()"/>
<input id="textId_"/>
</body>
</html>
open和close:
open()打开一个新的浏览器窗口或 查找一个已命名的窗口
close()关闭窗口
a页面
<html>
<head>
<title>显示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
</style>
<script type="text/javascript">
function open_(){
var bObj=open("12_b.html");
}
</script>
</head>
<body οnlοad="loadBody()">
我是a页面
<input type="button" value="打开b页面" οnclick="open_()"/>
</body>
</html>
b页面
<html>
<head>
<title>显示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
</style>
<script type="text/javascript">
function close_(){
var aObj=opener;
aObj.close();
}
</script>
</head>
<body οnlοad="loadBody()">
我是b页面
<input type="button" value="关闭a页面" οnclick="close_()"/>
</body>
</html>
history:历史
常用方法：
back()
forward()
go(int)!!
int 值若为1，相当于forward
若为-1，相当于back
a页面
<html>
<head>
<title>显示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
</style>
<script type="text/javascript">
function forward_(){
//history.forward();
history.go(1);
}
</script>
</head>
<body οnlοad="loadBody()">
我是a页面
<hr/>
<a href="b.html">跳转到b页面</a>
<input type="button" value="前进" οnclick="forward_()"/>
</body>
</html>
b页面
<html>
<head>
<title>显示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
</style>
<script type="text/javascript">
function back_(){
//history.back();
history.go(-1);
}
</script>
</head>
<body οnlοad="loadBody()">
我是b页面
<hr/>
<input type="button" value="返回" οnclick="back_()"/>
</body>
</html>
location:定位
常用属性：
href:设置或获取Url
获取写法： location.href
设置： location.href="http:..."
<html>
<head>
<title>显示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
</style>
<script type="text/javascript">
document.write(location.href);
function go_(){
location.href="11.clock.html";
}
</script>
</head>
<body οnlοad="loadBody()">
<input type="button" value="href" οnclick="go_()"/>
</body>
</html>
文档对象模型：
DOM
文档对象模型
元素节点 Element
属性节点 Attribute
文本节点 Text
文档节点 Document
常用的方法：document
getElementById("id值")
getElementsByClassName("class值")
getElementsByName("name值")
getElementsByTagName("标签名")
常用的属性：
innerHTML:设置或获取标签体的内容
value:设置或获取value的值
frameset框架中，
//保证登录界面最大化
if(top.location!=self.location){
top.location=self.location;
}
扫一扫
1898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
