ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript クイック スタート ケースのチュートリアル

JavaScript クイック スタート ケースのチュートリアル

巴扎黑
リリース: 2017-08-09 14:07:41
オリジナル
2051 人が閲覧しました

JavaScriptクイックスタート

1. jsがテキストを生成します

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

</script>
ログイン後にコピー

3. jsの書き込み位置と実行順序

<script>
    document.write("我是天才<br/>");
    document.write("我是废才<hr/>");
    document.write("我是鬼才     ");
    document.write("我是人才");
</script>
ログイン後にコピー

4. jsの変数宣言

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

6. 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;
}
ログイン後にコピー

7. jsの3種類のメッセージボックス

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

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

    // 定义一个数组
    var arr = [1,2,3,"haha","yue"];
</script>
ログイン後にコピー

9. jsの2種類のforループ

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

    var number= prompt("输入一个1-10之间的数字");
    if(number > 10){
        alert("你输入的数字大了!");
    }else if(number < 1){
        alert("你输入的数字小了!");
    }else{
        alert("你输入的数字为:" + number);
    }
</script>
ログイン後にコピー

10. jsの例外処理try{}catch(){}

<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>
ログイン後にコピー

11. js の Window オブジェクト

<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>
ログイン後にコピー

12. Timer

<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>
ログイン後にコピー

13. アヒルを描く

画像素材は以下の通りです



コードは次のとおりです


<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>
ログイン後にコピー
    14. 文字列オブジェクト
  • <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>
    ログイン後にコピー

    16. dom

    <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>
    ログイン後にコピー

    17から始まりました。 HTMLタグを取得します

        <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>
    ログイン後にコピー

    18. Jqueryのエレガントな川と湖
レンダリングは次のとおりです

データファイルは次のとおりです

jueryクラスライブラリはオンラインでダウンロードできます.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",
    "説明":"KFC"
    }、
    {"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":"紅莉村"
    }




    画像素材は以下の通りです










コードは以下の通りrreee


以上がJavaScript クイック スタート ケースのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート