前端入门学习笔记之JavaScript

河桥清光

已于 2022-10-25 16:38:24 修改

阅读量531

点赞数

文章标签： javascript 前端学习

于 2022-10-21 12:55:36 首次发布

本文链接：https://blog.csdn.net/qq_62637200/article/details/127435979

版权

这篇博客介绍了JavaScript的基础知识，包括它的作用、组成以及在网页中的应用。讲解了JavaScript的三种书写位置，如内部、外部和内联。此外，还详细阐述了模板字符串的使用，数据类型的分类及其转换，特别是Number、String和Boolean类型的特性。还涵盖了逻辑运算符的短路规则和运算符优先级，并给出了一个简单的计算器案例。

摘要由CSDN通过智能技术生成

前言

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

--作用：

①网页特效（监听用户的一些行为让网页作出对应地反馈）

②表单验证（针对表单数据地合法性进行判断）

③数据交互（获取后台的数据，渲染到前端）

--组成：

ECMAScript：规定了js基础语法核心知识

比如：变量、分支语句、循环语句、对象等等

Web APIs：

①DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

②BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

书写位置

1. 内部JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

<body>
    <script>
        //内容
    </script>     
</body>

2.外部JavaScript

代码写在以.js结尾的文件里

规范：通过script标签，引入到html页面中。

且script标签中间无需写代码，否则会被忽略

<body>
    <!-- 通过src引入外部js文件 -->
    <script src="my.js"></script>     
</body>

3.内部JavaScript

代码写在标签内部

<body>
    <button onclick="alert('嘻嘻')">快点我！</button>
</body>

模板字符串

1.作用：

拼接字符串和变量

原先方法：

    <script>
        let name= prompt('请输入您的名字：')
        let age = prompt("请输入您的年龄：")
        document.write('大家好，我叫'+name+'，今年'+age+'岁')
    </script>

利用反引号：

    <script>
        let name= prompt('请输入您的名字：')
        let age = prompt("请输入您的年龄：")
        document.write(`大家好，我叫${name},今年${age}岁了`)
    </script>

数据类型

1.数字型 Number

（1）最值

最大值：Number.Max_VALUE

最小值：Number.MIN_VALUE

(2）特殊值

NaN：非数字

无穷大：最大值乘任一大于1的值

无穷小：无穷大乘“-1”

（3）isNaN（）：用于判断值是否为数字，为数字返回false，否则返回true

2.字符串型 string

（1）字符串长度及拼接

用length（）可测出字符串长度

“字符串+任何其他类型”=拼接字符串

3.布尔型Boolean

只有true和false两种值，true参与数值运算当作1，false当作0

4.未定义类型 undefined

未定义是比较特殊的类型，只有一个值为undefined

只声明变量，不赋值的情况下，变量的默认值为undefined

let age     //声明变量但是未赋值
document.write(age)     //输出undefined

情况	说明	结果
let age; console.log(age)	只声明不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age=10; console.log(age)	不声明只赋值	10（不提倡）

5.null空值

null 表示值为空

let obj = null

null 和 undefined 区别

①undefined 表示没有赋值

②null 表示赋值了，但是内容为空

null开发中的使用场景：把null作为尚未创建的对象

数据类型的获取

语法：typeof 变量名

注：prompt得到的值都是字符串

数据类型转换

1.隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：

① +号两边只要有一个是字符串，都会把另外一个转成字符串

② 除了+外的算术运算符比如 - * / 等都会把数据转成数字类型

缺点：

转换类型不明确，靠经验总结

小技巧：

+号作为正号解析可以转换成Number

console.log(11 + 11)	22
console.log('11' + 11)	1111
console.log(11 - 11)	0
console.log('11' - 11)	0
console.log(1 * 1)	1
console.log('1' * 1)	1
console.log(typeof '123')	string
console.log(typeof + '123')	number
console.log(+ '11' +11)	22

2.显式转换

为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换

(1）转换为数字型

①Number(数据）

转成数字类型

如果字符串内容里有非数字，转换失败时结果为NaN，即非数字

②parselnt(数据)

只保留整数

③parseFloat(数据)

可以保留小数

（2）转换为字符串

toString()

语法：

number.toString(radix)

当radix为2，数字以二进制值显示

let age = 10
console.log(age.toString())    //10
console.log(age.toString(2))    //1010

逻辑运算符

运算规则

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

符号	短路条件
&&	左边为false就短路
\|\|	左边为true就短路

运算符优先级

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

    <script>
        let a = 3 > 5 && 2 < 7 && 3 == 4
        console.log(a);              //fasle，此时发生逻辑与中断

        let b = 3 <= 4 || 3 > 1 || 3 != 2
        console.log(b);             //true，此时发生了逻辑或中断

        let c = 2 === "2"
        console.log(c);             //false ，数据类型不匹配

        let d = !c || b && a
        console.log(d);             //true，此时发生了逻辑或中断
    </script>

流程控制（不过多介绍）

1.if分支语句

        if(){
            
        }
        else if(){

        }
        else{
            
        }

2.三元表达式

运行时先判断式1，为真返回式2，为假返回式3

表达式1?表达式2:表达式3

3.switch 分支语句

switch case 一般需要配合break关键字使用，没有break会造成case穿透

        switch(数据)
        {
            case 值1:
                代码1;
                break;
            case 值2:
                代码2;
                break;
            default:
                代码n;
                break;
        }

4.for循环

for( ; ; )
{

}

5. while 与 do while循环

do…while 和 while 的执行过程非常相似，唯一的区别是：“do…while 是先执行一次循环体，然后再判别表达式”。当表达式为“真”时，返回重新执行循环体，如此反复，直到表达式为“假”为止，此时循环结束。

while(表达式){


}

do{


}while(表达式);

6.小案例--简单计算器

需求：用户输入两个数字，然后输入 + - * / 任何一个，可以计算结果

<!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>
</head>
<body>
    <script>
        let num1 = +prompt('请输入第一个数:')
        let num2 = +prompt('请输入第二个数:')
        let sp = prompt('请输入 + - * / 运算:')

        switch(sp)
        {
            case '+':
                alert(`您选择的是加法，结果是：${num1 + num2}`)
                break
            case '-':
                alert(`您选择的是减法，结果是：${num1 - num2}`)
                break
            case '*':
                alert(`您选择的是乘法，结果是：${num1 * num2}`)
                break
            case '/':
                alert(`您选择的是除法，结果是：${num1 / num2}`)
                break
            default:
                alert(`输入无效，请重新输入 + - * /`)
        }

    </script>
</body>
</html>