JavaScript—W3school

2023-11-02 23:38•javascript•阅读 3484

一、JavaScript基础

1.写入HTML输出

2.对事件作出反应

3.改变HTML内容

4.改变HTML图像

5.改变HTML样式

6.验证输入

Function myFunction(){

Var x=document.getElementById("demo").value;

If(X==""||isNaN(x)){

Alert("not mumeric");

}

</script>

7.外部的JavaScript

<!DOCTYPE html>

<html>

<body>

</body>

</html>

8.通过指定的id来访问html元素，并改变内容

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p >My First Paragraph</p>

Document.getElementById("demo").innerHTML="my first JavaScript";

</Script>

</body>

</html>

9.document.write()仅向文档输出写内容，如果在文档已完成加载后执行document.write，整个hrml页面将被覆盖。

<!DOCTYPE html>

<html>

<body>

<p> bla bal paragraph</p>

<button onclick="myFunction()">balbal</button>

Function myfunction()

{

Document.write("文档消失了");

}

</script>

</body>

</html>

10.JavaScript变量和数据类型

Var x = bla;变量必须以字母开头；变量也能以$和_符号开头；变量名称对大小写敏感。

文本值：name="bill gates"

Var pi=3.141592653589793

Var name=“bill gates”

var name="Gates", age=56, job="CEO";

var name="Gates",

age=56,

job="CEO";

var carname; carname= undefined；

字符串中的引号

var answer="Nice to meet you!";

var answer="He is called 'Bill'";

var answer='He is called "Bill"';

数字中的小数点

var x1=34.00; //使用小数点来写

var x2=34;

var y=123e5; // 12300000

var z=123e-5;

JavaScript中布尔值

Var x = true；

Var y = false；

JavaScript中的数组

Var cars = new Array();

Cars[0] = "audi";

Cars[1]="bmw";

Cars[2]="volvo";

Var cars = new Array("Audi","Bmw","volvo");

Var cars =["audi","bmw","volvo"];

JavaScript对象和属性寻址

var person={firstname：“bill",lastname:"gates",id:5566};

Var person={

Firstname:"bill",

Lastname:"gates",

Id:5566

};

Name=person.lastname;

Name=person["lastname"];

Undefined和Null

Undefined这个变量不含有值，可以通过将变量设置为null来清空变量

Cars = null;

Person = null;

声明变量类型

Var carname = new String;

Var x = new Number;

Var y = new Boolean;

Var cars = new Array;

Var person = new Object;

var carname="Volvo";

document.getElementById("demo").innerHTML=carname;

11.对象与函数

函数语法

Function funtionname（）

{

实体

}

Function funtionname（var1 var2）

{

实体

}

function myfountion()

{

实体

return ;

}

javaScript 中变量作用域和生命周期

局部变量：函数快内函数运行以后被删除

全局变量：整个页面的脚本都可以访问页面关闭以后被删除

字符创运算符：

txt1="What a very";

txt2="nice day";

txt3=txt1+txt2;

如果把数字和字符串相加最后结果是字符串

12.JavaScript 错误 throw、 try catch

13.JavaScript表单验证

表单验证是数据被送到服务器之前对HTML表单中的数据进行验证。

1.用户是否已填写表单中的必填项目

fuction validate_required(field,alerttxt)

{

with(field)

{

if(value==null||value="")

{

alert(alerttxt);

return false;

}else{

return true;

}

<html>

<head>

function validate_required(field,alerttxt)

{

with(field)

{

if(value==null||value=="")

{

alert(alerttxt);

return false;

}

function validate_form(thisform)

{

with(thisform)

{

if(validate_required(email,"must be filled out!")==false)

{

email.focus();

return false;

}

</script>

</head>

<body>

Email:<input type="text" name="email" size="30">

</form>

</body>

</html>

2.用户输入的邮件地址是否合法

fuction 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;

}

<html>

<head>

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>

Email: <input type="text" name="email" size="30">

</form>

</body>

</html>

3.用户是否已输入合法的日期

4.用户是否在数据域中输入文本。

二、JS HTML DOM

1.DOM 文档树

改变HTML元素的内容（innerHTML）

<!DOCTYPE html>

<html>

<body>

<img >

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

2.改变HTML元素的样式（CSS）

Document.getElementById(id).style.property=new style;

<p >Hello World!</p>

document.getElementById("p2").style.color="blue";

</script>

<h1 >My Heading 1<h/1>

</button>

3.对HTML DOM 事件作出反应

当用户点击鼠标

当网页已加载时

当图像已加载时

当鼠标移动到元素上时

当输入字段被改变时

当提交HTML表单时

当用户触发按键时

1.HTML事件属性

2.使用javascript 向HTML DOM来分配事件(向button元素分配onclick事件)

document.getElementById("myBtn").onclick=function()

{

displayDate();

}

3.onload和onunload事件

onload和onunload事件会在用户进入或离开页面时被触发。

onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确的版本。

onload和onunload事件可用于处理cookie。

4.onchange事件

当用户改变输入字段的内容时，会调用upperCase（）函数。

5.onmouseover和onmouseout事件

用户鼠标移至html元素上方或移除元素时触发函数

6.onmousedown、onmouseup以及onclick事件

点击鼠标按钮：onmousedown

释放鼠标按钮：onmouseup

完成鼠标点击时;onclick

4.添加删除HTML元素

创建新的HTML元素，然后向一个已存在的元素追加该元素

<div >

<p >这是一个段落</p>

<p >这是另一个段落</p>

</div>

var para=document.createElement("p");

//创建新的<p>元素

var node=document.createTextNode("这是新段落");

//创建文本节点

para.appendChild(node);

//向P元素追加文本节点

var element=document.getElementById("div1");

//找到一个已有的元素

element.appendChild(para);

//向这个已有的元素追加新元素

</script>

删除已有的元素

<div >

<p >这是一个段落</p>

<p >这是另一个段落</p>

</div>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

5.JavaScript对象

内建对象：string Date Array.

访问对象属性：objectName.porpertyName

创建新对象：1.定义并创建对象的实例。2.使用函数来定义对象，然后创建新的对象实例。

person = new Object();

person.firstname="bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

person={firstname:"John",lastname:"Doe",age:50,eyecolot:"blue"};

对象构造器

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

实例化对象

var myFountion=new person("bill","gates",56,"blue");

var myMother=new person("steve","Jobs",48,"greeen");

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

x=person.firstname;

对象添加方法

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

this.changeName=changeName;

funtion changeName(name)

{

this.lastname=name;

}

myMother.changeName("Ballmer");

循环遍历对象的属性

var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)

{

txt=txt + person[x];

}

1.JavaScript Number对象

JavaScript数字可以使用也可以不使用小数点来书写，支持指数表达。

所有JavaScript数字均为64位。数字精度整数为15位。小数的最大位数是17。

十六进制和八进制数。

var y=0377;

var z=0xFF;

属性和方法

MAX VALUE 可表示的最大的数

MIN VALUE 克表示最小的数

NEGATIVE INFINITIVE 负无穷大溢出时返回该值

POSITIVE INFINITIVE 正无穷大，溢出时返回该值

NAN 非数字值

prototype 使有能力向对象添加属性和方法

constructor 返回创建此对象的Number函数的引用

方法

toString（）把数字转换成字符串，使用指定的基数把对象的值

toLocalString（）把数字转换成字符串，使用本地数字格式顺序

toExponential（）转换成位指数计数法

toFixed（）把数字转换成字符串，结果的小数点后有指定位数的数字

toPrecision（）把数字格式化为指定的长度

valueOf（）返回一个Number对象的基本数字值

2.字符串对象http://www.w3school.com.cn/jsref/jsref_obj_string.asp

2.1计算字符串的长度：Var s=“巴拉巴拉” s.length();

2.1为字符串添加样式：

s.big();大字体。

s.small();小字体。

s.bold();加粗。

s.italics(); 倾斜。

s.blink();闪烁。

s.fixed();

s.striked();删除

s.fontcolor("Red");颜色

s.fontsize(16);字号

2.3indexOf（）方法

定位字符串中某一个指定的字符首次出现的位置。

match（）方法

如何使用match（）来查找字符串中特定的字符，兵器如果找到的话，则返回这个字符。

replace（）

使用replace（）方法在字符串中用某些字符替换另一些字符。

str.replace(/Microsoft/,"W3School")

3.Date对象参考手册http://www.w3school.com.cn/jsref/jsref_obj_date.asp

Date（）；返回当日的日期和时间。

getTime();返回从1970年1月1日至今的毫秒数

setfullYear();设置具体的日期

toUTCstring();将当日的日期转换为字符串。

getDate（）；使用方法和数字来显示星期，不仅仅是数字。获得星期中的第几天。

获得钟表：

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

m=checkTime(m)

s=checkTime(s)

4.数组对象http://www.w3school.com.cn/jsref/jsref_obj_array.asp

创建数组

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for in声明

For(x in mycars)

{

document.write(mycars[x]+"<br/>")

}

合并两个数组

var arr = new Array(3)

arr[0] = "George"

arr[1]="John"

arr[2]="Thomas"

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1]="Adrew"

arrr[2]="Martin"

document.write(arr.concat(arr2))

</script>

用数组的元素组成字符串

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join());

document.write("<br/>");

document.write(arr.join("."));

文字数组 sort

var arr = new Array(6)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

arr[3] = "James"

arr[4] = "Adrew"

arr[5] = "Martin"

document.write(arr + "<br/>")

document.write(arr.sort())

数字数组 sort

function sortNumber(a,b)

{

return a - b;

}

var arr = new Array(6)

arr[0]="1"

arr[1]="50"

arr[2] = "10"

arr[3] = "10"

arr[4] = "10"

arr[5] = "10"

5.Boolean 对象

用于非逻辑值转换为逻辑值（true和false）

创建逻辑值为false的对象：

var myBoolean = new Boolean();

=new Boolean(0);

=new Boolean(null);

=new Boolean("");

=new Boolean(false);

=new Boolean(NaN):

创建逻辑值为true的对象：

var myBoolean=new Boolean(1);

var myBoolean=new Boolean(true);

var myBoolean=new Boolean("true");

var myBoolean=new Boolean("false");

var myBoolean=new Boolean("Bill Gates");

6.Math对象

document.write(Math.round(4.7))

document.write(Math.random())

document.write(Math.floor(Math.random()*11))

7.JavaScript RegExp对象

用于规定在文本中检索的内容

通过new关键字定义RegExp对象。

var patt1 = new RegExp("e");

RegExp对象的方法：

test（）；检索字符串中的指定值。

exec（）；检索字符串中的指定值，返回值是被找到的值。如果没有发现匹配，返回null。

compile（）；用于改变RegExp。既可以改变检索模式，也尅添加或删除第二个参数。

// 搜索模式由e变为d。

var patt1 = new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

8.windows浏览器对象

window对象，表示浏览器窗口；

所有javascript全局对象，函数以及变量均称为window对象的成员。

全局变量是window对象的属性；

全局函数是window对象的方法；

HTML DOM的document也是window对象的属性之一。

8.1window尺寸（窗口尺寸不包括工具栏和滚动条）

window.innerHeight:浏览器窗口的内部高度。

window.innerWidth ：浏览器窗口内部宽度。

window.open() 打开窗口

window.close（）关闭窗口

window.moveTo() 移动当前窗口

window.resizeTo() 调整当前窗口大小

9.window.screen对象包含有关用户的屏幕信息。

sceeen.availWidth 可用的屏幕宽度（以像素计，减去界面特性，比如窗口任务栏）

screen.vaaiWidth 可用的屏幕高度

10.Window.Location 对象用于获得当前页面的地址（URL），并把浏览器重定向到新的页面

location.hostname 返回web主机的域名

location。pathname返回当前页面的路径和文件名

location.port返回web主机的端口（80,443）

location。protocol返回所使用的web协议（http：//或https：//)

location.href 属性返回当前页面的整个URl。

Location.pathname属性返回URL的路径名

Window.Location Assign location.assign()方法加载新的文档。

10.window.History

window.history 对象在编写时可不使用window这个前缀。

history.back（）与在浏览器点击后腿按钮相同。

history.forward() 与在浏览器中点击按钮向前相同。

11.window.navigator（包含有关访问者浏览器的信息）

window.navigator对象在编写时可不使用window这个前缀。

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";

txt+= "<p>Browser Name: " + navigator.appName + "</p>";

txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";

txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";

txt+= "<p>Platform: " + navigator.platform + "</p>";

txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

12.JavaScript信息框

三种消息框：警告框、确认框、提示框。

警告框：alert("文本");

确认框：confirm（“文本”）；

提示框：prompt（“文本”，“默认值”）；

13.JavaScript计时事件Timming

通过计时事件，做到在一个设定的时间间隔之后执行代码，

计时事件方法：

setTimeout() 未来的某时执行的代码

clearTimeout()取消setTimeout（）

var t = setTimeout("javascript语句",毫秒）

clearTimeout(t);

14.Cookies

是存储在访问者计算机中的变量，每当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie。可以使用JavaScript来创建和获得cookie。

名字cookie，密码cookie，日期cookie。

<html>

<head>

function getCookie(c_name)

{

if (document.cookie.length>0)

{

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)

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>

上一篇 »html标签中的 MIME 类型
下一篇 »HTML 相关

JavaScript—W3school

相关推荐

php安全过滤类

将XML转为HTML

HTML5 JavaScript API

JavaScript RegExp 对象，来自w3school

CSS3 Transform 变形

css 动画【转】

asp.net、html、javascript等比较有用的网站

JS，Jquery，Ajax，Json，Xml，Html，CSS帮助文档