JavaScript—W3school

一、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>

<button type="button" onclick="myFunction()">点击这里</button>
7.外部的JavaScript

<!DOCTYPE
html>

<html>

<body>

</body>

</html>

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

<!DOCTYPE
html>

<html>

<body>

<h1>My
First Web Page</h1>

<p
id="demo">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;

<p
id="demo"></p>
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>
<script type="text/javascript">
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>

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

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

二、JS HTML DOM

1.DOM 文档树

改变HTML元素的内容（innerHTML）

<!DOCTYPE
html>

<html>

<body>

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

</script>

</body>

</html>

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

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

<p
id="p2">Hello World!</p>

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

</script>

<h1
id="id1">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元素，然后向一个已存在的元素追加该元素

<p id="p1">这是一个段落</p>

<p id="p2">这是另一个段落</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>

删除已有的元素

<p id="p1">这是一个段落</p>

<p id="p2">这是另一个段落</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>
<script type="text/javascript">
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>

JavaScript—W3school的更多相关文章

Node.js实战(五)之必备JavaScript基础
阅读本章的话,个人觉得之前使用过JavaScript,完全轻松. Node.js的核心类型有:number.boolean.string以及object.另外两种类型分别是函数合数组,其实它们你可以理 ...
Qt的Script、Quick、QML的关系与总结
背景最近在学QML,感觉也不难,就是一直以来接触 Qt 的脚本类的东西的顺序是Script.Quick1.Declarative.Quick2.QML.那么每一个都是干什么的呢,这些东西搞的我有点混 ...
Cookie和localStorage的查询、设置、修改及删除
感谢:链接(视频讲解很详细) cookie:是一种字符串表示的数据,用于在本地记录用户的基本信息(账号,密码等),具有时限性. 数据的具体内容: (图源上文视频链接) localStorage:与co ...
javascript 全局对象--w3school
JavaScript全局对象 1. decodeURI()解析某个编码的URI. 2.decodeURInComponent()解析一个编码的URI组件. 3.encodeURI()把字符串编码为U ...
关于JavaScript lastIndexOf() 方法 w3school.com.cn写的不一定全对
关于JavaScript lastIndexOf() 方法 w3school.com.cn的表述是定义和用法 lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的 ...
w3school之JavaScript学习笔记
在前端测试过程中,少不了听到开发说到JS,JS在webJavaScript 是浏览器脚本语言(简称JS),主要用来向HTML页面添加交互行为. 学习网址:http://www.w3school.com ...
w3school JavaScript 简介
JavaScript 简介转自: http://www.w3school.com.cn/js/js_intro.asp JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言 ...
[W3School]JavaScript教程学习
JavaScript 简介 JavaScript 是世界上最流行的编程语言.这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript ...
JavaScript RegExp 对象(来自w3school)
RegExp 对象用于规定在文本中检索的内容. 什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp 就是这种模式. 简单的 ...

随机推荐

无法通过 128 (在表空间 TEMP 中) 扩展 temp 段
1.查看表空间中数据文件存储的路径以及是否可以自动扩展 SELECT TABLESPACE_NAME, BYTES/1024/1024 FILE_SIZE_MB, FILE_NAME FROM DBA ...
ios 好去处
1.王巍的博客(我们都叫它喵神,他很萌哒) 链接:http://onevcat.com/ (难度指数:※※※※※)理由:他的swift的新书讲解的非常好,但不适合入门,进阶的话这是很适合的一本书.其他 ...
java初学的几个问题
1. 请问配置JDK时环境变量path和JAVA_HOME的作用是什么? 作用:告诉操作系统编译器运行的路径和生成的类路径.这样java源程序才可以进行编译和运行. 以下4-7题请在JDK环境下编译和 ...
jbpm4.4 demo1
package cn.itcast.a_helloworld; import java.util.List; import org.jbpm.api.Configuration; import org ...
android 数据库的升级与降级解决方案
在我们写的程序中不避免的需要升级.或者说需要改变业务逻辑,那这个时候就需要修改数据库的字段,来适应不同的表结构我们一般写数据库都是操作一个继承至 SQLiteOpenHelper 的类然后我们需要 ...
Android应用换肤总结
换肤,我们都很熟悉,像XP的主题,塞班的主题.看过国外的一些技术博客,就会发现国内和国外对软件的,或者说移动开发的软件的需求的不同.国外用户注重社交.邮件等功能,国内用户则重视音乐.小说.皮肤等功能, ...
【推荐】JAVA基础◆浅谈3DES加密解密
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
Android基本功：Handler消息传送机制
一.什么是UI线程当程序第一次启动的时候,Android会同时启动一条主线程( Main Thread). 主要负责处理与UI相关的事件. 二.UI线程存在的问题出于性能优化考虑,Android的 ...
[Whole Web] [Node.js, PM2] Controlling runaway apps using pm2
shows how to enable features in your pm2 config file that allow you to prevent runaway apps from bri ...
quartz 报错：java.lang.classNotFoundException
最近在做一个调度平台改造的项目,quartz在测试环境跑的是单机环境,生产上两台服务器做集群. 测试环境是ok的,生产上线后报错,一个类java.lang.classNotFoundException ...

JavaScript—W3school

JavaScript—W3school的更多相关文章

随机推荐

热门专题