您的位置：首页 > Web前端 > JavaScript

JavaScript就这么回事

2012-03-01 16:20 309 查看

有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通JavaScript了，直到目前，我才越来越觉得JavaScript远比我想象的复杂和强大，我开始崇拜它，就像崇拜所有OOP语言一样～

趁着节日的空隙，把有关JavaScript的方法和技巧整理下，让每个在为JavaScript而烦恼的人明白，JavaScript就这么回事！并希望JavaScript还可以成为你的朋友，让你豁然开朗，在项目中更好的应用～

适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人

基础知识：HTML

JavaScript就这么回事1：基础知识

1 创建脚本块

<script language="JavaScript">

JavaScript code goes here

</script>

2 隐藏脚本代码

<scriptlanguage="JavaScript">



</script>

在不支持JavaScript的浏览器中将不执行相关代码

3 浏览器不支持的时候显示

<noscript>

Hello to the non-JavaScript browser.

</noscript> 　

4 链接外部脚本文件

<script language="JavaScript"src="filename.js"></script>

5 注释脚本

// This is a comment

document.write("Hello"); // Thisis a comment

/*

All of this is a comment

*/

6 输出到浏览器

document.write("<strong>Hello</strong>");

7 定义变量

var myVariable = "some value";

8 字符串相加

varmyString = "String1" + "String2";

9 字符串搜索

<scriptlanguage="JavaScript">



</script> 　

10 字符串替换

thisVar.replace("Monday","Friday");

11 格式化字串

<scriptlanguage="JavaScript">



</script>

12 创建数组

<scriptlanguage="JavaScript">



</script>

13 数组排序

<scriptlanguage="JavaScript">



</script>

14 分割字符串

<scriptlanguage="JavaScript">



</script>

15 弹出警告信息

<script language="JavaScript">



</script>

16 弹出确认框

<scriptlanguage="JavaScript">



</script>

17 定义函数

<script language="JavaScript">



</script> 　

18 调用JS函数

<a href="#"onClick="functionName()">Link text</a>

<ahref="http://www.qpsh.com"javascript:functionName"()">Linktext</a>

19 在页面加载完成后执行函数

<body onLoad="functionName();">

Body of the page

</body>

20 条件判断

<script>



</script>

21 指定次数循环

<script>



</script>

22 设定将来执行

<script>



</script> 　

23 定时执行函数

<script>



</script> 　

24 取消定时执行

<script>



</script> 　

25 在页面卸载时候执行函数

<bodyonUnload="functionName();">

Bodyof the page

</body>

JavaScript就这么回事2：浏览器输出

26 访问document对象

<script language="JavaScript">

var myURL = document.URL;

window.alert(myURL);

</script> 　

27 动态输出HTML

<scriptlanguage="JavaScript">

document.write("<p>Here’s someinformation about this document:</p>");

document.write("<ul>");

document.write("<li>ReferringDocument: " + document.referrer + "</li>");

document.write("<li>Domain:" + document.domain + "</li>");

document.write("<li>URL: "+ document.URL + "</li>");

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

</script>

28 输出换行

document.writeln("<strong>a</strong>");

document.writeln("b");

29 输出日期

<scriptlanguage="JavaScript">

var thisDate = new Date();

document.write(thisDate.toString());

</script> 　

30 指定日期的时区

<scriptlanguage="JavaScript">

var myOffset = -2;

var currentDate = new Date();

var userOffset =currentDate.getTimezoneOffset()/60;

var timeZoneDifference = userOffset -myOffset;

currentDate.setHours(currentDate.getHours()+ timeZoneDifference);

document.write("The time and date inCentral Europe is: " + currentDate.toLocaleString());

</script>

31 设置日期输出格式

<script language="JavaScript">

var thisDate = new Date();

var thisTimeString = thisDate.getHours() +":" + thisDate.getMinutes();

var thisDateString = thisDate.getFullYear()+ "/" + thisDate.getMonth() + "/" + thisDate.getDate();

document.write(thisTimeString + " on" + thisDateString);

</script>

32 读取URL参数

<scriptlanguage="JavaScript">

var urlParts =document.URL.split("?");

var parameterParts =urlParts[1].split("&");

for (i = 0; i < parameterParts.length;i++) {

var pairParts =parameterParts[i].split("=");

var pairName = pairParts[0];

var pairValue = pairParts[1];

document.write(pairName + " ："+pairValue );

}

</script>

你还以为HTML是无状态的么？

33 打开一个新的document对象

<scriptlanguage="JavaScript">

function newDocument() {

document.open();

document.write("<p>This is a NewDocument.</p>");

document.close();

}

</script>

34 页面跳转

<scriptlanguage="JavaScript">

window.location ="http://www.qpsh.com";

</script> 　

35 添加网页加载进度窗口

<html>

<head>

<script language='javaScript'>

varplaceHolder = window.open('http://www.qpsh.com','placeholder','width=200,height=200');

</script>

<title>The Main Page</title>

</head>

<body onLoad='placeHolder.close()'>

<p>This is the main page</p>

</body>

</html> 　

JavaScript就这么回事3：图像　

36 读取图像属性

<imgsrc="http://www.qpsh.com/images/logo.jpg"name="myImage">

<a href="http://www.qpsh.com"onClick="window.alert(document.myImage.width)">Width</a>

37 动态加载图像

<scriptlanguage="JavaScript">

myImage = new Image;

myImage.src ="http://www.qpsh.com/images/logo.jpg";

</script>

38 简单的图像替换

<script language="JavaScript">

rollImage = new Image;

rollImage.src ="http://www.qpsh.com/images/logo.jpg";

defaultImage = new Image;

defaultImage.src = "image1.jpg";

</script>

<ahref="http://www.qpsh.com/images/logo.jpg"onMouseOver="document.myImage.src = rollImage.src;"

onMouseOut="document.myImage.src =defaultImage.src;">

<imgsrc="http://www.qpsh.com/images/logo.jpg" name="myImage"width=100 height=100 border=0>

39 随机显示图像

<scriptlanguage="JavaScript">

var imageList = new Array;

imageList[0] = "image1.jpg";

imageList[1] = "image2.jpg";

imageList[2] = "image3.jpg";

imageList[3] = "image4.jpg";

var imageChoice = Math.floor(Math.random()* imageList.length);

document.write(‘<img src="’ +imageList[imageChoice] + ‘">’);

</script>

40 函数实现的图像替换

<scriptlanguage="JavaScript">

var source = 0;

var replacement = 1;

functioncreateRollOver(originalImage,replacementImage) {

var imageArray = new Array;

imageArray[source] = new Image;

imageArray[source].src = originalImage;

imageArray[replacement] = new Image;

imageArray[replacement].src =replacementImage;

return imageArray;

}

var rollImage1 = createRollOver("image1.jpg","rollImage1.jpg");

</script>

<a href="#"onMouseOver="document.myImage1.src = rollImage1[replacement].src;"

onMouseOut="document.myImage1.src =rollImage1[source].src;">

<imgsrc="/"image1.jpg"" width=100 name="myImage1"border=0>

</a>

41 创建幻灯片

<scriptlanguage="JavaScript">

var imageList = new Array;

imageList[0] = new Image;

imageList[0].src = "image1.jpg";

imageList[1] = new Image;

imageList[1].src = "image2.jpg";

imageList[2] = new Image;

imageList[2].src = "image3.jpg";

imageList[3] = new Image;

mageList[3].src = "image4.jpg";

unction slideShow(imageNumber) {

document.slideShow.src =imageList[imageNumber].src;

mageNumber += 1;

f (imageNumber < imageList.length) {

window.setTimeout("slideShow(" +imageNumber + ")",3000);

</script>

</head>

<bodyonLoad="slideShow(0)">

<imgsrc="/"image1.jpg"" width=100name="slideShow">

42 随机广告图片

<scriptlanguage="JavaScript">

var imageList = new Array;

imageList[0] = "image1.jpg";

imageList[1] = "image2.jpg";

imageList[2] = "image3.jpg";

imageList[3] = "image4.jpg";

var urlList = new Array;

urlList[0] = "http://www.qpsh.com/";

urlList[1] ="http://www.qpsh.com/";

urlList[2] ="http://www.qpsh.com/";

urlList[3] ="http://www.qpsh.com/";

var imageChoice = Math.floor(Math.random()* imageList.length);

document.write('<a href="’ +urlList[imageChoice] + '"><img src="' + imageList[imageChoice]+ '"></a>');

</script>

JavaScript就这么回事4：表单

还是先继续写完JS就这么回事系列吧～

43 表单构成

<form method="post"action="target.html" name="thisForm">

<input type="text"name="myText">

<select name="mySelect">

<option value="1">FirstChoice</option>

<option value="2">SecondChoice</option>

</select>

<br>

<input type="submit"value="Submit Me">

</form>

44 访问表单中的文本框内容

<form name="myForm">

<input type="text"name="myText">

</form>

<a href='#'onClick='window.alert(document.myForm.myText.value);'>Check TextField</a>

45 动态复制文本框内容

<form name="myForm">

Enter some Text: <inputtype="text" name="myText"><br>

Copy Text: <input type="text"name="copyText">

</form>

<a href="#" onClick="document.myForm.copyText.value=

document.myForm.myText.value;">CopyText Field</a>

46 侦测文本框的变化

<form name="myForm">

Enter some Text: <inputtype="text" name="myText"onChange="alert(this.value);">

</form> =

47 访问选中的Select

<form name="myForm">

<select name="mySelect">

<option value="FirstChoice">1</option>

<option value="SecondChoice">2</option>

<option value="ThirdChoice">3</option>

</select>

</form>

<a href='#'onClick='alert(document.myForm.mySelect.value);'>Check SelectionList</a>

48 动态增加Select项

<form name="myForm">

<select name="mySelect">

<option value="FirstChoice">1</option>

<option value="SecondChoice">2</option>

</select>

</form>

<script language="JavaScript">

document.myForm.mySelect.length++;

document.myForm.mySelect.options[document.myForm.mySelect.length- 1].text = "3";

document.myForm.mySelect.options[document.myForm.mySelect.length- 1].value = "Third Choice";

</script>

49 验证表单字段

<script language="JavaScript">

function checkField(field) {

if(field.value == "") {

window.alert("You must enter a value inthe field");

field.focus();

}

}

</script>

<form name="myForm"action="target.html">

Text Field: <input type="text"name="myField"onBlur="checkField(this)">

<br><inputtype="submit">

</form>

50 验证Select项

function checkList(selection) {

if (selection.length == 0) {

window.alert("You must make aselection from the list.");

return false;

}

return true;

}

51 动态改变表单的action

<form name="myForm"action="login.html">

Username: <input type="text"name="username"><br>

Password: <inputtype="password" name="password"><br>

<input type="button"value="Login" onClick="this.form.submit();">

<input type="button"value="Register" onClick="this.form.action = ‘register.html’; is.form.submit();">

<input type="button"value="Retrieve Password" onClick="this.form.action =‘password.html’; this.form.submit();">

</form>

52 使用图像按钮

<form name="myForm"action="login.html">

Username: <input type="text"name="username"><br>

Password: <inputtype="password"name="password"><br>

<input type="image"src="/"login.gif"" value="Login">

</form>

53 表单数据的加密

<SCRIPT LANGUAGE='JavaScript'>



</SCRIPT>

<form name='myForm'onSubmit='encryptForm(this); window.alert(this.myField.value);'>

Enter Some Text: <input type=textname=myField><input type=submit>

</form>

JavaScript就这么回事5：窗口和框架

54 改变浏览器状态栏文字提示

<scriptlanguage="JavaScript">

window.status = "A new statusmessage";

</script>

55 弹出确认提示框

<scriptlanguage="JavaScript">

var userChoice = window.confirm("ClickOK or Cancel");

if (userChoice) {

document.write("You chose OK");

} else {

document.write("You choseCancel");

}

</script>

56 提示输入

<script language="JavaScript">

varuserName = window.prompt("Please Enter Your Name","Enter YourName Here");

document.write("Your Name is " +userName);

</script>

57 打开一个新窗口

//打开一个名称为myNewWindow的浏览器新窗口

<script language="JavaScript">

window.open("http://www.qpsh.com/","myNewWindow");

</script>

58 设置新窗口的大小

<script language="JavaScript">

window.open("http://www.qpsh.com/","myNewWindow",'height=300,width=300');

</script>

59 设置新窗口的位置

<script language="JavaScript">window.open("http://www.qpsh.com/","myNewWindow",'height=300,width=300,left=200,screenX=200,top=100,screenY=100');

</script>

60 是否显示工具栏和滚动栏

<script language="JavaScript">

window.open('http://www.qpsh.com/','myNewWindow', ‘scrollbars =no’ );</script>

http://blogyxl.blog.sohu.com/95810861.html

61 是否可以缩放新窗口的大小

<scriptlanguage="JavaScript">

window.open('http://www.qpsh.com/' ,'myNewWindow', 'resizable=yes' );</script>

62 加载一个新的文档到当前窗口

<a href='#' onClick='document.location ='http://www.qpsh.com/';' >Open New Document</a>

63 设置页面的滚动位置

<script language="JavaScript">

if(document.all) { //如果是IE浏览器则使用scrollTop属性

document.body.scrollTop = 200;

}else { //如果是NetScape浏览器则使用pageYOffset属性

window.pageYOffset = 200;

}</script>

64 在IE中打开全屏窗口

<a href='#'onClick="window.open('http://www.qpsh.com/','newWindow','fullScreen=yes');">Opena full-screen window</a>

65 新窗口和父窗口的操作

<script language="JavaScript">

//定义新窗口

var newWindow =window.open("http://www.qpsh.com/","newWindow");

newWindow.close(); //在父窗口中关闭打开的新窗口

</script>

在新窗口中关闭父窗口

window.opener.close()

66 往新窗口中写内容

<scriptlanguage="JavaScript">

var newWindow = window.open("","newWindow");

newWindow.document.open();

newWindow.document.write("This is anew window");

newWIndow.document.close();

</script>

67 加载页面到框架页面

<frameset cols="50%,*">

<frame name="frame1"src="/"135a.html"">

<frame name="frame2" src="/"about:blank"">

</frameset>

在frame1中加载frame2中的页面

parent.frame2.document.location ="135b.html";

68 在框架页面之间共享脚本

如果在frame1中html文件中有个脚本

function doAlert() {

window.alert("Frame 1 is loaded");

}

那么在frame2中可以如此调用该方法

<body onLoad="parent.frame1.doAlert();">

This is frame 2.

</body>

69 数据公用

可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用

<scriptlanguage="JavaScript">

var persistentVariable = "This is apersistent value";

</script>

<frameset cols="50%,*">

<frame name="frame1"src="/"138a.html"">

<frame name="frame2"src="/"138b.html"">

</frameset>

这样在frame1和frame2中都可以使用变量persistentVariable

70 框架代码库

根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

<frameset cols="0,50%,*">

<frame name="codeFrame"src="/"140code.html"">

<frame name="frame1" src="/"140a.html"">

<frame name="frame2"src="/"140b.html"">

</frameset>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航