js_入门-CSDN博客

本文链接：https://blog.csdn.net/ZWJAS/article/details/135446737

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>