JavaScript

最新推荐文章于 2024-10-31 17:48:34 发布

wangjinyong

最新推荐文章于 2024-10-31 17:48:34 发布

阅读量65

点赞数

分类专栏： JavaScript 文章标签： JavaScript 浏览器脚本正则表达式 HTML ViewUI

本文链接：https://blog.csdn.net/wangjinyong/article/details/83878551

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先了解一下DOM(Document Object Model)：文档对象模型

它是把整个html文档当成一个对象，html文档中的每个标签也是一个对象。这样的话整个就构成了一棵树。整棵树也是一个对象。

所以整个JavaScript包含三部分语法(JavaScript都可以操作这三部分)：

1、基础语法

2、DOM(Document Object Model)：文档对象模型

3、BOM(Brower Object Model)：浏览器对象模型

什么是 JavaScript？
JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
所有的人无需购买许可证均可使用 JavaScript。

JavaScript是由浏览器执行的语句序列。
JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

JavaScript作用：
验证表单、检测浏览器、创建cookies、对事件作出响应、动态显示等等。

JavaScript区分大小写

-----------------------------------------------------------------------------------------

在哪里放置JavaScript：
当页面载入时，会执行位于body部分的JavaScript代码。
当被调用时或被事件触发时，位于head部分的JavaScript才会被执行。

-----------------------------------------------------------------------------------------

把一段JavaScript插入HTML页面：
<head>
<script type="text/javascript">
...
</script>
</head>
其中<script type="text/javascript">标签告诉浏览器这是JavaScript代码。

HTML页面引入外部JavaScript文件：
<head>
<script language="javascript" src="/js/check.js"></script>
</head>

----------------------------------------------------------------------------------------

JavaScript基本语法：

JavaScript中声明变量使用
var x=5;
var carname="Volvo";

数组

var arr = new Array(3);

arr[0] = "asdf";

arr.length;//数组的长度

时间

var t = new Date();

t.getHours();//得到当前小时

----------------------------------------------------------------------------------------

JavaScript支持If、If...else、Switch、for循环、while循环、break语句、continue语句、try...catch语句等等。

JavaScript中有三种消息框：警告框、确认框、提示框。
警告框：alert("文本");
确认框：confirm("文本");
提示框：prompt("文本","默认值");

JavaScript函数：
将脚本编写为函数，就可以避免页面载入时执行该脚本。
函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。

创建函数的语法：
function 函数名(var1,var2,...,varX)
{
代码．．．
}
var1, var2等指的是传入函数的变量或值。

例子：

<html>
    <head>
        <script type="text/javascript">
            function displaymessage()
            {
                alert("Hello World!")
            }
        </script>
    </head>
    <body>
        <form>
            <input type="button" value="Click me!" οnclick="displaymessage()" >
        </form>
    </body>
</html>

假如上面的例子中的 alert("Hello world!!") 没有被写入到函数中，那么当页面被载入时它就会执行。现在，当用户击中按钮时，脚本才会执行。我们给按钮添加了 onClick 事件，这样按钮被点击时函数才会执行。

JavaScript的return语句：
return 语句用来规定从函数返回的值。
因此，需要返回某个值的函数必须使用这个 return 语句。

function prod(a,b)
{
x=a*b
return x
}

----------------------------------------------------------------------------------------

JavaScript事件：（重点）
事件是可以被JavaScript侦测到的行为。
事件通常与函数配合使用，当事件发生时函数才会执行。

在HTML标签可以定义以下事件动作，常用事件列表：

onabort 图像加载被中断
onblur 元素失去焦点 ---
onchange 用户改变域的内容
onclick 鼠标点击某个对象 ---
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点 ---
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开 ---
onmouseover 鼠标被移到某元素之上 ---
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面

----------------------------------------------------------------------------------------

DOM对象：

document对象：整个文档的对象。(是window对象和frame对象的一个属性，用来显示窗口或框架内的一个文档)

BOM对象：

window对象：浏览器窗口。(是顶层对象，不是另一个对象的属性)

window.status：浏览器下边的状态栏。

window.open("")：打开一个新窗口

location对象：获取或设置现有文档的URL。

history对象：先前访问过的URL的历史列表。

history.back：

当使用window对象的时候，可以省略window字样。

window对象的属性：

1、document：显示当前文档 (本身也是一个对象)

2、frame：窗口里的一个框架 (本身也是一个对象)

3、history：窗口的历史URL列表 (本身也是一个对象)

4、location：窗口的完整URL路径 (本身也是一个对象)

5、navigator：浏览器对象 (本身也是一个对象)

6、screen：显示屏对象 (本身也是一个对象)

7、defaultStatus：缺省的状态条信息

8、length：窗口内的框架数

9、name：窗口的名字

10、status：状态条中的信息

window对象的方法：

1、alert()：打开一个消息框

2、close()：关闭窗口

3、confirm()：打开一个消息框

4、open()：打开一个新窗口

5、prompt()：打开一个promp输入框

6、blur()：把焦点从指定窗口移开

7、focus()：把指定的窗口带到前台

----------------------------------------------------------------------------------------

Document 对象的属性和方法：

body 属性：提供对 <body> 元素的直接访问。
cookie 属性：设置或返回与当前文档有关的所有 cookie。
domain 属性：返回当前文档的域名。
lastModified 属性：返回文档被最后修改的日期和时间。
referrer 属性：返回载入当前文档的文档的 URL。
title 属性：返回当前文档的标题。
URL 属性：返回当前文档的 URL。

document.getElementById("id") 方法：返回对拥有指定 ID 对象的引用。

document.getElementsByName("name") 方法：返回带有指定名称的对象的集合。

document.getElementsByTagName("tagName") 方法：返回带有指定标签名的对象集合。

document.write("Hello world") 方法：可向文档写入 HTML 表达式或 JavaScript 代码。

document.writeln("Hello world") 方法：等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

document.close() 方法：关闭一个由 document.open 方法打开的输出流，并显示选定的数据。

document.open("text/html","replace")方法：打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。

mimetype 可选。规定正在写的文档的类型。默认值是 "text/html"。
replace 可选。当此参数设置后，可引起新文档从父文档继承历史条目。

----------------------------------------------------------------------------------------

JavaScript内置对象：

this：指当前对象，即指当前标签。

字符串对象：
var txt="Hello world!";

日期对象：
var myDate=new Date();

数组对象：
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

逻辑对象：
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");

算数对象：Math

RegExp对象(正则表达式对象)

创建自己的JavaScript对象：

personObj=new Object()

Navigator对象：

JavaScript包含一个名为Navigator的对象，它可以检测访问者的浏览器信息，包括浏览器类型、版本等等。
以便检测是否此JavaScript的所有代码都能在这个浏览器上运行。
var browser=navigator.appName;//得到浏览器名称
var b_version=navigator.appVersion;//得到浏览器版本号

<html>
	<body>
		<script type="text/javascript">
			var browser=navigator.appName
			var b_version=navigator.appVersion
			var version=parseFloat(b_version)
			document.write("Browser name: "+ browser);//得到浏览器名称
			document.write("<br />")
			document.write("Browser version: "+ version);//得到浏览器版本号
		</script>
	</body>
</html>

JavaScript表单验证：

<html>
<head>
	<script language="javascript">
		function check(){
			if(document.f1.username.value==""){
				alert("用户名不能为空");
				return false;
			}
			return true;
		}
	</script>
</head>
	<body>
	<form name="f1" action="1.html" οnsubmit="return check()">
		<input type="text" name="username"/>
		<input type="submit" value="提交按钮"/>
	</form>
	</body>
</html>

confirm 点击确定跳转到action指定页面，点击取消原页不变。一定要有return关键字：

<html>
	<form name="f1" action="1.html"">
		<input type="text" name="username"/>
		<input type="submit" value="提交按钮" οnclick="return confirm('确定删除吗？')"/>
	</form>
</html>

JavaScript 动画：

<html>
	<head>
		<script type="text/javascript">
			function mouseOver(){
			    document.b1.src ="i/top4_3.gif"
			}
			function mouseOut(){
			    document.b1.src ="i/logo1.gif"
			}
		</script>
	</head>

	<body>
		<a href="http://www.w3school.com.cn" target="_blank">
			<img border="0" alt="Visit W3School!" src="i/eren.gif" name="b1"
			onmouseOver="mouseOver()"
			onmouseOut="mouseOut()" />
		</a>
	</body>
</html>

注意：我们已为图像添加了 name 属性，这样 JavaScript 就能找到它了。
onMouseOver 事件的作用是告知浏览器：一旦鼠标悬浮于图像之上，浏览器就会执行某个函数，这个函数会把这副图像替换为另一幅。
onMouseOut 事件的作用是告知浏览器：一旦鼠标离开图像，浏览器就要执行另一个函数，这个函数会重新插入原来的那幅图像。

更多JavaScript对象：
Window JavaScript分层结构中最顶层的对象。Window对象代表了浏览器窗口。
Navigator 存储了来访用户的浏览器信息
Screen 存储了来访用户的屏幕显示信息
History 存储了浏览器窗口访问过的URL信息
Location 存储了当前URL的信息

除了内置的JavaScript对象以外，你还可以使用JavaScript访问并处理所有的 HTML DOM 对象。（重点）

----------------------------------------------------------------------------------------

实用JavaScript程序：

图片下拉列表

相互关联的列表

抽屉式菜单

划入式菜单

滚动下拉菜单

日历

输入判断js函数

window.open教程

----------------------------------------------------------------------------------------