Js基础知识-入门

1 创建脚本块
<script  language=”JavaScript”>
JavaScript code goes here 
</script> 
2 隐藏脚本代码
 <script language=”JavaScript”>
 document.write(“Hello”);
 </script> 

在不支持JavaScript 的浏览器中将不执行相关代码
3 浏览器不支持的时候显示
 <noscript> 
 Hello to the non-JavaScript browser. 
 </noscript> 

4 链接外部脚本文件
 <script language=”JavaScript”src="/”filename.js"”></script> 

6 输出到浏览器
 document.write(“<strong>Hello</strong>”);

7 定义变量
 var myVariable = “Hello Word”;

8 字符串相加
 var myString = “String1”+ “String2”;

9 字符串搜索（从零开始）
 <script language=”JavaScript”>
 <!—
 var myVariable = “Hellothere”;
 var therePlace = myVariable.search(“there”);
 document.write(therePlace); 
 // --> 
 </script> 

10 字符串替换
 thisVar.replace(“Monday”,”Friday”);

11 格式化字串
<script  language=”JavaScript”>
 <!-- 
 var myVariable = “Hello there”;
 document.write(myVariable.big() + “<br>”);
 document.write(myVariable.blink() + “<br>”);
 document.write(myVariable.bold() + “<br>”);
 document.write(myVariable.fixed() + “<br>”);
 document.write(myVariable.fontcolor(“red”)+ “<br>”);
 document.write(myVariable.fontsize(“18pt”)+ “<br>”);
 document.write(myVariable.italics() + “<br>”);
document.write(myVariable.small() + “<br>”);
 document.write(myVariable.strike() + “<br>”);
document.write(myVariable.sub() + “<br>”);
document.write(myVariable.sup() + “<br>”);
document.write(myVariable.toLowerCase() + “<br>”);
document.write(myVariable.toUpperCase() + “<br>”);
var firstString = “My String”;
var finalString = firstString.bold().toLowerCase().fontcolor(“red”);
</script> 

12 创建数组
 <script language=”JavaScript”>
 <!-- 
 var myArray = new Array(5); 
 myArray[0] = “First Entry”;
 myArray[1] = “Second Entry”;
 myArray[2] = “Third Entry”;
 myArray[3] = “Fourth Entry”;
 myArray[4] = “Fifth Entry”;
 var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”); 
 // --> 
1 </script> 

13 数组排序
 <script language=”JavaScript”>
 <!-- 
 var myArray = new Array(5); 
 myArray[0] = “z”;
 myArray[1] = “c”;
 myArray[2] = “d”;
 myArray[3] = “a”;
 myArray[4] = “q”;
 document.write(myArray.sort()); 
 // --> 
1 </script> 

14 分割字符串
 <script language=”JavaScript”>
 <!-- 
 var myVariable = “a,b,c,d”;
 var stringArray = myVariable.split(“,”);
 document.write(stringArray[0]); 
 document.write(stringArray[1]); 
 document.write(stringArray[2]); 
 document.write(stringArray[3]); 
 // --> 
 </script> 

15 弹出警告信息
 <script language=”JavaScript”>
 <!-- 
 window.alert(“Hello”);
 // --> 
 </script> 
16 弹出确认框
 <script language=”JavaScript”>
 <!-- 
 var result = window.confirm(“Click OK to continue”);
 // --> 
 </script> 

17 定义函数
 <script language=”JavaScript”>
 <!-- 
 function multiple(number1,number2) { 
 var result = number1 * number2; 
 return result; 
 } 
 // --> 
 </script> 

18 调用JS函数
 <a href=”#”onClick=”function Name()”>Linktext</a> 
 <a href="/”javascript:functionName"()”>Linktext</a> 

19 在页面加载完成后执行函数
 <body onLoad=”functionName();”>
 Body of the page 
 </body> 



20 条件判断
 <script> 
 <!-- 
 var userChoice = window.confirm(“Choose OK or Cancel”);
 var result = (userChoice == true) ? “OK”: “Cancel”;
 document.write(result); 
 // --> 
 </script> 

21 指定次数循环
 <script> 
 <!-- 
 var myArray = new Array(3); 
 myArray[0] = “Item 0”;
 myArray[1] = “Item 1 ”;
 myArray[2] = “Item 2”;
 for (i = 0; i < myArray.length; i++)
 { 
 document.write(myArray[i] + “<br>”);
 } 
 // --> 
</script> 

22 设定将来执行
 <script> 
 <!-- 
 function hello() { 
 window.alert(“Hello”);
 } 
 window.setTimeout(“hello()”,5000);
 // --> 
 </script> 

23 定时执行函数
 <script> 
 <!-- 
 function hello() { 
 window.alert(“Hello”);
 window.setTimeout(“hello()”,5000);
 } 
 window.setTimeout(“hello()”,5000);
 // --> 
 </script> 

取消定时执行
 <script> 
 <!-- 
 function hello() { 
 window.alert(“Hello”);
 } 
 var myTimeout = window.setTimeout(“hello()”,5000);
 window.clearTimeout(myTimeout); 
 // --> 
 </script> 


25 在页面卸载时候执行函数
 <body onUnload=”functionName();”>
 Body of the page 
 </body> 

2：浏览器输出
26 访问document对象
 <script language=”JavaScript”>
 var myURL = document.URL; 
 window.alert(myURL); 
 </script> 

27 动态输出HTML 
 <script language=”JavaScript”>
 document.write(“<p>Here‟ssome information about this document:</p>”);
 document.write(“<ul>”);
 document.write(“<li>Referring Document: “+ 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 输出日期
 <script language=”JavaScript”>
 var thisDate = new Date(); 
 document.write(thisDate.toString()); 
 </script> 

30 指定日期的时区
 <script language=”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 in Central 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参数
 <script language=”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> 

33 打开一个新的document对象
 <script language=”JavaScript”>
 function newDocument() { 
 document.open(); 
 document.write(“<p>This is a New Document.</p>”);
 document.close(); 
 } 
 </script> 

34 页面跳转
 <script language=”JavaScript”>
 window.location = “http://www.liu21st.com/”;
 </script> 

35 添加网页加载进度窗口
 <html> 
 <head> 
 <script language='javaScript'> 
 var placeHolder = indow.open('holder.html','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> 

3：图像


36 读取图像属性
 <img src="/”image1.jpg"”name=”myImage”>
 <a href=”#”onClick=”window.alert(document.myImage.width)”>Width</a>

37 动态加载图像
 <script language=”JavaScript”>
 myImage = new Image; 
 myImage.src = “Tellers1.jpg”;
 </script> 

38 简单的图像替换
 <script language=”JavaScript”>
 rollImage = new Image; 
 rollImage.src = “rollImage1.jpg”;
 defaultImage = new Image; 
 defaultImage.src = “image1.jpg”;
 </script> 
 <a href="/”myUrl"”onMouseOver=”document.myImage.src= rollImage.src;”
 onMouseOut=”document.myImage.src= defaultImage.src;”>
 <img src="/”image1.jpg"”name=”myImage”width=100 height=100 
 border=0> 

39 随机显示图像
 <script  language=”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(“<imgsrc=”‟+ imageList[imageChoice] + „“>‟);
 </script> 

40 函数实现的图像替换
 <script language=”JavaScript”>
 var source = 0; 
 var replacement = 1; 
 function createRollOver(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;”>
 <img src="/”image1.jpg"”width=100 name=”myImage1”border=0> 
</a> 


41 创建幻灯片
 <script language=”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; 
 imageList[3].src = “image4.jpg”;
 function slideShow(imageNumber) { 
 document.slideShow.src = imageList[imageNumber].src; 
 imageNumber += 1; 
 if (imageNumber < imageList.length) { 
 window.setTimeout(“slideShow(“+ imageNumber + “)”,3000);
 } 
 } 
 </script> 
< /head> 
20: <body onLoad=”slideShow(0)”>
2 <img src="/”image1.jpg"”width=100  name=”slideShow”>

42 随机广告图片
 <script language=”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://some.host/”;
 urlList[1] = “http://another.host/”;
 urlList[2] = “http://somewhere.else/”;
 urlList[3] = “http://right.here/”;
 var imageChoice = Math.floor(Math.random() * imageList.length); 
 document.write(„<a href=”‟+ urlList[imageChoice] + „“><img src=”‟+ imageList[imageChoice] + „“></a>‟);
 </script> 

JavaScript 就这么回事
4：表单
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”>Second Choice</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 Text Field</a> 

45 动态复制文本框内容
 <form name=”myForm”>
 Enter some Text: <input type=”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: <input type=”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 Selection List</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 = “ThirdChoice”; 
 </script> 

49 验证表单字段
 <script language=”JavaScript”>
 function checkField(field) { 
 if (field.value == “”){ 
 window.alert(“Youmust enter a value in the field”);
 field.focus(); 
 } 
 } 
 </script> 
 <form name=”myForm”action=”target.html”>
 Text Field: <input type=”text”name=”myField”onBlur=”checkField(this)”>
 <br><input  type=”submit”>
 </form> 

50 验证Select项
 function checkList(selection) { 
 if (selection.length == 0) { 
 window.alert(“You must make a selection from the list.”);
 return false; 
 } 
 return true; 
 } 

51 动态改变表单的action 
 <form name=”myForm”action=”login.html”>
 Username: <input type=”text”name=”username”><br>
 Password: <input type=”password”name=”password”><br>
 <input type=”button”value=”Login”onClick=”this.form.submit();”>
 <input type=”button”value=”Register”onClick=”this.form.action= 
„register.html‟;
this.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: <input type=”password”name=”password”><br>
 <input type=”image”src="/”login.gif"”value=”Login”>
 </form> 
 
53 表单数据的加密
 <SCRIPT LANGUAGE='JavaScript'> 
 <!-- 
 function encrypt(item) { 
 var newItem = '';  for (i=0; i < item.length; i++) { 
 newItem += item.charCodeAt(i) + '.'; 
 } 
 return newItem; 
 } 
 function encryptForm(myForm) { 
 for (i=0; i < myForm.elements.length; i++) { 
myForm.elements[i].value = encrypt(myForm.elements[i].value); 
} 
 } 
  </SCRIPT> 
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'> 
 Enter Some Text: <input type=text name=myField><input type=submit> 
20: </form>5：窗口和框架

54 改变浏览器状态栏文字提示
 <script language=”JavaScript”>
 window.status = “Anew status message”;
 </script> 

55 弹出确认提示框
 <script language=”JavaScript”>
 var userChoice = window.confirm(“Click OK or Cancel”);
 if (userChoice) { 
 document.write(“You chose OK”);
 } else { 
 document.write(“You chose Cancel”);
 } 
 </script> 

56 提示输入
 <script language=”JavaScript”>
 var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name 
Here”);
 document.write(“Your Name is “+ userName); 
 </script> 

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

 <script language=”JavaScript”>
 window.open(“http://www.liu21st.com/”,”myNewWindow”);
 </script> 

58 设置新窗口的大小
 <script language=”JavaScript”>
 window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');
 </script> 


59 设置新窗口的位置
 <script language=”JavaScript”>
 window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100'); 
 </script> 

60 是否显示工具栏和滚动栏
 <script language=”JavaScript”>
 window.open(“http:

61 是否可以缩放新窗口的大小
 <script language=”JavaScript”>
 window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );</script> 

62 加载一个新的文档到当前窗口
 <a href='#' onClick='document.location = '125a.html';' >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.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a> 

65 新窗口和父窗口的操作
 <script language=”JavaScript”>
 //定义新窗口
 var newWindow = window.open(“128a.html”,”newWindow”);
 newWindow.close(); //
在父窗口中关闭打开的新窗口
 </script> 
 在新窗口中关闭父窗口
 window.opener.close() 

66 往新窗口中写内容
 <script language=”JavaScript”>
 var newWindow = window.open(“”,”newWindow”);
 newWindow.document.open(); 
 newWindow.document.write(“This is a new 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(“Frame1 is loaded”);
 } 
那么在frame2中可以如此调用该方法
 <body onLoad=”parent.frame1.doAlert();”>
 This is frame 2. 
 </body> 

69 数据公用
可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用
 <script language=”JavaScript”>
 var persistentVariable = “This is a persistent 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> 
加入收藏夹：
<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.zblgbj.gov.cn','淄博市委老干部局')">
加入收藏
</span> 
设为首页：<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.zblgbj.gov.cn');" style="CURSOR: hand">设为主页</span> 

引入样式表(css)的四种方式
一、使用STYLE属性：将STYLE属性直接加在个别的元件标签里。
<元件(标签) STYLE="性质(属性) 设定值1; 性质(属性)
 设定值2; ...} 
例如：<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%> 
这种用法的优点
是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签：将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css"> 
<!-- 
样式规则表
--> 
</STYLE> 
例如：
<STYLE TYPE="text/css"> 
<!-- 
BODY { 
color: BLUE; 
background: #FFFFCC; 
font-size: 9pt} 
TD, P { 
COLOR: GREEN; 
font-size: 9pt} 
--> 
</STYLE> 
通常是将整个的<STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用LINK标签：将样式规则写在.css的样式档案中，再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"> 
即可套用该样式档案中所制定好的样式了。
通常是将LINK标签写在网页的<head></head>部份之中。
这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入：跟LINK用法很像，但必放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css"> 
<!-- 
@import url(
引入的样式表的位址、路径与档名
); 
</STYLE> 
例如：
<STYLE TYPE="text/css"> 
@import url(http://yourweb/ example.css); 
</STYLE> 
要注意的是，行末的分号是绝对不可少的！
posted on 2016-06-24 13:13 小疯子li 阅读(411) 评论(0) 编辑收藏举报