HTML快速恢复 之 JavaScript基础
2018-02-25 本文已影响3039人
平安喜乐698
目录
1. JavaScript
2. Prototype
1. JavaScript
概念
最流行的脚本语言，借JAVA出名但和JAVA一点关系没有。
根据所在位置分为2种：
内部脚本
必须位于 <script> 与 </script> 之间，可放在 <body> 和 <head> 中
外部脚本
<script src="myScript.js"></script>放在head中，.js不能再写<script></script>
例：
1.向HTML写入内容
document.write("<h1>This is a heading</h1>");
注意：在文档加载后（js某函数中）使用该方法，会覆盖整个文档。
2.获取指定元素（根据ID）
x=document.getElementById("demo");
3.改变元素内容
x.innerHTML="Hello JavaScript"; // 文本
imgOne.src="/i/eg_bulboff.gif"; // 图片
4.修改元素样式
x.style.color="#ff0000"; // 样式
5.内容是否为空
if isNaN(x) {alert("Not Numeric")};
6.事件
<button type="button" onclick="alert('Welcome!')">点击这里</button>
或
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
alert('Welcome!')
}
</script>
</head>
<body>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
1.1 语法
浏览器会逐行执行脚本代码
一行多个语句时需要；
大小写敏感
会忽略多余的空格
在文本字符串中使用反斜杠对代码行进行换行
document.write("Hello \
World!");
注释：
单行注释 //
多行注释 /**/
变量：
变量必须以字母、$ 和 _ 开头，大小写敏感。尽量见名知意
var x=2.3;
var y=3;
var z=x+y;
var str="hello";
var name="Gates", age=56, job="CEO";
var name="Gates",
age=56,
job="CEO";
var cc=undefined; 等价于 var cc;
var carname="Volvo";
var carname; 依旧是"Volvo"
1.1.1 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
var x // x 为 undefined
var x = "Bill"; // x 为字符串
var x = 6; // x 为数字
var z=0xFF; // x 为数字（八进制）
var x=true; // x 为bool
// cars：数组
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
//
var cars=new Array("Audi","BMW","Volvo");
// 对象
var person={firstname:"Bill", lastname:"Gates", id:5566};
//
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
// 使用对象
name=person.lastname;
name=person["lastname"];
// 清空变量
cars=null;
日期
当前日期
var d=new Date();
重新设置date
d.setDate(myDate.getDate()+5)
从 1970/01/01 至今已过去多少毫秒
d.getTime()
设置年月日
d.setFullYear(1992,10,3)
转换为字符串
d.toUTCString()
返回0～6:周日到周六
d.getDay()
小时 分钟 秒
var h=d.getHours()
var m=d.getMinutes()
var s=d.getSeconds()
比较日期
>
字符串
是存储字符的变量。用双引号或单引号。
var txt="Hello World!"
长度
txt.length
获取下标（没找到则-1，找到则首字母下标）
str.indexOf("Hello")
是否含有指定字符串（含有则返回字符串，不含则反null）
str.match("world")
替换字符串
str.replace(/Microsoft/,"W3School")
变大
txt.big()
变小
txt.small()
变粗
txt.bold()
斜体
txt.italics()
？
txt.blink()
？
txt.fixed()
删除线
txt.strike()
颜色
txt.fontcolor("Red")
大小
txt.fontsize(16)
全小写
txt.toLowerCase()
全大写
txt.toUpperCase()
下标
txt.sub()
上标
txt.sup()
链接
txt.link("http://www.w3school.com.cn")
数字
所有 JavaScript 数字均为 64 位。没有不同类型的数字。
可以带小数点，也可以不带。
精度
整数（不使用小数点或指数计数法）最多为 15 位。
小数的最大位数是 17，但是浮点运算并不总是 100% 准确.
属性：
MAX VALUE
MIN VALUE
NEGATIVE INFINITIVE
POSITIVE INFINITIVE
NaN
prototype
constructor
方法：
toExponential()
toFixed()
toPrecision()
toString()
valueOf()
Math
四舍五入
Math.round(0.60)
0～1随机数
Math.random()
比大数
Math.max(5,7)
比小数
Math.min(5,7)
常数
Math.E
圆周率
Math.PI
2的平方根
Math.SQRT2
1/2的平方根
Math.SQRT1_2
2的自然数
Math.LN2
10的自然数
Math.LN10
以2为底e
Math.LOG2E
以10为底e
Math.LOG10E
布尔
布尔（逻辑）只能有两个值：true 或 false。
无初始值或者其值为 0、-0、null、""、false、undefined 或者NaN则为false，否则为true
创建
var myBoolean=new Boolean("e")
数组
数组下标是基于零的
创建数组
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
或
var mycars=new Array("Saab","Volvo","BMW")
访问数组元素
mycars[0]
修改数组元素
mycars[0]="Opel";
遍历数组
for (i=0;i<mycars.length;i++){
}
合并数组
arr.concat(arr2)
拼接数组（默认以,）
arr.join() arr.join(".")
按a-z排序
arr.sort()
数字从小到大排序
arr.sort(sortNumber)
function sortNumber(a, b){
return a - b
}
对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
Undefined 和 Null
设置为 null 来清空变量
也可以先声明变量类型，再赋值
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
对象（JavaScript 是面向对象的语言，但 JavaScript 不使用类）
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。还可以自定义对象。
对象拥有属性和方法：
属性（与对象相关的值）。
方法是能够在对象上执行的动作。
举例：
var txt = "Hello";
txt.length
txt.indexOf(0)
txt.replace()
txt.search()
自定义对象，添加属性并赋值
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
或
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
或
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
方法
this.changeName=changeName;
function changeName(name){
this.lastname=name;
}
}
person=new person("Bill","Gates",56,"blue");
RegExp 是正则表达式的缩写
创建
var patt1=new RegExp("e");
是否含有e
patt1.test("The best things in life are free")
是否含有e，当含有时返回e，没有时返回null
patt1.exec("The best things in life are free")
改变匹配内容（将e改为d）
patt1.compile("d");
函数
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
</body>
function functionname(){
}
function myFunction(var1,var2){
}
document.getElementById("demo").innerHTML=myFunction();
function myFunction(){
var x=5;
return x;
}
运算符
算数运算符
+ 加
- 减
* 乘
/ 除
% 求余数 (保留整数)
++ 累加
-- 递减
赋值运算符
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
比较运算符
== 等于 x==8 为 false
=== 全等（值和类型） x===5 为 true；x==="5" 为 false
!= 不等于 x!=8 为 true
> 大于 x>8 为 false
< 小于 x<8 为 true
>= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true
条件运算符
variablename=(condition)?value1:value2
+ 拼接字符串
txt1="5";
txt2="5"; 或 txt2=5;
txt3=txt1+txt2; 55
1.1.2 语法结构
if (true){
}
if (true){
}else{
}
if (true){
}else if(true){
}else{
}
switch(n){
case 1:
break;
case 2:
break;
default:
其他
}
for (var i=0;i<cars.length;i++){
}
var i=0,len=cars.length;
for (; i<len; ){
I++;
}
for (x in person){
}
while (true){
}
do{
}while (true);
跳出循环
break;
跳出本次循环，进行下一个循环
continue;
可以对 JavaScript 语句进行标记
label:{
break label;
continue label;
}
处理错误
1.语法错误
2.由于浏览器差异
3.由于来自服务器或用户的错误输出而导致的错误
4.其他
try{
// 可能出错的代码
// 或
// 主动抛出
throw "empty";
}
catch(err){
// 处理错误
}
指定出错时的错误方法
onerror=handleErr;
1.1.3 使用场景
JavaScript 表单验证
是否已填写所有必填项目
填写是否合法（正则或日期）
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt){
with (field){
if (value==null||value==""){
alert(alerttxt);return false
}else {
return true
}
}
}
function validate_form(thisform){
with (thisform){
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
function validate_email(field,alerttxt){
with (field){
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
1.2. 文档模型DOM（Document Object Model)
当网页被加载时，浏览器会创建页面的文档对象模型。
JavaScript 能够改变页面中的
所有 HTML 元素
所有 HTML 属性
所有 CSS 样式
对所有事件做出反应
DOM树
获取指定元素
通过 id 获取
var x=document.getElementById("intro");
通过标签名获取
var y=document.getElementsByTagName("p");
var y=x.getElementsByTagName("p");
通过类名获取
创建并追加元素
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
删除已有元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
重新设置地址
document.location.href="/index.html"
<!DOCTYPE html>
<html>
<body>
<script>
改变输出流（切记不要在文档加载完毕后调用）
document.write(Date());
改变 HTML元素 内容
document.getElementById("p1").innerHTML="New text!";
改变属性
document.getElementById("image").src="landscape.jpg";
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id){
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>
也可以在js中添加事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
其他例子：
1. onload 和 onunload 事件会在用户进入或离开页面时被触发。
<body onload="checkCookies()" onunload ="leave()">
2. 当输入内容改变时，获得焦点时，会调用
<input type="text" id="fname" onchange="upperCase()" onfocus="myFunction(this)">
3. 鼠标移动进入或离开时调用
<div onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠标移到上面</div>
4. 鼠标点下或松开时调用
<div onmousedown="mDown(this)" onmouseup="mUp(this)" >请点击这里</div>
计时事件（计时）
var t=setTimeout("javascript语句",毫秒);
clearTimeout(t)；
function timedMsg(){
5s后跳出弹框
var t=setTimeout("alert('5 秒！')",5000);
2s后修改元素内容
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
1s后调用函数
var t=setTimeout("timedCount()",1000)
清空计时器
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
1.3 浏览器对象模型（BOM）
浏览器对象模型（Browser Object Model）尚无正式标准。
Window 对象
表示浏览器窗口
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
document 也是 window 对象的属性之一
window.document.getElementById("header");
等价于
document.getElementById("header");
获取浏览器窗口的宽高（不包括工具栏和滚动条)
var w=window.innerWidth||document.documentElement.clientWidth|| document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight|| document.body.clientHeight;
打开新窗口
window.open()
关闭当前窗口
window.close()
移动当前窗口
window.moveTo()
调整当前窗口的尺寸
window.resizeTo()
Screen对象（window.screen对象）
可用的屏幕宽度（像素）
screen.availWidth
可用的屏幕高度（像素）
screen.availHeight
location对象(window.location 对象)
返回 web 主机的域名
location.hostname
返回当前页面的路径和文件名（域名后面的路径）
location.pathname
返回 web 主机的端口 （80 或 443）
location.port
返回所使用的 web 协议（http:// 或 https://）
location.protocol
返回当前url
location.href
加载新页面
window.location.assign("http://www.w3school.com.cn")
history对象(window.history对象)包含浏览器的历史
向前一页
history.back()
向后一页
history.forward()
navigator 对象(window.navigator 对象). 浏览器的信息
浏览器CodeName
navigator.appCodeName
浏览器name
navigator.appName
浏览器版本
navigator.appVersion
浏览器是否支持cookie
navigator.cookieEnabled
？
navigator.platform
？
navigator.userAgent
？
navigator.systemLanguage
消息框
警告框
alert("文本")
确认框
confirm("文本")
提示框
prompt("文本","默认值")
Cookie
<html>
<head>
<script type="text/javascript">
function getCookie(c_name){
判断Cookie长度是否大于0
if (document.cookie.length>0){
获取Cookie
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1){
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
添加Cookie（名，值，过期天数）
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie(){
username=getCookie('username')
if (username!=null && username!=""){
alert('Welcome again '+username+'!')
}else {
username=prompt('Please enter your name:',"")
if (username!=null && username!=""){
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
图像映射
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14"
onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10"
onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260"
onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body>
</html>
1.4 JavaScript 框架（库）
广受欢迎的框架
jQuery 最受欢迎
使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象)
提供 companion UI（用户界面）和插件
Prototype
提供用于执行常见 web 任务的简单 API(Application Programming Interface）
MooTools
含有一些轻量级的效果和动画函数
其他框架
YUI （ Yahoo! User Interface Framework）
涵盖大量函数的大型库，从简单的 JavaScript 功能到完整的 internet widget。
Ext JS
可定制的 widget，用于构建富因特网应用程序（rich Internet applications）。
Dojo
用于 DOM 操作、事件、widget 等的工具包。
script.aculo.us
开源的 JavaScript 框架，针对可视效果和界面行为。
UIZE
Widget、AJAX、DOM、模板等等。
许多不同的网站使用相同的 JavaScript 框架,把框架库存放在一个通用的位置供每个网页分享。
CDN (Content Delivery Network) 解决了这个问题.
2. Prototype
head中引用 Prototype
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
js方式
function myFunction(){
var obj=document.getElementById("h01");
obj.innerHTML="Hello Prototype";
}
onload=myFunction;
等价
Prototype 方式
function myFunction(){
$("h01").insert("Hello Prototype!");
$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
