javascript入门

时间:2022-06-19
本文章向大家介绍javascript入门,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
  • 入门程序
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS入门——helloworld</title>
    <!--
        JavaScript[JS]代码,包含在一对script标签中
        script标签可以出现在网页中的任何一个位置
    -->
    <script>
        // 单行注释: 一般用来解释说明一行或者多行代码
        /*
            多行注释:一般用来解释说明多行或者一个模块的代码

        */
        /**
         * 文档注释:主要注释在代码的最顶部,说明当前所有的代码是用来做什么的
         */

         // 网页中输出Hello World!
         document.write("<h1>hello world!</h1>");
         // 用来弹出浏览器的警告对话框,对话框中的内容就是括号中指定的字符串!
         alert("hello world!你好呀!");
    </script>
</head>
<body>
    <!-- Hello World! -->
</body>
</html>
  • 浏览器对话框
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>对话框</title>
    <script>
        // 警告对话框:主要用来进行信息的提示,附带一个确定按钮
        alert("你中枪了!!!!!")

        // 确认对话框:用于用户操作的信息确认,附带一个确定按钮和取消按钮
        _res = confirm("您确定要这么干嘛?");
        alert("用户操作的结果:" + _res)

        // 交互对话框
        _num = prompt("请输入您的年龄", "10")
        alert("用户输入的年龄:" + _num)
    </script>
</head>
<body>

</body>
</html>
  • 编程语言基础
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script>
    /*
        编程语言:以处理数据为核心的

        编程语言中表示数据:
            数据类型:表示数据的类型
            变量:编程语言中用来临时存储数据的容器


        数据类型:
            1. 基本数据类型
            String:字符串
            Number:数字【整数、浮点数】
            Boolean:布尔类型【true/false】
            undefined:未定义类型
            null:表示为空的类型

            2. 引用数据类型:一般情况用来表示对象的
            object对象类型

        变量:
            准备:JavaScript是一个面向对象的弱类型的脚本语言
            >变量定义:使用var关键字来定义变量【推荐】
            >变量命名规则:变量名称只能以下划线(_),$符号或者字母开头。
            >变量的命名规范:1驼峰命名法(一个或者多个单词组成,第一个单词全部小写,后面每个单词首字母大写);2见名知意
            >变量的使用规则:先声明,后使用

            > JavaScript变量,一般以下划线开头[近年出来的规范]


            > 可以使用它typeof()来判断某个数据的类型

        数据类型的转换:
            字符串->数字   Number()
            字符串->整数     parseInt()
            字符串->浮点数    parseFloat()

        JavaScript错误调试
            1.代码开发过程中,不一定会提示错误!
            2.在浏览器的F12窗口中,如果JavaScript代码执行出现错误,就会在Console(控制台)提示错误信息和错误代码的位置!


        运算符:
            算数运算符:+ - * / %
            赋值运算符:= += -= *= /= %=
            关系运算符:> >= < <= != ==  ===
            逻辑运算符:与运算&&  或运算||  非运算 !
            三元运算符: 简化的if-else判断
                    (条件)?(条件为真执行的代码):(条件为假执行的代码)


    */
    var x = 12;// 定义了一个变量x,赋值为12
    alert(x + "-----------" + typeof(x));

    x = true;
    alert(x + "-----------" + typeof(x));

    // 案例:通过交互对话框和警告对话框,来完成一个加法运算
    // 接受用户输入的数据
    var _num1 = prompt("请输入第一个数据:", "0")
    var _num2 = prompt("请输入第二个数据:", "0")

    // 数据类型转换
    _num1 = parseInt(_num1);
    _num2 = parseInt(_num2);

    var _sum = _num1 + _num2;

    alert("运算的结果是:" + _sum);

    </script>
</head>
<body>

</body> 
</html>
  • 程序结构
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>程序结构</title>
    <script>
        /*
            程序结构之顺序结构
                代码从上往下逐行执行
        */
        /*var _num1 = prompt("请输入第一个数字")
        var _num2 = prompt("请输入第二个数字")

        var _sum = parseFloat(_num1) + parseFloat(_num2)

        alert("运算的结果是:" + _sum)*/

        /*
            程序结构之选择结构:
                选择结构之判断结构(可以判断条件的范围)
                if结构

                案例:鱼和熊掌!
        */  
        var _rain = "下雨";

        // 单个条件判断
        if(_rain == "下雨"){
            alert("出门带伞");
        }

        // 两个条件选择其一  if-else
        var _choice = 1;
        if(_choice == 1){
            alert("您选择了冰棍")
        } else {
            alert("您选择了雪糕")
        }

        // 条件中包含条件,多个条件:if嵌套
        var _cake = 1
        var _price = 888;
        if(_cake == "蛋糕"){
            if(_price == 88){
                alert("给老妈买的蛋糕")
            } else if(_price == 888){
                alert("给女朋友买的蛋糕")
            } else {
                alert("给自己买的蛋糕")
            }
        }

        // 多个条件
        var _score = prompt("请输入的您的分数:");
        if(_score > 0 && _score < 60) {
            alert("不及格")
        } else if(_score >= 60 && _score < 80) {
            alert("良好")
        } else if(_score >= 80 && _score <= 100) {
            alert("优秀")
        } else {
            alert("你是猴子派来的逗比吗?")
        }


        var _week = prompt("请输入一个整数表示星期:")
        if(_week == "1") {
            alert("今天是星期一")
        } else if(_week == "2") {
            alert("今天是星期二")
        } else if(_week == "3") {
            alert("今天是星期三")
        }/*.....*/


        /*
            选择结构之:选择题结构
        */
        var _c = prompt("请输入您的选项");

        switch(_c){
            case "A":
                alert("您选择了A选项")
                break;
            case "B":
                alert("您选择了B选项");
                break;
            case "C":
                alert("您选择了C选项");
                break;
            case "D":
                alert("您选择了D选项");
                break;
            default:
                alert("您真是来答题的吗?")
        }
    </script>
</head>
<body>

</body>
</html> 
  • 案列(运算)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script>
        // 接受用户输入
        var _num1 = prompt("请输入第一个数据:")
        var _opra = prompt("请输入运算符(+、-、*、/、%):");
        var _num2 = prompt("请输入第二个数据:")

        // 数据类型转换
        _num1 = parseFloat(_num1)
        _num2 = parseFloat(_num2)


        // 判断运算
        var _result = 0;
        switch(_opra){
            case "+":
                _result = _num1 + _num2;
                //break;
            case "-":
                _result = _num1 - _num2;
                break;
            case "*":
                _result = _num1 * _num2;
                break;
            case "/":
                _result = _num1 / _num2;
                break;
            case "%":
                _result = _num1 % _num2;
                break;
            default:
                _result = "您输入了错误的运算符号"
        }

        // 输出结果:
        alert("计算结果:" + _result);
    </script>
</head>
<body>

</body>
</html>
  • 循环结构
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>循环结构</title>
    <script>
        /*
        JS中提供了三种普通循环结构
            for循环
            while循环
            do-while循环
        */
        /*for(var i = 0; i < 10; i++) {
            // alert("点击我试试" + i);
            console.log("for循环执行结果:" + i);
        }*/

        /*var x = 0;
        while(x > 10){
            console.log("while循环执行结果:" + x);
            x++;
        }*/

        /*var m = 0;
        do{
            console.log("do-while循环:" + m);
            m++;
        }while(m > 10);*/

        /*
        循环中的continue和break
        */
        // continue是结束本次循环,直接开始下一次循环
        for(var i = 0; i < 100; i++) {

            if(i % 33 == 0){
                // continue;/*终止本次循环,直接开始下次循环*/
                // break;/*跳出循环*/
            }
            console.log(i);
        }
        // break;直接跳出循环

        // 使用for-while-do~while循环,写9X9乘法表
        // 在网页上展示出来!

    </script>
</head>
<body>

</body>
</html>
  • 九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        span{
            display:inline-block;
            width:100px;
            height:20px;
            border:solid 1px red;
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        //for循环
        for(var i=1;i<10;i++){
            for(var j=1;j<=i; j++){
                document.write("<span>"+j + '*'+ i +'='+(i*j)+' '+"</span>")
            }
            document.write('<br/>')
        }
        //while循环
        var m=1;
        while(m<=9){
            var n=1;
            while(n<=m){
                document.write(n + '*'+ m +'='+(n*m)+' ');
                n++;
            }
            document.write('<br/>');
            m++;
        }
        //do-while循环
        var y=1;
        do{
            var x=1;
            do{
                document.write(x + '*'+ y +'='+(x*y)+' ');
                x++;
            }while(x<=y);
            document.write('<br/>');
            y++;    
        }while(y<=9);
    </script>
</body>
</html>
  • 函数操作
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>函数操作</title>
    <script>
    /*
        函数:是封装了一段代码,方便这段代码的重复使用
        def <func_name>(参数列表):
            函数中的代码
            return 返回值

        javascript中可以通过function关键字来定义函数
    */
    /*function hello(name){
        console.log("hello " + name);
    }

    hello("tom")

    hello("jerry")

    hello()*/

    /*
        函数中的参数:函数要执行必须需要的数据
            定义在函数中的变量:形式参数
            实际调用函数时传递的数据:实际参数

            food就是一个形式参数,函数要执行,名义上需要一个食物
    */
    function eat(food){
        console.log("今晚吃饭,吃" + food);
    }

    eat("烤全羊!");

    /*
        函数的返回值:函数执行完成之后返回的结果
            通过return关键字来返回函数执行的结果
    */
    function buyCigrate(money) {
        if(money == 10){
            _res = "红塔山"
        } else if(money == 14) {
            _res = "红利群"
        } else if(money == 16) {
            _res = "蓝利群"
        } else if(money == 22) {
            _res = "吉祥兰州"
        }
        return _res;
    }


    var r = buyCigrate(14)
    console.log("函数执行的结果:" + r);

    /*
        参数对象:arguments
            使用不是很多,认识即可!
    */
    function test() {
        console.log(arguments);
    }
    test()
    test("寒冰")
    test("狂战士", "皎月")
    </script>
</head>
<body>

</body>
</html>
  • 字符串操作
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>字符串操作</title>
    <script>
        /*
            JS中,包含在一对单引号或者双引号中间的字符,称为字符串
        */
        var _str = "   hello javascript!    "

        // 字符串的长度 
        console.log(_str.length);
        // 判断某个字符第一次出现的位置
        console.log(_str.indexOf("a"))
        // 判断某个字符最后一次出现的位置
        console.log(_str.lastIndexOf("a"))
        // 截取一段字符串
        console.log(_str.substring(4,10))
        // 剔除字符串两边的空格
        console.log(_str);
        console.log(_str.trim());
    </script>
</head>
<body>

</body>
</html>
  • 数学操作
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Math对象</title>
    <script>
    /*
        抽奖
    */
    /*
        Math对象,可以通过Math...直接使用它的函数
        Math.random() 获取一个0~1之间的随机数
        Math.floor(x) 向下取整;获取一个数据的最大整数  4.1
        Math.ceil(x) 向上取整
        Math.round(x) 四舍五入
        Math.pow(x, y) 获取x的y次方
        Math.sqrt(x)开平方
    */
    // 获取随机数
    /*var _rn = Math.random();
    console.log(_rn);

    // 骰子游戏~~~1~6
    var _no = Math.random() * 6;
    console.log(_no);

    var _x = Math.floor(_no);
    console.log(_x);

    var _y = Math.ceil(_no);
    console.log(_y);

    var _z = Math.round(_no)
    console.log(_z);*/


    /*
        数组:一组数据
    */
    // 声明数组,使用方括号
    var _names = ["张小凡", "林惊羽", "陆雪琪", "碧瑶"]

    // 数组的长度: length属性
    var _random = Math.random() * _names.length;
    _random = Math.floor(_random);

    // 获取数组中的某个数据,通过下标/索引获取
    var _n = _names[_random]
    console.log("Congratulations, 你中奖了" + _n);

    /*
        扩展:
            学会pop()push()shift()unshift()函数的操作
    */

    </script>
</head>
<body>

</body>
</html>
  • 时间操作
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
        时间操作
    </title>

    <script>
        var _d = new Date();

        document.write("恭喜您登录系统,登录时间是:" + _d);

        // 时间常见函数
        var year = _d.getFullYear();//获取年份  2017
        var month = _d.getMonth()+1; // 获取月份  0~11
        var day = _d.getDate();//获取日子       1-31
        var week = _d.getDay();//获取星期       1~7

        var h = _d.getHours();//获取小时    0~24
        var m = _d.getMinutes();//获取分钟  0~59
        var s = _d.getSeconds();//获取秒钟  0~59
        var ms= _d.getMilliseconds();//获取毫秒

        document.write(year + "年" + month + "月" + day + "日" + week);
        document.write(h + ":" + m + ":" + s + ":" + ms);
    </script>
</head>
<body>

</body>
</html>
  • 计时函数
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>计时函数</title>
    <script>
        // setTimeout(fn, time)延时函数
        // 延时一定的时间执行指定的函数

        /*setTimeout(function() {
            console.log("函数执行了...");
        }, 5000)*/

        // setInterval(fn ,time) 计时函数
        // 间隔一定的时间,执行指定的函数
        /*setInterval(function() {
            console.log("计时函数正在执行...");
        }, 1000);*/

        // 数字时钟
        function timer() {
            var _d = new Date();

            var year = _d.getFullYear();//获取年份  2017
            var month = _d.getMonth()+1; // 获取月份  0~11
            var day = _d.getDate();//获取日子       1-31
            var week = _d.getDay();//获取星期       1~7

            var h = _d.getHours();//获取小时    0~24
            var m = _d.getMinutes();//获取分钟  0~59
            var s = _d.getSeconds();//获取秒钟  0~59
            var ms= _d.getMilliseconds();//获取毫秒

            // 获取一个标签对象,给标签中添加内容
            var _span = document.getElementById("showtime");
            _span.innerText = year + "年" + month + "月" + day + "日" + " 星期" + week + " " + h + ":" + m + ":" + s + ":" + ms;
        }

        setInterval(timer, 32);


    </script>
</head>
<body>
    <h1>数字时钟案例</h1>
    <span id="showtime"></span>
</body>
</html>
  • 活动倒计时
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>活动倒计时</title>
</head>
<body>
    <span id="countDown"></span>

    <script>
    /*
        倒计时函数
    */
    function timer() {
        //当前系统时间
        var _date = new Date();
        // 定义一个将来的时间
        var _last = new Date("2017-9-8 00:00:00")
        //console.log(_date, _last);

        _date = _date.getTime();//获取从1970年1月1日到现在的毫秒数
        _last = _last.getTime();
        //console.log(_date, _last);

        _long = _last - _date;// 两个时间之间的毫秒差值

        // 从毫秒的差值中,计算包含多少天
        var _day = Math.floor(_long/(1000*60*60*24));
        var _h = Math.floor(_long/(1000*60*60) % 24);
        var _m = Math.floor(_long/(1000*60) % 60);
        var _s = Math.floor(_long/1000 % 60);
        var _ms = _long % 1000;

        var _span = document.getElementById("countDown");
        _span.innerText = "商品活动倒计时剩余:" + _day + "天" + _h + "小时" + _m + "分" + _s + "秒" + _ms + "毫秒"
    }

    setInterval(timer, 38);
    </script>
</body>
</html>