Home > Article > Web Front-end > JavaScript quick start case tutorial

JavaScript quick start case tutorial

巴扎黑Original: 2017-08-09 14:07:411997browse

JavaScript Quick Start

1. js generates text

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

</script>

2. js generates tags

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

3. js writing position and execution order

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

4. Import external js files

<!--
    使用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. Variable declaration in js

<script>
    // 由于javascript是一种弱类型语言，所以定义变量都是使用一个关键字var
    // 定义一个数字类型
    var number = 10;

    // 定义一个字符串
    var str = "aaabbb";

    // 定义一个数组
    var arr = [1,2,3,"haha","yue"];
</script>

6. Judgment statement in 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. Three kinds of message boxes in 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. Functions in 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. Two kinds of for loops in js

<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 + "     ");
        }
        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. Exception handling in 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. Window object in js

<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. Timer

<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. Draw a duck

The picture materials are as follows

The code is as follows

    <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. String Object

<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. Time and array

<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. Getting started with 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. How to get html tags

<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. The elegance of Jquery Jianghu

The rendering is as follows
The data file is as follows
##juery The class library can be downloaded from the Internet. The data.txt data is as follows:
[
{"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":"Real Kung Fu"
},
{"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":"Pizza Hut"
},
{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food5.jpg",
“desc”:”KFC”
},
{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food6.jpg",
"desc":"King Yonghe"
},
{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food7.jpg",
"desc":"Hongli Village"
}
]
The picture material is as follows

<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>

The above is the detailed content of JavaScript quick start case tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of DOM attribute methods and compatibility issuesNext article：Detailed explanation of DOM attribute methods and compatibility issues

See more