JavaScript快速入门

来源：互联网发布：mac桌面图标管理编辑：程序博客网时间：2024/05/29 07:30

1. js生成文本

<!--    js一般是写在head标签里面--><script>    document.write("我是天才！！");    document.write("我是废才!!");</script>

2. js生成标签

<script>    document.write("我是天才<br/>");    document.write("我是废才<hr/>");    document.write("我是鬼才&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");    document.write("我是人才");</script>

3. js的书写位置和执行顺序

<!--    1，书写位置：js是一种弱类型的语言，所以语法不是特别的严格，但是一般js代码是写在head标签里面    2， 执行顺序：js的解释执行是从上往下进行的。--><script>    alert("哈哈");    alert("哼哼");    alert("嘎嘎");</script>

4. 导入外部的js文件

<!--    使用src属性导入外部的js文件    引入js文件需要占用一个script标签，执行代码时需要另取一个script标签--><script src="../js/mylove.js"></script><script>    var sum = getSum(2, 3);    alert(sum);    alert("我是来自于内部的js");</script>mylove.js:alert("我是来自于外部的js文件代码");function getSum(a,b){    return a + b;}

5. js中的变量申明

<script>    // 由于javascript是一种弱类型语言，所以定义变量都是使用一个关键字var    // 定义一个数字类型    var number = 10;    // 定义一个字符串    var str = "aaabbb";    // 定义一个数组    var arr = [1,2,3,"haha","yue"];</script>

6. js中的判断语句if

<script>   // 输入1-10之间的数字，如果大了则提示输入过大，如果小了则提示输入小了，在1-10之间则把输入的数字打印出来！    var number= prompt("输入一个1-10之间的数字");    if(number > 10){        alert("你输入的数字大了！");    }else if(number < 1){        alert("你输入的数字小了！");    }else{        alert("你输入的数字为：" + number);    }</script>

7. js中的三种消息框

<script>    // 1 警告框    alert("我是天才");    // 2 确认框,返回值为true则表示确认，false表示取消    var result = confirm("欲练此功必须自宫，你还练吗？");    if(result){        alert("自宫成功！");    }else{        alert("怂了吧!~?");    }    // 3 提示框输入框    var name = prompt("请输入名字","王八");    if(name!=""&& name!=null){        alert("您输入的名字为：" + name);    }</script>

8. js中的函数

<script>    // 求和函数    function getSum(a, b) {        return a + b;    }    var sum = getSum(3, 6);    alert("和为：" + sum);    // 定义重载函数    function add(){        alert("我是无参函数！");    }    function add(i,j){        alert("我是有参函数!");        var sum = i + j;        alert("有参函数和为：" + sum);    }    add();    // 调用无参的函数时，结果却是弹出有参的提示    // 这是因为js中的函数不能重载，只可以有一个同名函数，多了的会被最后的一个覆盖掉    add(2,4); // 正常输出    add(2,4,6); // 输出和仍为6，因为函数只有两个参数，多传入的值是无效的</script>

9. js中的两种for循环

<script>    // 使用for循环求1-100的和    var sum = 0;    for (var i = 1; i <= 100; i++) {        sum += i;    }    alert("1-100的和是：" + sum);     // 使用for循环打印九九乘法表    for (var i = 1; i <= 9; i++) {        for (var j = 1; j <= i; j++) {            document.write(j + "*" + i + "=" + j * i + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");        }        document.write("<br/>");    }    // for循环打印标题    for(var i = 1; i <=7;i ++){        document.write("<h"+i+">" +"我是"+ i + "级标题"+"<h"+i+">");    }    // for循环遍历月份        document.write("<br>"+"<select>");        for(var i = 1; i <=12;i ++){            document.write("<option>");            document.write(i);            document.write("</option>");        }        document.write("</select>");        // 高级for,x是角标    var str = ["haha","hdhd",99,10,'ooo'];    for(x in str){        alert(str[x]);    }</script>

10. js中的异常处理try{}catch(){}

<script>/** * js中处理异常有两种方式，第一种是用try{} catch(){}语句块处理 * 还有就是你认为代码会出错时用throw关键字把错误跑出去，然后用catch里进行捕获 */    var count = 3 * 8;    haha 让你输出不了;    alert(count);    function add(a, b) {        try {            hahahaha            return a + b;        } catch (err) {            alert("出错了吧");        }    }    add(1,4);    function value(){        var sum = prompt("输入1-100的数字：");        if(sum == "" || sum==null){            alert("输入为空啊");            return;        }        try{            if(sum > 100){                throw "e1";            }else if( sum < 1){                throw "e2";            }else{                alert("你输入的数字是：" + sum);            }        }catch(e){            if(e == "e1"){                alert("输入过大了");            }else if(e == "e2"){                alert("输入过小了");            }        }                   }    value();</script>

11. js中的window对象

<script>    /**     * window对面表示打开的浏览器对象，主要包括了五个子对象     * 1. Navigator    导航器对象     * 2. History      浏览器历史纪录     * 3. Screen       屏幕     * 4. Document     文档     * 5. Location     位置     */</script><script>    function me_Navigator(){        document.write(navigator.appCodeName + "<br/>");        document.write(navigator.appVersion + "<br/>");        document.write(navigator.appName + "<br/>");        document.write(navigator.geolocation + "<br/>");    }    me_Navigator();    // 上一步    function clickme(){        history.back();    }    // 跳转    function tiancai(){        var result = confirm("要去百度官网吗？");        if(result){            location.href="index.html";        }    }</script>

12. 定时器

<html>    <head>        <meta charset="utf-8">        <title></title>        <script>            // 电子显示时钟            function showTime(){                var date = new Date();                var canvas = document.getElementById("showcanvas");                var hours = date.getHours();                var min = date.getMinutes();                var sec = date.getSeconds();                canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";            }            setInterval("showTime()",1000);            // 倒计时显示器            var i = 0;            var t = 0;            function backTime(){                var date = new Date();                var canvas = document.getElementById("showcanvas");                var hours = date.getHours();                var min = date.getMinutes();                var sec = date.getSeconds();                canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";                i ++ ;                if(i == 5){                    clearInterval(t);                }            }            t = setInterval("backTime()",1000);        </script>    </head>    <body onload="backTime()">        <div id="showcanvas"></div>    </body></html>

13. 画鸭子

图片素材如下

代码如下

    <script>         var i = 0;         var t;        function image(){            document.getElementById("img").src="../img/"+ i +".png";            i ++;            if(i == 7){                clearInterval(t);                alert("画完了，好玩吧！");            }        }        t = setInterval("image()",1000);    </script></head><body onload="image()"><img id="img"/></body>

14. 字符串对象

<script>    var str = "我就是天才啊，无人能挡，哈哈哈哈";    document.write("我的长度是:" + str.length + "<br/>");    document.write(str + "<br/>");    document.write(str.big() + "<br/>");    document.write(str.blink() + "<br/>");    document.write(str.bold() + "<br/>")    var str1 = "LSDVASLEOSVN";    document.write(str1.toLocaleLowerCase() + "<br/>");    var str2 = "sldvjlwelvdnlsh";    document.write(str2.toLocaleUpperCase());</script>

15. 时间和数组

<script>     // 时间    var date = new Date();    document.write(date.getFullYear() + "年");    document.write(date.getMonth() + 1 + "月");    document.write(date.getDate() + "日&nbsp&nbsp&nbsp");    document.write(date.getHours() + "时");    document.write(date.getMinutes() + "分");    document.write(date.getSeconds() + "秒<br>");</script><script>    // 数组    var arr = [2,4,78,34,"haha"];    for(x in arr){        alert(arr[x]);    }    alert("数组最开始的长度：" + arr.length);//5    // 给第10个值赋值    arr[10] = 0;    alert("数组赋值后的长度：" + arr.length);//11    // 数组排序    arr1 = [1,7,6,3,9,2,4,8,5];    // 自定义排序方式    function byNumber(a,b){        return a-b;    }    document.write(arr1 + "<br>")    document.write(arr1.sort(byNumber)+ "<br>");    // 冒泡排序法    arr3 = [1,7,6,3,9,2,4,8,5];    for(var i = 0; i < arr3.length-1;i++){        for(var j = i+1;j < arr3.length;j++){            if(arr3[i] > arr3[j]){                var temp = arr3[i];                arr3[i] = arr3[j];                arr3[j] = temp;            }        }    }    document.write("冒泡排序后的结果：" + "<br>")    document.write(arr1 + "<br>")</script>

16. dom入门

<html>    <head>        <meta charset="utf-8">        <title></title>        <script>            function init(){                document.getElementById("name").value="请输入你的名字";            }            function _focus(){                document.getElementById("name").value="";            }            function _blur(){                var value = document.getElementById("name").value;                if(value == "" || value==null){                    document.getElementById("name").value="请输入你的名字";                }else{                    document.getElementById("name").style.color="aqua";                }            }        </script>    </head>    <body onload="init()">        <!--            onfocus:聚焦            onblur:失去焦点        -->    <input type="text" id="name" onfocus="_focus()" onblur="_blur()"/>    </body></html>

17. 获取html标签的方式

<html>    <head>        <meta charset="utf-8">        <title></title>        <script>                function init(){                    // 获取id                    document.getElementById("text").value="我是天才";                    // 获取name                    document.getElementsByName("name")[1].value = "20岁";                    // 获取标签                    document.getElementsByTagName("input")[2].value="男";                }        </script>    </head>    <body onload="init()">        输入姓名：<input type="text" name="name" id="text"/><br>        输入年龄：<input type="text" name="name" id="text"/><br>        输入性别：<input type="text" name="name" id="text"/>    </body></html>

18. Jquery之飘逸江湖

效果图如下
数据文件如下
juery类库可以去网上下载，data.txt数据如下：
[
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food1.jpg“,
“desc”:”九毛九”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food2.jpg“,
“desc”:”真功夫”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food3.jpg“,
“desc”:”哥哥乐”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food4.jpg“,
“desc”:”必胜客”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food5.jpg“,
“desc”:”肯德基”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food6.jpg“,
“desc”:”永和大王”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food7.jpg“,
“desc”:”红荔村”
}
]
图片素材如下

代码如下

<head>    <meta charset="utf-8">    <title></title>    <!--         引入jquery类库文件    -->    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>    <script>        // 发送一个请求给服务器，把服务器上的数据拿到        $.get(".../data.txt",function(data){            var jsonArr = eval(data);            for(x in jsonArr){                var picpath = jsonArr[x].picpath;                var desc = jsonArr[x].desc;                // 创建图片节点                var imgNode = document.createElement("img");                imgNode.src = picpath;                imgNode.setAttribute("class","img_style");                // 创建p节点                var pNode = document.createElement("p");                pNode.innerHTML = desc;                 pNode.style.color = "red";                pNode.align = "center";                // 创建一个div节点                var divNode = document.createElement("div");                divNode.setAttribute("class","div_style");                divNode.appendChild(imgNode);                divNode.appendChild(pNode);                document.getElementById("container").appendChild(divNode);              }        });    </script>    <style>        .div_style{            position: relative;            float: left;            margin: 20px;        }        .img_style{            width: 150px;            height: 150px;        }    </style></head><body>    <div id="container"></div>    <p align="center"></p></body>

阅读全文

0 0