学习前端你必须知道的JavaScript 基础和HTML DOM

时间 2019-11-30

标签学习前端必须知道 javascript 基础 html dom 栏目 JavaScript 繁體版

原文原文链接

主题javascript

JavaScript是什么html

JavaScript代码应该放置在哪里java

JavaScript语言node

JavaScript函数web

JavaScript事件编程

JavaScript对象浏览器

JavaScript HTML DOM 对象cookie

1、JavaScript是什么函数

JavaScript用来给HTML页面增长交互性工具

JavaScript是一种脚本语言（轻量级的程序设计语言）

JavaScript一般被嵌入到HTML页面中

JavaScript是一种解释语言（无须预先编译，边解释边执行）

2、JavaScript能作些什么

JavaScript给HTML设计者提供了一个编程工具

JavaScript能动态的向HTML页面中加入文本

JavaScript可以响应事件

JavaScript可以读写HTML元素

JavaScript可以用来验证数据

JavaScript可以探测访问者的浏览器

JavaScript可以用来建立cookies

3、JavaScript代码放在哪里，该如何放

使用标记（可使用该标记的type属性定义使用的脚本语言，如VBScript）

<html>
<head>
<script type=”text/javascript”>
…
</script>
</head>
<body>
<script type=”text/javascript”>
…
</script>
</body>
</html>
复制代码

脚本可以放在＜head＞或者＜body＞部分，译者注：固然放在＜head＞部分的通常是函数，或者是打印HTML头部元素，而在＜body＞部分能够是任意的JavaScript代码，只要输出的text符合HTML规范。也能够将JavaScript代码与页面分离，使用＜script＞标记的src 属性来定义要引入的JavaScript代码文件（.js文件）。

译注：在IE6.0和Firefox中测试，type=”text/javascript”将影响脚本的运行，建议删除。而用language=”javascript”代替

<html>
<head>
<script language=”JavaScript” 
Src=”http://somesite/myOwn JavaScript.js”>
</script>
<script language=”JavaScript” 
Src=”http://somesite/myOwn 2ndJavaScript.js”>
</script>
</head>
复制代码

4、JavaScript变量

你可使用var或者根本不须要就能够直接建立一个变量

Var straname=some value
Strid=some value
复制代码

若是你在一个函数中声明一个变量，那么该变量只在函数范围内有效

若是你在函数外声明一个变量，在你页面中的全部的函数均可以使用它

变量的生命周期是从你开始声明它开始，直到页面被关闭而结束

5、JavaScript消息框

u 警告框

用户只有按了“OK”后才能继续：alert(“sometext”)

u 确认框

用户只有按了“OK”或“Cancel”后才能继续：confirm(“cometext”)

译注：若是用户选择不一样的按钮将返回不一样的值，“OK”返回true，“Cancel”返回false你能够获取该值进行判断。

u 交互框

用户输入一个值后，再按“OK”或“Cancel”后才能继续: prompt(“sometext”,”defaultcalue”) 译注：将返回用户输入的值。

6、JavaScript语句

条件语句if,if..else,switch

循环语句 for loop,while loop

Try…catch

Throw

译注：此与java类同，除后两条外与C类同

7、JavaScript函数

函数包含的代码只有在一个事件或者一个调用发生的时候才会被执行。

译注：若是你把代码写在＜script＞中，而不写在函数中，那么页面一装载，代码就会被当即执行，因此咱们能够将代码放入函数中，而后用HTML事件来调用。

你也能够在页面任何地方调用你的函数

函数实例

<html>
<head>
<script language=”JavaScript” >
// 若是Alert(“Hello World!”)不是写在下面的函数中，页面一装载时，代码就会被当即执行
Function diaplaymessage(){
Alert(“Hello World!”)
}
</script>
</head>
<body>
<form>
<input type=”button” calue=”Click Me!” onclick=”diaplaymessage()”>
</form>
</body>
</html>
复制代码

注意：JavaScript代码关键字是区分大小写的，如上代码尽可能写小写（这里是word自动将首字母改成了大写）。

8、事件和事件处理器

每个web页面都包含有各类各样的事件，来激发事件处理函数

为了定义事件和事件处理函数，咱们能够在HTML标记中插入各类事件属性

各类事件的例子：

鼠标点击

一个网页或图片的装载

在HTML表单中选择一个输入框

按下键盘…

HTML中的各类事件属性：

Onabort 图片装入的时候被中断

Onblur 一个元素失去焦点

Onchange 域的内容被改变

Onclick 鼠标单击一个对象

Ondblclick 鼠标双击

Onerror 当装载文档或图片的时候发生错误

Onfocus 一个元素得到焦点

Onkeydown 一个键盘键被按下

Onkeypress 一个键盘键被按下或者保持在下

Onkeyup 一个键盘键被释放

Onload 一个页面或者图片完成装载

Onmousedown 鼠标键被按下

Onmousemove 鼠标移动

Onmouseout 鼠标移出某个元素

Onmouseup 释放鼠标键

Onreset 点击了reset按钮

Onresize 窗口被改变大小

Onselect 文本被选择

Onsubmit 点击了submit按钮

Onunload 用户退出页面

l Onload和unload事件

这两个事件当用户进入或者离开页面时被触发，onload事件通常用来检查访问者浏览器的类型和版本，而后根据这些来装载合适的web页面。这两个事件通常用来在当用户进入或退出页面时处理一些须要设置的cookies。

l Onfocus、onblur和onchange事件

这三个事件通常联合起来进行表单验证，例如当用户改变域中的内容时，checkEmail()函数将被调用：＜input type=”text” size=”30” id=”email” onchange=”checkEmail()”＞

Onblur演示例子：

<html><head>
<script language=”javascript”>
Function uppercase(){
Var x=document.getElementById(“fname”).value
Document.getElementById(“fname”).value=x.toUpperCase()
}
</script>
</head>
<body>
Enter your name:
<input type=”text” id=”fname” onblur=”uppercase()”>
</body>
</html>
复制代码

Onsubmit演示例子：

<html><head>
<script language=”javascript”>
Function validate(){
//基于验证逻辑返回true 或者false
}
</script>
</head>
<body>
<form action=”tryjs_submitpage.htm” onsubmit=”return validate()”>
Name(最多10个字符)<input type=”text” id=”fname” size=”20” ><br/>
Age(从1到100)(最多10个字符)<input type=”text” id=”age” size=”20” ><br/>
Email:<input type=”text” id=”email” size=”20” ><br/>
<br/>
<input type=”submit” value=”递交” >
</body>
</html>
复制代码

l onMouseOver和onMouseOut事件

这两个事件通常用来建立动画按钮，下面是一个关于onMouseOver事件的例子，当该事件被探测到时，出现一个警告框：

<a href=http://www.xgtimes.com onmouseover=”alert(‘一个onmouseover事件’);return false” > 
<img src=”xgtimeslogo.gif” width=”100” height=”30”></a>
复制代码

9、JavaScript对象

n JavaScript是一种面向对象的变成语言，一个JavaScript对象有属性和方法：

例如：String 对象有length属性和oUpperCase()方法：

<script language=” JavaScript”>
Var txt=”hello world!”
Document.write(txt.length)
Document.write(txt.roUpperCase())
</script>
复制代码

n JavaScript内建对象

u String

u Date

u Araay

u Boolean

u Math

n 建立你本身的JavaScript对象

u 两种不一样的方法

l 建立一个对象的直接实例

l 建立一个对象的模板

u 建立一个对象的直接实例

n 建立一个对象的实例，增长四个属性

personObj=new Object()
personObj.firstname=”john”
personObj.lastname=”doe”
personObj.age=50
personObj.eyecolor=”blue”
复制代码

n 增长一个eat的方法，这eat()是一个已经定义或须要定义的函数，这与java 中方法的定义是有很大不一样的

personObj.eat=eat

u 建立一个对象的模板

n 模板定义了JavaScript对象的结构

Function person(firstname,lastname,age,eyecolor){
This.firstname=firstname;
This.lastname=lastname;
This.age=age;
This.eyecolor=eyecolor;
}
复制代码

注意模板仅仅是个函数

q 一旦你有了模板，你就能够建立新的对象实例

myFather=new person(“John”,”Doe”,50,”blue”);
myMother=new person(“Sally”,”Rally”,48,”green”);
复制代码

q 你也能增长一些方法到person对象，这也是在模板中完成的。

Function person(firstname,lastname,age,eyecolor){
This.firstname=firstname;
This.lastname=lastname;
This.age=age;
This.eyecolor=eyecolor;
This.newlastname=newlastname;
}
复制代码

方法就是JavaScript函数

Function newlastname(new_lastname){
This.lastname=new_lastname
}
复制代码

10、HTML DOM

HTML DOM为HTML定义了一个标准的对象集，和一个标准的访问和操做HTML文档的方法。只要它们包含文本和属性，全部的HTML元素均可以经过DOM访问，包括删除修改内容，建立元素。HTML DOM 是一个独立的平台和语言。它能够在任何象Java,JavaScript,VBScript语言中使用。

u HTML DOM 对象：

u Anchor对象

u Document对象

u Event对象

u Form和form Input对象

u Frame,Frameset和IFrame对象

u Image对象

u Location对象

u Navigator对象

u Option和Select对象

u Screen对象

u Table,TableHeader,TableRow,TableData对象

u Window对象

11、document对象

写入文本到输出流：

<html>
<body>
<script language=”javascript”>
Document.write(“hello world”)
</script>
</body>
</html>
写入格式化文本到输出流：
<html>
<body>
<script language=”javascript”>
Document.write(“<h1>hello world<h1>”)
</script>
</body></html>
使用getElementById()
<html>
<body>
<script language=”javascript”>
Function getElement(){
Var x=document. getElementById(“myHeader”)
Alert(“I am a ” + x.tagName + “ element”)
}
</script>
<h1 id=”myHeader” onclick=”getElement()”>点我看我是什么元素
</body>
</html>
使用getElementsByName()
<html>
<head>
<script language=”javascript”>
Function getElements(){
Var x=document. getElementByName(“myInput”)
Alert(x.length + “ elements!”)
}
</script>
</head>
<body>
<input name=”myInput” type=”text” size=”20”><br/>
<input name=”myInput” type=”text” size=”20”><br/>
<input name=”myInput” type=”text” size=”20”><br/>
<br/
<input type=”text” onclick=”getElements” value=”有多少元素命名为’myInput’”><br/>
</body>
</html>
返回文档中第一个锚点的innerHTML（内部文字）
<html>
<body>
<a name=”first”>first anchor</a><br/>
<a name=”second”>second anchor</a><br/>
<a name=”third”>third anchor</a><br/>
</br>
复制代码

文档中第一个锚点的InnerHTML ：

<script language=”javascript”>
Document.write(document.anchors[0].innerHTML)
</script>
</body>
</html>
访问集合中的一项：
<html>
<body>
<form id=”Form1” name=”Form1”>
名字：<input type=”text”>
</form>
<p>你可使用项目的数字或者名称访问集合中的项：
</p>
<script language=”javascipt”>
Document.write(“<p>第一个表单的名字是：”+document.forms[0].name+”</p>”)
Document.write(“<p>第一个表单的名字是：”+document.getElementById(“form1”). name+”</p>”)
</body>
</html>
复制代码

12、事件对象

u 什么是光标的位置

<html>
<head>
<script language=”javascript”>
Function show_coords(event){
X=event.clientx
Y=event.clientY
alert("x:"+X+" y:"+Y)
}
</script>
</head>
<body onmousedown=”show_coords(event)”>
<p>点击文档，将出现一个警告框来显示光标的X，Y坐标</p>
</body>
</html>
u 什么是被按下键的unicode码
<html>
<head>
<script language=”javascript”>
Function whichButton(event){
Alert(event.keyCode)
}
</script>
</head>
<body onkeyup=”whichButton(event)”>
<p>注意：当测试该例时，保证正确的窗口处于焦点状态，按下键后，一个警告框显示按下去的那键的unicode码</p>
</body></html>
复制代码

u 哪个元素被单击

<html>
<head>
<script language=”javascript”>
Function whichElement(e){
Var targ
If(!e) var e=window.event
If(e.target) targ=e.target
Else if(e.srcElement) targ=e.srcElement
If(targ.nodeType==3) targ=targ.parentNode
Var tname
Tname=targ.tagName
Alert(“你单击了一个” + tname + “ element.”)
}
</script>
</head>
<body onmousedown=”whichElement(event)”>
<p>单击文档的任何地方，一个警告框显示你单击饿元素的标记名</p> 
<h3>this is a header</h3>
<p>这是一个段落</p>
<img src=”ball.gif” width=”29” height=”28” alt=”ball”>
</body></html>
复制代码

u 哪一种类型事件被发生

<html>
<head>
<script language=”javascript”>
Function whichType(event){
Alert(event.type)
}
</script>
</head>
<body onmousedown=”whichType(event)”>
u <p>单击文档，一个警告框显示哪一种类型事件被发生
</p>
</body></html>
复制代码