7.20 JS入门

最新推荐文章于 2024-09-17 21:49:02 发布

yangyue012345

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量101

点赞数

分类专栏： html CSS JavaScript 文章标签： javascript visual studio code html css

本文链接：https://blog.csdn.net/qq_51967148/article/details/118941341

版权

html 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

学习内容：

一、JS相关

浏览器本身不会执行JS代码,而是通过内置JS引擎来执行JS代码。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JS 语言归为脚本语言，会逐行解释执行。
JS三部分组成 ECMAScript(JS语法) DOM(页面文档对象模型) BOM(浏览器对象模型)
JS和CSS写的部分一样有行内内嵌外部
JS注释单行注释// ctrl+/ 多行注释/**/shift+atl+a

二、JS输入输出语句

输入框 prompt(“请输入年龄”)；

弹出警示框 alert（“计算的结果是”）

在浏览器控制台打印输出信息console.log(“我是程序员可以看到的”)

三、变量声明以及命名规范

变量声明

（1）变量声明 var age;声明一个age的变量内存给一个空的

（2）变量赋值age=10;

（3）输出结果 console.log(age);

（4）初始化 var age=10;

特殊情况	说明	结果
var age; console.log(age);	只声明，不赋值	undefined
console.log(age)	不声明，不赋值，直接使用	报错
age=10;console.log(age);	不声明只赋值	10

命名规范

（1）由字母数字下划线 $符号组成数字开头不能是关键字

（2）严格区分大小写

一些需要注意的点

（1）JS没有数据类型，是由等号右边的值来确定的

（2）isnaN判断是不是非数字是非数字为true是数字为false

（3）String 单引号‘‘为字符串嵌套要外双内单或者外单内双要配套使用

（4）.length计算字符串的长度 +进行字符串的拼接

（5）undefined和数字相加结果是NaN， null和数字相加结果是原数字

（6）typeof()查看数据类型

四、数据类型的转换和运算符

（1）把其他类型转换为字符串

加号拼接字符串(加一个‘ ’)

字符串拼接都是字符串隐式转换

（2）把其他类型转换为数字型

parseInt(string)函数转换为int型

parseFloat(string)函数转换为浮点型

（3）把其他类型转换为布尔型 Boolean（）

‘‘ 0”， NAN， null， undefined 转换为false 其他为true

（4）运算符的优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ -- ！
3	算数运算符	先* / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后\|\|
7	赋值运算符	=
8	逗号运算符	，

五、流程控制主要有三种

顺序结构分支结构循环结构和Java语句相似，这里跳过

六、数组

数组的创建

（1） var a=new Array(); 创建一个空数组

（2）var arr=[];数组里面可以放置任意类型的数据

数组新增元素

（1）修改length arr=[4,5,6,7] arr.length=5

（2）修改索引arr=[4,5,6,7] arr1[4]=’123’

不确定有多少参数时用 arguments是一个伪数组

（1）伪数组不是一个真正的数组

（2）伪数组具有数组的.length 属性

（3）伪数组按照索引的方式进行存储的

（4）伪数组没有真正数组的一些属性。pop() push()等。

七、JS作用域相关和Java语言相似，这里略。

八、JS 预解析

JS引擎运行JS分为两步　预解析　代码执行

1、预解析(JS引擎会把JS里面所有的var还有function提升到当前作用域的最前面)

（1）预解析分为变量预解析（变量提升）和函数预解析（函数提升）

（2）变量提升就是把所有的变量声明提升到当前作用域的最前面，不提升赋值

（3）函数提升就是把函数声明提升到最前面　不调用函数

　2、代码执行　按照代码书写的顺序从上往下执行

如下图：

学习产出：

1、利用for循环简单打印九九乘法表

<!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>Document</title>
    <script>
        var str = '';
        for (var i = 1; i < 10; i++) {
            for (var j = 1; j <= i; j++) {
                var result = i * j;
                str += i + "×" + j + "=" + result;
            }
            str += "  \n";
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

2、利用循环实现数组的倒置

<!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>Document</title>
    <script>
        var arr = [5, 4, 3, 2, 1];
        var temp = 0;
        for (i = 0; i <= arr.length - 1; i++) {
            for (j = 0; j <= arr.length - i - 1; j++)
                if (arr[j] > arr[j + 1]) {
                    temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
        }
        console.log(arr);
    </script>
</head>

<body>

</body>

</html>

3、利用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>Document</title>
    <script>
        var flag = 0;
        var year = prompt("请输入年份");
        function isrunnian(year) {
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = 1;
            }
            return flag;
        }
        function days() {
            if (isrunnian == 1)
                alert("二月份" + "29" + "天");
            else
                alert("二月份" + "28" + "天");
        }
        days();
    </script>
</head>

<body>

</body>

</html>