1.javascript笔记
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").onclick=btnClick; } function btnClick_(){ alert("其实我不想走"); event.returnValue=false; //阻止默认对象 } function outerC(){ alert("outer"); } function innerC(){ alert("inner"); event.cancelBubble=true; } </script> </head> <body onload="loadBody()"> <!-- <input type="button" value="点我试试" onclick="btnClick()"/> --> <input type="button" value="点我试试" id="btnId"/> <hr/> <a href="08.函数.html" onclick="btnClick_()">点我就跑</a> <div id="outer" onclick="outerC()"> <div id="inner" onclick="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 onload="loadBody()"> <input type="button" value="开始计时" onclick="start()"/> <input id="textId" /> <input type="button" value="停止计时" onclick="end()"/> <br/> <input type="button" value="开始计时" onclick="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 onload="loadBody()"> 我是a页面 <input type="button" value="打开b页面" onclick="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 onload="loadBody()"> 我是b页面 <input type="button" value="关闭a页面" onclick="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 onload="loadBody()"> 我是a页面 <hr/> <a href="b.html">跳转到b页面</a> <input type="button" value="前进" onclick="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 onload="loadBody()"> 我是b页面 <hr/> <input type="button" value="返回" onclick="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 onload="loadBody()"> <input type="button" value="href" onclick="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; }