js_入门

发布时间:2024年01月11日

js

  • js放入网页的方式

    1、内联使用:放入标签里面

    2、内部使用:多数放在body里面

    3、使用外部js

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- <script>
            alert("hi, es");
        </script> -->
        <!-- <script src="./jsDemo1.js"></script> -->
    </head>
    <body>
        <!-- 讲解js放入网页的方式 -->
        <!-- 1、内联使用:放入标签里面 -->
        <!-- <a href="给的是地址,就是跳转页面"></a> -->
        <!-- <a href="javascript:执行js代码,内联使用"></a> -->
        <!-- alert(弹出内容):函数,BOM对象里面一个函数,警告框, -->
        <!-- <a href="javascript:alert('欢迎使用js')">点击</a> -->
    
        <!-- 2、内部使用:多数放在body里面 -->
        <!-- <script type="text/javascript">
            alert("hello,js");
        </script> -->
    
        <!-- 3、使用外部js  -->
        <!-- <script src="./jsDemo1.js"></script> -->
        <!-- 引用js代码的script标签里面不能再写js代码 -->
    
    </body>
    
  • 在js中声明变量

    声明变量的关键字:
    var:声明函数级别(在方法里面声明局部变量)
    let:声明块级级别(在语句中声明变量)
    const:声明常量的

    <body>
        <!-- 讲解在js中声明变量 -->
        <!-- 
            在js中声明变量
            声明变量的关键字:
                var:声明函数级别(在方法里面声明局部变量)
                let:声明块级级别(在语句中声明变量)
                const:声明常量的
         -->
         <script>
            // 声明一个变量
            var a = 1; // 声明一个a变量,里面放入整数
            var a = 1.5;
            var a = "abc";
            var a = 'd';
            var a = true;
    
            let b = "老王,掉了啥...";
            b = 23;
           
            const NUM = 10;
         </script>
    </body>
    
  • js的三种打印方式

    1、alert():弹出

    2、通过document.write()向页面写入

    3、通过浏览器的控制台

    <body>
        <!-- 讲解js的三种打印方式 -->
        <script>
            //1、alert():弹出 
            // var a = 1;
            // alert("a = " + a);
            // var a = true;
            // alert("a = " + a);
            // a = 1.5;
            // alert("a = " + a);
            // a = "老王吧";
            // alert("a = " + a);
    
            // 2、通过document.write()向页面写入
            let a = false;
            // document.write(a);
            // document.write("<br />");
            // a = "去百度";
            // document.write("<a href= 'https://www.baidu.com'>" + a + "</a>");
            // document.writeln(a)
            // let b = 3.1415926
            // document.writeln(b)
    
            // 3、通过浏览器的控制台
    
            console.log(a);
            console.log("dsgfdg");
    
        </script>
    </body>
    
  • js中的原生数据类型

    number:数字(数值)类型
    boolean:布尔,true false
    string:字符串
    null:object类型对象类型
    undefined:未定义,变量未赋值
    Infinity:无穷大
    NaN:非数字

    注意:判断变量的类型 typeof 或 typeof()

    <body>
        <script>
            // var a = 3.14;
            // alert("a = " + a);
            // document.write("a")
            // console.log(a);
            // console.debug(a);
            // console.error(a);
            // console.info(a);
            // console.log(b);
            // js中的原生数据类型:number:数字(数值)类型,boolean:布尔,true false
            // string:字符串,null:object类型对象类型,undefined:未定义,变量未赋值
            // Infinity:无穷大
            // NaN:非数字
            var a = 1; // number
            var b = true; // boolean
            var c = "abc"; // string
            var d = 'abc'; // 
            var e = null; // object
            var f; // undefined
            console.log(1 / 0); // Infinity
            console.log("abc" / 2); // NaN
    
            // 判断变量的类型 typeof 或 typeof()
            console.log(typeof a); // 查看a变量的数据类型
            console.log(typeof b); // 查看b变量的数据类型
            console.log(typeof c); // 查看c变量的数据类型
            console.log(typeof d); // 查看d变量的数据类型
            console.log(typeof e); // 查看e变量的数据类型
            console.log(typeof f); // 查看f变量的数据类型
            console.log(typeof(h))
            ;
    
        </script>
    </body>
    
  • 关系/比较运算符

    比较运算符用于判断两个变量大小关系:>、<、、<=、>=、=、!=、!===,其中:

    (1) == :代表相等(它只比较内容,不比较类型)

    (2) ===:绝对相等(先比较类型,再比较内容)

    (3) !==:绝对不等

  • JavaScript流程控制

    JS中同Java一样存在流程控制语句,用法一样:

    分支:

    (1) if语句
    (2) switch语句
    

    循环:

    (1) while语句
    (2) do-while语句
    (3) for循环
    	1.普通for循环
    	2.for in 循环
    	3.forEach循环
    

    break/continue语句

    三目表达式

    <body>
        <!-- js中语句 -->
        <script>
            // if语句
            // var a = 9;
            // if(a % 2 === 0) {
            //     console.log(a + "是偶数");
            // }else{
            //     console.log(a + "是奇数");
            // }
    
            // var age = 20;
            // if(age >= 0 && age < 18) {
            //     console.log("未成年");
            // } else if(age >= 18 && age < 60) {
            //     console.log("青年");
            // } else if (age >= 60 && age < 200) {
            //     console.log("老年");
            // }else {
            //     console.log("无效年龄");
            // }
    
            // 在if中那些条件为假:0,null,"" 空字符串,undefined,NaN,false
            // if(false) {
            //     alert("真");
            // }else {
            //     alert("假");
            // }
            // var a =  5;
            // switch(a) {
            //     case 1:
            //         console.log("查询");
            //     break;
            //     case 2:
            //         console.log("修改");
            //     break;
            //     case 3:
            //         console.log("删除");
            //     break;
            //     default:
            //         console.log("无效选择");
            //     break;
            // }
    
            // 循环语句
            // var i = 1;
            // while(i <= 10) {
            //     console.log(i);
            //     i++;
            // }
    
            // var i = 10;
            // do {
            //     console.log(i);
            //     i--;
            // }while(i >= 1);
    
            // for(var i = 1; i <= 10; i++) {
            //     console.log(i);
            // }
    
            // 循环中断语句:break continue
            // for(var i = 1; i <= 10; i++) {
            //     if(i % 2 === 0 && i % 3 === 0) break;
            //     console.log(i);
            // }
    
            // for(var i = 1; i <= 10; i++) {
            //     if(i % 2 != 0) continue;
            //     console.log(i);
            // }
    
            // 三目运算符 x ? y : z;
            var a = 15;
            var b = 34;
            var max = a > b ? a : b;
            console.log(max);
     
        </script>
    </body>
    
  • JavaScript函数

函数是一组可以随时运行的代码语句,此处大家可以理解为方法

函数作用:可以避免载入时执行,可以被多次调用

  • 语法

    function 函数名(参数列表:可以没有){
    	JS代码;
    	[return 返回值;]
    }
    
  • 全局变量和局部变量

    全局变量:函数外面声明,局部变量:函数里面声明的

  • 匿名函数

    匿名函数顾名思义就是一个没有定义名称的函数:

    function (参数列表){	
        JS代码	
        [return 返回值;]
    }
    
    <body>
        <script>
            // 匿名函数
            /*
                var 变量名 = function() {
    
                }
            */
            var m = function() {
                console.log(10 > 20 ? 10 : 20);
            }
    
            // 匿名函数的调用,声明变量名()
            m(); // 调用匿名函数
    
            (function() {
                alert("匿名函数")
            })();
        </script>
    </body>
    
  • 常用的本地对象

    new 调用,创建对象,再对象去点方法

    • Date:日期对象,表示当前的系统日期
    • String:字符串对象
    • 本地对象Array:数组
    <body>
        <!-- 讲解常用的本地对象:new 调用,创建对象,再对象去点方法 -->
        <!-- 1、Date:日期对象,表示当前的系统日期 -->
        <!-- <script>
            // 使用Date对象
            var date = new Date(); // 创建一个Date对象
            // 获取date对象里面年月日
            var y = date.getFullYear(); // 获取年份
            var m = date.getMonth() + 1; // 获取月份
            var d = date.getDate(); // 获取号数
            m = m < 10 ? "0" + m : m; // 如果m小于10,在前面拼接0
            d = d < 10 ? "0" + d : d;
            var rq = y + "-" + m + "-" + d;
    
            // 获取时分秒
            var h = date.getHours(); // 获取小时
            var mm = date.getMinutes(); // 获取分钟
            var s = date.getSeconds(); // 获取秒
            var sj = h + ":" + mm + ":" + s;
            console.log(rq + "    " + sj);
        </script> -->
    
        <!-- 2、String:字符串对象 -->
        <!-- <script>
            // 创建字符对象
            // var a = "abcdefg"; // 创建字符串对象
            // console.log("a = " + a);
            // var b = new String("abcdefg");
            // console.log("b = " + b);
            // var str = "123,45,78,90,12";
            // var arrs = str.split(","); // 通过,分割成一个数组
            // for(var i = 0; i < arrs.length; i++) {
            //     console.log(arrs[i]);
            // }
                
            // for(var i in arrs) {
            //     console.log(arrs[i]);
            // }
            var str2 = "ab2cd3ef4gh";
            // var arrs = str2.split(/[0-9]{1,}/); // 通过正则表达式分割
            // for(var i in arrs) {
            //     console.log(arrs[i]);
            // }
            var s = str2.substring(1,2);
            console.log(s);
        </script> -->
        <!-- 3、本地对象Array:数组 -->
        <script>
            // 创建数组
            // var arrs = new Array(); // 创建一个空数组
            // arrs[0] = 10;
            // arrs[1] = 20;
            // arrs[2] = "abc";
            // arrs[3] = 40;
            // arrs[4] = true;
            // console.log(arrs.length);
    
            // var arrs2 =  Array(10);
            // for(var i = 0; i < arrs2.length; i++) {
            //     arrs2[i] = "a" + i;
            // }
            // arrs2[10] = 123;
            // console.log(arrs2.length);
    
            // var arrs3 = [10,20,30];
            // console.log(arrs3.length);
            // console.log(arrs3[2]);
    
            var arrs4 = new Array(10,20,30,40);
            console.log(arrs4.length);
        </script>
    </body>
    
  • 内置对象:不能new

    • Global:全局对象
    • Math:数学对象
    <body>
        <!-- 讲解内置对象:不能new -->
        <script>
            // var a = "123";
            // // Global:全局对象
            // var a2 = parseInt(a);
            // console.log(a2 + 1);
    
            // var s = String(123);
            // console.log(s + 1);
    
            // var s2 = "3 + 2 - 5";
            // var s3 = eval(s2);// 将s2中的表达式进行运算
            // console.log(s3);
    
            // Math:数学对象
            console.log(Math.ceil(3.0001));
            console.log(Math.floor(3.999999));
            console.log(Math.round(3.599999));
            console.log(Math.random());
            console.log(Math.pow(2,4));
            console.log(Math.sqrt(16));
        </script>
    </body>
    
文章来源:https://blog.csdn.net/ZWJAS/article/details/135446737
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。