JavaScript-T1

举报
红目香薰 发表于 2022/12/06 15:05:34 2022/12/06
【摘要】 ​js的引入方法 <!-- 方法1、在任何html页面非element元素中直接引入即可 --><!-- 方法2、外部引入js --><!-- 方法3、a标签的href引入 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte...

js的引入方法 

<!-- 方法1、在任何html页面非element元素中直接引入即可 -->

<!-- 方法2、外部引入js -->

<!-- 方法3、a标签的href引入 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScrip基础·引入script的方法</title>
</head>

<body>
    <!-- 方法1、在任何html页面非element元素中直接引入即可 -->
    <script>
        document.write("我拥有一个世界,一个宽广美好的世界。");
    </script>
    <hr/>
    <!-- 方法2、外部引入js -->
    <script src="js/demo1.js"></script>
    <hr/>
    <!-- 方法3、a标签的href引入 -->
    <a href="http://www.baidu.com" onclick="return confirm('是否跳转百度')">跳转http:www.baidu.com</a>
</body>

</html>

console.log用法

日志输出,我的输出位置在浏览器的程序开发模式里面的CONSOLE栏中。

主要是方便调式javascript用的,可以看到在页面中输出的内容,与alert相比,它能看到结构化的东西,而alert淡出一个对象就是[obujct object],但comsole能看到对象的内容,console不会打断页面的操作。

相比alert他的优点是:

1、他能看到结构话的东西,如果是alert,淡出一个对象就是object object,但是console能看到对象的内容。

2、console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。

3、console里面的内容非常丰富,你可以在控制台输入console,然后就可看到。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志的使用方法·稍后说明变量</title>
</head>

<body>
    <script>
        // 日志输出使用方法
        console.log("我是日志输出,我的输出位置在浏览器的程序开发模式里面的CONSOLE栏中");
    </script>
</body>

</html>

变量定义与注释

        /**

         *

         *

         * 范围注释,有的时候还是很好用的。

         *

         *

         *

         *

         */

// 空的·没有发现/未定义
// var msg;
// console.log(msg);

// 字符串类型
// var str = "有一个男孩,很棒。";
// 因为可以单独输出一个字符,故而js中有char类型,但是由于
// js是弱类型,故而所有类型均可以用var来表示。
// console.log(str[0]);
// var str_char = '6';
// console.log(str_char);
// 布尔类型
// var isf = 5 > 2; //True
// console.log(isf);
// 浮点数类型可以显示小数点后15位的数字
// var x = 3.1415926535811111111111;
// console.log(x);
// var y = 6;
// var opt = "+";
// console.log(x + opt + y);
// console.log(eval(x + opt + y));
// console.log(eval("5+6+9+8+7*2-1*6/3+666"));

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量的声明与使用</title>
</head>

<body>
    <script>
        /**
         * 
         * 
         * 范围注释,有的时候还是很好用的。
         * 
         * 
         * 
         * 
         */



        /**
         */
        /*
                var msg = null;
                console.log(msg);
                */
        // 空的·没有发现/未定义
        // var msg;
        // console.log(msg);
        // 字符串类型
        // var str = "有一个男孩,很棒。";
        // 因为可以单独输出一个字符,故而js中有char类型,但是由于
        // js是弱类型,故而所有类型均可以用var来表示。
        // console.log(str[0]);
        // var str_char = '6';
        // console.log(str_char);
        // 布尔类型
        // var isf = 5 > 2; //True
        // console.log(isf);
        // 浮点数类型可以显示小数点后15位的数字
        // var x = 3.1415926535811111111111;
        // console.log(x);
        // var y = 6;
        // var opt = "+";
        // console.log(x + opt + y);
        // console.log(eval(x + opt + y));
        // console.log(eval("5+6+9+8+7*2-1*6/3+666"));
    </script>
</body>

</html>

js闰年判断方法

1582年以来的置闰规则:

普通闰年:公历年份是4的倍数,且不是100的倍数的,为闰年(如2004年、2020年等就是闰年)。
世纪闰年:公历年份是整百数的,必须是400的倍数才是闰年(如1900年不是闰年,2000年是闰年)。
1582年以前的惯例:四年一闰;如果公元A年的A(正数)能被4整除,那么它就是闰年;如果公元前B年的B(正数)除以4余1,那么它也是闰年。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分支语句·闰年判断</title>
</head>

<body>
    <script>
        // 判断闰年的if语句
        var year = 2100;
        if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) {
            document.write("闰年");
        } else {
            document.write("平年");
        }
    </script>
</body>

</html>

if单分支、双分支、多分支语句

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if多分支语句</title>
</head>

<body>
    <script>
        // 其中0-4可以代表任何事情
        var num = 2;
        if (num == 0 || num == 2 || num == 3) { //0-2-3任何事情
            document.write("田思龙");
            document.write("贾正岩先生")
        } else if (num == 1) { //没钱花了
            document.write("家长");
        } else if (num == 4) { //找食堂
            document.write("食堂");
        } else {
            document.write("找自己");
        }
    </script>
</body>

</html>

switch开关

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch</title>
</head>

<body>
    <script>
        // switch语句的用法与变化
        var key = 12;
        switch (key) {
            case 12:
            case 1:
            case 2:
                document.write("冬季");
                break;
            case 3:
            case 4:
            case 5:
                document.write("春季");
                break;
            case 6:
            case 7:
            case 8:
                document.write("夏季");
                break;
            case 9:
            case 10:
            case 11:
                document.write("秋季");
                break;
            default:
                document.write("不是地球年");
                break;
        }
    </script>
</body>

</html>

js循环

// 循环四要素
/**
 * 1、初始值
 * 2、表达式
 * 3、循环体
 * 4、迭代器
 */
// 注意如果没有写迭代器就可能变成死循环,无限循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环</title>
</head>

<body>
    <script>
        // 循环四要素
        /**
         * 1、初始值
         * 2、表达式
         * 3、循环体
         * 4、迭代器
         */
        // 注意如果没有写迭代器就可能变成死循环,无限循环
        for (var i = 0; i < 10; i++) { //初始值、表达式、迭代器
            if (i == 5) {
                break; //彻底停止循环
                // continue; //停止当前循环,进入下次循环
            }
            document.write(i + "~"); //循环体
        }



        // var i = 0; //初始值
        // do {
        //     document.write(i, "-"); //循环体
        //     i++; //迭代器
        // } while (i < 10); //表达式


        // var i = 0; //初始值
        // while (i < 10) { //表达式
        //     document.write(i + ","); //循环体
        //     i++; //迭代器
        // }
    </script>
</body>

</html>

js九九乘法表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
</head>

<body>
    <script>
        // 九九乘法表是从1*1————————————9*9的表,故而需要的数据是1-9没有0和10
        for (var i = 1; i < 10; i++) {
            // 由于j和i都是从1开始的,为了添加1*1=1故而需要j<=i,才能有1*1=1
            for (var j = 1; j <= i; j++) {
                // 字符串拼接,由于没有制表符\t故而使用&nbsp;来代替。
                document.write(j + "*" + i + "=" + (i * j) + "&nbsp;");
            }
            // 没行输出完毕则换行。
            document.write("<br/>");
        }
    </script>
</body>

</html>

九九乘法表自己多练练嵌套循环值得了解。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。