Heim > Artikel > Web-Frontend > JavaScript-Schnellstart-Fall-Tutorial

JavaScript-Schnellstart-Fall-Tutorial

巴扎黑Original: 2017-08-09 14:07:412029Durchsuche

JavaScript-Schnellstart

1. js generiert Text

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

</script>

3. js schreibt Position und Ausführung Sequenz

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

4. Externe js-Datei importieren

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

5. Variablendeklaration in 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;
}

6

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

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

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

Drei Arten von Nachrichtenboxen in js

<script>
   // 输入1-10之间的数字，如果大了则提示输入过大，如果小了则提示输入小了，在1-10之间则把输入的数字打印出来！

    var number= prompt("输入一个1-10之间的数字");
    if(number > 10){
        alert("你输入的数字大了！");
    }else if(number < 1){
        alert("你输入的数字小了！");
    }else{
        alert("你输入的数字为：" + number);
    }
</script>

8. Funktionen 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>

Zwei Arten von Nachrichtenboxen in js für Schleife

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

10. Ausnahmebehandlung try{}catch(){}

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

11. Fensterobjekt in js

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

13. Ente zeichnen

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

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

Das Bildmaterial ist wie folgt

Der Code lautet wie folgt

14. String-Objekt

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

16. Erhalten begann mit dom

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

17. So erhalten Sie HTML-Tags

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

18. Jquerys elegante Flüsse und Seen

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

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

Das Rendering ist wie folgt

Die Datendatei lautet wie folgt
Die Juery-Klassenbibliothek und die Daten können online heruntergeladen werden. Die TXT-Daten lauten wie folgt:

[
„desc“: „九毛九“
},
{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food2.jpg",
„desc“: „Echtes 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“: „König Yonghe“
},
{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food7.jpg",
„desc“: „Hongli-Dorf“
}
]

Die Bildmaterialien sind wie folgt

Der Code lautet wie folgt

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

Das obige ist der detaillierte Inhalt vonJavaScript-Schnellstart-Fall-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der DOM-Attributmethoden und KompatibilitätsproblemeNächster Artikel：Detaillierte Erläuterung der DOM-Attributmethoden und Kompatibilitätsprobleme

In Verbindung stehende Artikel

Mehr sehen