JavaScript 基础和HTML DOM

最新推荐文章于 2024-07-24 11:09:48 发布

Kovaci

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量79

点赞数

分类专栏： java基础学习 java基础知识文章标签： javascript

原文链接：https://me.csdn.net/huangrong520raoting

版权

java基础学习同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

java基础知识

3 篇文章 0 订阅

订阅专栏

JavaScript 基础和HTML DOM

主题

JavaScript是什么

JavaScript代码应该放置在哪里

JavaScript语言

JavaScript函数

JavaScript事件

JavaScript对象

JavaScript HTML DOM 对象

一、JavaScript是什么

JavaScript用来给HTML页面增加交互性

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

JavaScript通常被嵌入到HTML页面中

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

二、JavaScript能做些什么

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

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

JavaScript能够响应事件

JavaScript能够读写HTML元素

JavaScript能够用来验证数据

JavaScript能够探测访问者的浏览器

JavaScript能够用来创建cookies

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

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

<html>

<head>

…

</script>

</head>

<body>

…

</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>

Src=”http://somesite/myOwn JavaScript.js”>

</script>

Src=”http://somesite/myOwn 2ndJavaScript.js”>

</script>

</head>

四、JavaScript变量

你可以使用var或者根本不需要就可以直接创建一个变量

Var straname=some value

Strid=some value

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

如果你在函数外声明一个变量，在你页面中的所有的函数都可以使用它

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

五、JavaScript消息框

u 警告框

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

u 确认框

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

译注：如果用户选择不同的按钮将返回不同的值，“OK”返回true，“Cancel”返回false你可以获取该值进行判断。

u 交互框

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

六、JavaScript语句

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

循环语句 for loop,while loop

Try…catch

Throw

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

七、JavaScript函数

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

译注：如果你把代码写在<script>中，而不写在函数中，那么页面一装载，代码就会被立即执行，所以我们可以将代码放入函数中，然后用HTML事件来调用。

你也可以在页面任何地方调用你的函数

函数实例：

<html>

<head>

// 如果Alert(“Hello World!”)不是写在下面的函数中，页面一装载时，代码就会被立即执行

Function diaplaymessage(){

Alert(“Hello World!”)

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

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

八、事件和事件处理器

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

为了定义事件和事件处理函数，我们可以在HTML标记中插入各种事件属性

各种事件的例子：

鼠标点击

一个网页或图片的装载

鼠标在web页面的热区移动

在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” οnchange=”checkEmail()”>

Onblur演示例子：

Function uppercase(){

Var x=document.getElementById(“fname”).value

Document.getElementById(“fname”).value=x.toUpperCase()

}

</script>

</head>

<body>

Enter your name:

</body>

</html>

Onsubmit演示例子：

Function validate(){

//基于验证逻辑返回true 或者false

}

</script>

</head>

<body>

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/>

</body>

</html>

l onMouseOver和onMouseOut事件

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

九、JavaScript对象

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

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

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

}

十、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对象

十一、document对象

写入文本到输出流：

<html>

<body>

Document.write(“hello world”)

</script>

</body>

</html>

写入格式化文本到输出流：

<html>

<body>

Document.write(“<h1>hello world<h1>”)

</script>

</body></html>

使用getElementById()

<html>

<body>

Function getElement(){

Var x=document. getElementById(“myHeader”)

Alert(“I am a ” + x.tagName + “ element”)

}

</script>

<h1 id=”myHeader” οnclick=”getElement()”>点我看我是什么元素

</body>

</html>

使用getElementsByName()

<html>

<head>

Function getElements(){

Var x=document. getElementByName(“myInput”)

Alert(x.length + “ elements!”)

}

</script>

</head>

<body>

<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 ：

Document.write(document.anchors[0].innerHTML)

</script>

</body>

</html>

访问集合中的一项：

<html>

<body>

名字：<input type=”text”>

</form>

<p>你可以使用项目的数字或者名称访问集合中的项：

</p>

Document.write(“<p>第一个表单的名字是：”+document.forms[0].name+”</p>”)

Document.write(“<p>第一个表单的名字是：”+document.getElementById(“form1”). name+”</p>”)

</body>

</html>

十二、事件对象

u 什么是光标的位置

<html>

<head>

Function show_coords(event){

X=event.clientx

Y=event.clientY

alert("x:"+X+" y:"+Y)

}

</script>

</head>

<p>点击文档，将出现一个警告框来显示光标的X，Y坐标</p>

</body>

</html>

u 什么是被按下键的unicode码

<html>

<head>

Function whichButton(event){

Alert(event.keyCode)

}

</script>

</head>

<p>注意：当测试该例时，保证正确的窗口处于焦点状态，按下键后，一个警告框显示按下去的那键的unicode码</p>

</body></html>

u 哪一个元素被单击

<html>

<head>

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>

<p>单击文档的任何地方，一个警告框显示你单击饿元素的标记名</p>

<h3>this is a header</h3>

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

</body></html>

u 哪种类型事件被发生

<html>

<head>

Function whichType(event){

Alert(event.type)

}

</script>

</head>

u <p>单击文档，一个警告框显示哪种类型事件被发生

</p>

</body></html>

       转自https://me.csdn.net/huangrong520raoting

Kovaci

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础和HTML DOM

JavaScript 基础和HTML DOM 主题JavaScript是什么JavaScript代码应该放置在哪里JavaScript语言JavaScript函数JavaScript事件JavaScript对象JavaScript  HTML DOM 对象一、J
复制链接

扫一扫

专栏目录