• 2009-11-09

    JavaScript相关资料收集 - [网页资料]

    Tag:

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/dickmoore-logs/70835868.html

    Javascript就这么回事1:基础知识

    1 创建脚本块

    1: <script language="Javascript">
    2: Javascript code goes here
    3: </script>



    2 隐藏脚本代码

    1: <script language="Javascript">
    2: <!--
    3: document.write(“Hello");
    4: // -->
    5: </script>


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

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

    1: <noscript>
    2: Hello to the non-Javascript browser.
    3: </noscript>



    4 链接外部脚本文件

    1: <script language="Javascript" src="/"filename.js""></script>


    5 注释脚本

    1: // This is a comment
    2: document.write(“Hello"); // This is a comment
    3: /*
    4: All of this
    5: is a comment
    6: */



    6 输出到浏览器

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



    7 定义变量

    1: var myVariable = “some value";



    8 字符串相加

    1: var myString = “String1" + “String2";



    9 字符串搜索

    1: <script language="Javascript">
    2: <!--
    3: var myVariable = “Hello there";
    4: var therePlace = myVariable.search(“there");
    5: document.write(therePlace);
    6: // -->
    7: </script>



    10 字符串替换

    1: thisVar.replace(“Monday","Friday");


    11 格式化字串

    1: <script language="Javascript">
    2: <!--
    3: var myVariable = “Hello there";
    4: document.write(myVariable.big() + “<br>");
    5: document.write(myVariable.blink() + “<br>");
    6: document.write(myVariable.bold() + “<br>");
    7: document.write(myVariable.fixed() + “<br>");
    8: document.write(myVariable.fontcolor(“red") + “<br>");
    9: document.write(myVariable.fontsize(“18pt") + “<br>");
    10: document.write(myVariable.italics() + “<br>");
    11: document.write(myVariable.small() + “<br>");
    12: document.write(myVariable.strike() + “<br>");
    13: document.write(myVariable.sub() + “<br>");
    14: document.write(myVariable.sup() + “<br>");
    15: document.write(myVariable.toLowerCase() + “<br>");
    16: document.write(myVariable.toUpperCase() + “<br>");
    17:
    18: var firstString = “My String";
    19: var finalString = firstString.bold().toLowerCase().fontcolor(“red");
    20: // -->
    21: </script>



    12 创建数组

    1: <script language="Javascript">
    2: <!--
    3: var myArray = new Array(5);
    4: myArray[0] = “First Entry";
    5: myArray[1] = “Second Entry";
    6: myArray[2] = “Third Entry";
    7: myArray[3] = “Fourth Entry";
    8: myArray[4] = “Fifth Entry";
    9: var anotherArray = new Array(“First Entry","Second Entry","Third Entry","Fourth Entry","Fifth Entry");
    10: // -->
    11: </script>



    13 数组排序

    1: <script language="Javascript">
    2: <!--
    3: var myArray = new Array(5);
    4: myArray[0] = “z";
    5: myArray[1] = “c";
    6: myArray[2] = “d";
    7: myArray[3] = “a";
    8: myArray[4] = “q";
    9: document.write(myArray.sort());
    10: // -->
    11: </script>



    14 分割字符串

    1: <script language="Javascript">
    2: <!--
    3: var myVariable = “a,b,c,d";
    4: var stringArray = myVariable.split(“,");
    5: document.write(stringArray[0]);
    6: document.write(stringArray[1]);
    7: document.write(stringArray[2]);
    8: document.write(stringArray[3]);
    9: // -->
    10: </script>



    15 弹出警告信息

    1: <script language="Javascript">
    2: <!--
    3: window.alert(“Hello");
    4: // -->
    5: </script>



    16 弹出确认框

    1: <script language="Javascript">
    2: <!--
    3: var result = window.confirm(“Click OK to continue");
    4: // -->
    5: </script>



    17 定义函数

    1: <script language="Javascript">
    2: <!--
    3: function multiple(number1,number2) {
    4: var result = number1 * number2;
    5: return result;
    6: }
    7: // -->
    8: </script>



    18 调用JS函数

    1: <a href="#" >Link text</a>
    2: <a href="/""()">Link text</a>



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

    1: <body >
    2: Body of the page
    3: </body>


    20 条件判断

    1: <script>
    2: <!--
    3: var userChoice = window.confirm(“Choose OK or Cancel");
    4: var result = (userChoice == true) ? “OK" : “Cancel";
    5: document.write(result);
    6: // -->
    7: </script>



    21 指定次数循环

    1: <script>
    2: <!--
    3: var myArray = new Array(3);
    4: myArray[0] = “Item 0";
    5: myArray[1] = “Item 1";
    6: myArray[2] = “Item 2";
    7: for (i = 0; i < myArray.length; i++) {
    8: document.write(myArray[i] + “<br>");
    9: }
    10: // -->
    11: </script>



    22 设定将来执行

    1: <script>
    2: <!--
    3: function hello() {
    4: window.alert(“Hello");
    5: }
    6: window.setTimeout(“hello()",5000);
    7: // -->
    8: </script>



    23 定时执行函数

    1: <script>
    2: <!--
    3: function hello() {
    4: window.alert(“Hello");
    5: window.setTimeout(“hello()",5000);
    6: }
    7: window.setTimeout(“hello()",5000);
    8: // -->
    9: </script>



    24 取消定时执行

    1: <script>
    2: <!--
    3: function hello() {
    4: window.alert(“Hello");
    5: }
    6: var myTimeout = window.setTimeout(“hello()",5000);
    7: window.clearTimeout(myTimeout);
    8: // -->
    9: </script>



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

    1: <body >
    2: Body of the page
    3: </body>

    Javascript就这么回事2:浏览器输出


    26 访问document对象

    1: <script language="Javascript">
    2: var myURL = document.URL;
    3: window.alert(myURL);
    4: </script>



    27 动态输出HTML

    1: <script language="Javascript">
    2: document.write(“<p>Here’s some information about this document:</p>");
    3: document.write(“<ul>");
    4: document.write(“<li>Referring Document: “ + document.referrer + “</li>");
    5: document.write(“<li>Domain: “ + document.domain + “</li>");
    6: document.write(“<li>URL: “ + document.URL + “</li>");
    7: document.write(“</ul>");
    8: </script>


    28 输出换行

    1: document.writeln(“<strong>a</strong>");
    2: document.writeln(“b");



    29 输出日期

    1: <script language="Javascript">
    2: var thisDate = new Date();
    3: document.write(thisDate.toString());
    4: </script>



    30 指定日期的时区

    1: <script language="Javascript">
    2: var myOffset = -2;
    3: var currentDate = new Date();
    4: var userOffset = currentDate.getTimezoneOffset()/60;
    5: var timeZoneDifference = userOffset - myOffset;
    6: currentDate.setHours(currentDate.getHours() + timeZoneDifference);
    7: document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString());
    8: </script>


    31 设置日期输出格式

    1: <script language="Javascript">
    2: var thisDate = new Date();
    3: var thisTimeString = thisDate.getHours() + “:" + thisDate.getMinutes();
    4: var thisDateString = thisDate.getFullYear() + “/" + thisDate.getMonth() + “/" + thisDate.getDate();
    5: document.write(thisTimeString + “ on “ + thisDateString);
    6: </script>


    32 读取URL参数

    1: <script language="Javascript">
    2: var urlParts = document.URL.split(“?");
    3: var parameterParts = urlParts[1].split(“&");
    4: for (i = 0; i < parameterParts.length; i++) {
    5: var pairParts = parameterParts[i].split(“=");
    6: var pairName = pairParts[0];
    7: var pairValue = pairParts[1];
    8: document.write(pairName + “ :“ +pairValue );
    9: }
    10: </script>

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

    33 打开一个新的document对象

    1: <script language="Javascript">
    2: function newDocument() {
    3: document.open();
    4: document.write(“<p>This is a New Document.</p>");
    5: document.close();
    6: }
    7: </script>



    34 页面跳转

    1: <script language="Javascript">
    2: window.location = “http://www.liu21st.com/";
    3: </script>



    35 添加网页加载进度窗口

    1: <html>
    2: <head>
    3: <script language='javascript'>
    4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
    5: </script>
    6: <title>The Main Page</title>
    7: </head>
    8: <body >
    9: <p>This is the main page</p>
    10: </body>
    11: </html>



    Javascript就这么回事3:图像



    36 读取图像属性

    1: <img src="/"image1.jpg"" >
    2: <a href="# " >Width</a>
    3:


    37 动态加载图像

    1: <script language="Javascript">
    2: myImage = new Image;
    3: myImage.src = “Tellers1.jpg";
    4: </script>


    38 简单的图像替换

    1: <script language="Javascript">
    2: rollImage = new Image;
    3: rollImage.src = “rollImage1.jpg";
    4: defaultImage = new Image;
    5: defaultImage.src = “image1.jpg";
    6: </script>
    7: <a href="/"myUrl"" = rollImage.src;"
    8: = defaultImage.src;">
    9: <img src="/"image1.jpg"" width=100 height=100 border=0>


    39 随机显示图像

    1: <script language="Javascript">
    2: var imageList = new Array;
    3: imageList[0] = “image1.jpg";
    4: imageList[1] = “image2.jpg";
    5: imageList[2] = “image3.jpg";
    6: imageList[3] = “image4.jpg";
    7: var imageChoice = Math.floor(Math.random() * imageList.length);
    8: document.write(‘<img src="’ + imageList[imageChoice] + ‘“>’);
    9: </script>


    40 函数实现的图像替换

    1: <script language="Javascript">
    2: var source = 0;
    3: var replacement = 1;
    4: function createRollOver(originalImage,replacementImage) {
    5: var imageArray = new Array;
    6: imageArray[source] = new Image;
    7: imageArray[source].src = originalImage;
    8: imageArray[replacement] = new Image;
    9: imageArray[replacement].src = replacementImage;
    10: return imageArray;
    11: }
    12: var rollImage1 = createRollOver(“image1.jpg","rollImage1.jpg");
    13: </script>
    14: <a href="#" = rollImage1[replacement].src;"
    15: = rollImage1[source].src;">
    16: <img src="/"image1.jpg"" width=100 border=0>
    17: </a>


    41 创建幻灯片

    1: <script language="Javascript">
    2: var imageList = new Array;
    3: imageList[0] = new Image;
    4: imageList[0].src = “image1.jpg";
    5: imageList[1] = new Image;
    6: imageList[1].src = “image2.jpg";
    7: imageList[2] = new Image;
    8: imageList[2].src = “image3.jpg";
    9: imageList[3] = new Image;
    10: imageList[3].src = “image4.jpg";
    11: function slideShow(imageNumber) {
    12: document.slideShow.src = imageList[imageNumber].src;
    13: imageNumber += 1;
    14: if (imageNumber < imageList.length) {
    15: window.setTimeout(“slideShow(“ + imageNumber + “)",3000);
    16: }
    17: }
    18: </script>
    19: </head>
    20: <body >
    21: <img src="/"image1.jpg"" width=100 >


    42 随机广告图片

    1: <script language="Javascript">
    2: var imageList = new Array;
    3: imageList[0] = “image1.jpg";
    4: imageList[1] = “image2.jpg";
    5: imageList[2] = “image3.jpg";
    6: imageList[3] = “image4.jpg";
    7: var urlList = new Array;
    8: urlList[0] = “http://some.host/";
    9: urlList[1] = “http://another.host/";
    10: urlList[2] = “ere.else/";
    11: urlList[3] = “http://right.here/";
    12: var imageChoice = Math.floor(Math.random() * imageList.length);
    13: document.write(‘<a href="’ + urlList[imageChoice] + ‘“><img src="’ + imageList[imageChoice] + ‘“></a>’);
    14: </script>
    分享到: