Java Script 基础01

冯诺依曼转世

已于 2024-04-24 13:57:48 修改

阅读量1k

点赞数 16

于 2024-04-18 16:41:27 首次发布

本文链接：https://blog.csdn.net/qq_52897007/article/details/137786483

版权

本文介绍了JavaScript的基本概念，包括其解释型、面向对象、弱类型、动态性特点，以及各种引入方式（行内式、外链式）、常用的输出函数如alert、confirm和prompt，还有变量、数据类型、运算符和数据类型转换等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

Javascript （简称“ JS” ）是⼀种直译式脚本语⾔，⼀段脚本其实就是⼀系列指令，计算机通过这些指令来达成⽬标。它⼜是⼀种动态类型的编程语⾔。JS⽤来在⽹⻚中添加⼀些动态效果与交互功能

一.JavaScript的特点

1. 解释型脚本语⾔

JavaScript 是⼀种解释型脚本语⾔，使⽤JavaScript编写的代码不需要编译，可以直接运⾏

2. ⾯向对象

JavaScript 是⼀种⾯向对象语⾔，使⽤JavaScript不仅可以创建对象，也能操作使⽤已有的对象

3. 弱类型

JavaScript 是⼀种弱类型的编程语⾔，对使⽤的数据类型没有严格的要求，⽐如可以将⼀个变量初始化为任意类型，也可以随时改变这个变量的类型

4. 动态性

JavaScript 是⼀种采⽤事件驱动的脚本语⾔，它不需要借助web服务器就可以对⽤户的输⼊做出响应，例如我们在访问⼀个⽹⻚时，通过⿏标在⽹⻚中进⾏点击或滚动窗⼝时，通过JavaScript可以直接对这些事件做出响应。

5. 跨平台

JavaScript 不依赖操作系统，在浏览器中就可以运⾏。因此⼀个JavaScript脚本在编写完成后可以在任意系统上运⾏，只需要系统上的浏览器⽀持JavaScript即可。

二.引入方式

1. ⾏内式

⾏内式是将JavaScript代码作为HTML标签的属性值使⽤。
 
    <a href="javascript:alert('哈哈哈~')">点我一下</a>
运行结果:

2. 外链式

JavaScript 不仅可以直接放在HTML⽂档中，也可以在JavaScript脚本⽂件中。 JavaScript 脚本⽂件是⽂本⽂件，扩展名为.js

具体操作步骤如下：

1. 新建⽂本⽂件，后缀名为复制代码 .js ，它表示该⽂本⽂件是JavaScript类型的⽂件

2. 打开js⽂件，在⽂件中直接编写JS代码，不需要写<script>标签

3. 保存JavaScript⽂件，在此建议把JavaScript⽂件和⽹⻚⽂件放在同⼀个⽬录下

4. 新建HTML⽂档

5. 在</body>和</html>标签中插⼊⼀个<script>标签.定义src属性,设置属性值为指向外部 JavaScript⽂件的路径。示例如下：
 <!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>
 </body>
 <script src="./text.js"></script>
 </html>

3. 嵌⼊式

嵌⼊式就是把<script> 标签包裹成JavaScript代码,⽤户可以在<script>标签中直接编写JavaScript代码，具体操作如下：

1. 新建⼀个html文档

2. 在</body>和</html>标签中插⼊⼀个<script>标签

3.为<script>标签设置type="text/javascript" 属性

4.在<script>标签内输⼊JavaScript代码
 <!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>
 </body>
 <script type="text/javascript">
 // 此处编写JavaScript代码
</script>
 </html
现代浏览器默认<script>标签的脚本类型为 JavaScript ，因此可以省略type属性；如果需要兼容早期版本浏览器，则需要设置type属性

三.JavaScript的输出

1. alert()

使⽤JavaScript中的 alert() 函数可以⼦浏览器中弹出⼀个提示框，在提示框中可以定义输出的内容，语法格式如下:
// alert弹窗(只显示确定按钮)
    window.alert('嘿嘿嘿！！！');
    alert('嘿嘿嘿！！！');

2. confirm()

●使⽤confirm()函数创建的提示框中，包含了“ 确定” 和“ 取消” 两个按钮

●点击“ 确定” 按钮，confirm()函数返回⼀个布尔值true;点击“ 取消” 按钮，返回⼀个布尔值false
 window.confirm('确定删除吗？');
    confirm('确定删除吗？');

3. prompt()

●使⽤JavaScript中的 prompt() 函数可以弹出提示框，该提示框可以让⽤户输⼊信息。

●该函数返回⽤户输⼊的字符串

语法格式如下： prompt( 要提示的信息 );
   // prompt弹窗(有确定和取消按钮，以及输入框)
    window.prompt('请输入您的姓名：')

4. console.log()

使⽤JavaScript中的 console.log() 可以在浏览器的控制台输出信息，我们通常使⽤console.log() 来调试程序，语法格式如下：
// 在控制台上打印内容
    window.console.log('这是在控制台上打印的文字')
    console.log(window)
window.alert() 和同， window.confirm() 可以分别简写成复制代码 alert() 和 confirm() 不 console.log() 不能简写。

要看到 console.log() 的输出内容需要先打开浏览器的控制台，打开⽅式有两种：

● c 在浏览器窗⼝按 F12 快捷键，在控制台中选择" Console "或“ 控制台 ” 选项

● 点击⿏标右键，在弹出菜单中选择“ 检查 ” 选项，在控制台中选择" Console "或“ 控制台 ” 选项

5. document.write()

使⽤JavaScript中的document.write() 可以向HTML⽂档中写⼊HTML或者JavaSctipt代码
// 在网页中写入内容
    window.document.write('这是用js的方式显示的文字')

三.字⾯量和变量

字面量

在JavaScript中字⾯量⽤来表示⼀个固定的值，字⾯量是不能被改变的。字⾯量可以直接使⽤，但是⼀般我们不会直接使⽤字⾯量。
 // 字面量
    alert(6.1);  
上述代码中,6.1就可以称为字面量

变量

变量是所有编程语⾔的基础之⼀，可以⽤来存储数据（可以保存字⾯量），例如字符串、数字等，并在需要时设置、更新或者读取变量中的内容。我们可以将变量看作⼀个值的符号名称。
 /*  
        定义变量    
            关键字 变量名

        关键字
            var和let用来声明变量
                let不能重复声明变量，var可以重复声明变量
                let不能做变量提升，var可以做变量提升
            const 声明常量/字面量 声明的数据不能改变
    */
 const MAX_NUMBER = 10;
    // MAX_NUMBER = 20;//常量不能改变
    console.log(MAX_NUMBER);
    document.write(MAX_NUMBER);

赋值

 声明变量并赋值
    var num = 10;
    num = 15; //修改数据
    console.log(num);

// 先声明，再赋值
    var num;
    num = 5;
    num = 9; //修改数据
    console.log(num);

 // 声明多个变量
    var num1;
    var num2;
    num1 = 5;
    num2 = 10;
    console.log(num1,num2);

 var num1 = 5,num2 = 10;
    console.log(num1,num2);

var num1,num2;
    num1 = 5;
    num2 = 10;
    console.log(num1,num2);

var num1,num2;
    num1 = 5,num2 = 10;
    console.log(num1,num2);

四.数据类型

●基本数据类型： string （字符串）、undefined （未定义）、 number （数字）、 boolean （布尔）、 null （空）、 Symbol （ES6新增）;

● 引⽤数据类型： Object （对象）、 Symbol 是ES6 Array （数组）、 Function （函数）

typeof 操作符

● typeof 操作符⽤于检测变量值或直接值的数据类型

● typeof 的返回值是⼀个String类型的描述检测结果的字符串

1. String类型

// typeof(需要检测的数据) 方法检测数据类型
    let str = "这是js中的字符串";
    console.log(str,typeof str);
    console.log(typeof(str));

2. Number类型

let num = 10;
    num = 5.3;
    num = 20/4;
    console.log(num,typeof num);

3. Boolean类型

 let bol = true;
    bol = false;
    console.log(bol,typeof bol);

4. Null类型

Null 是⼀个只有⼀个值的特殊数据类型，表示⼀个空值，即不存在任何值，什么都没有，⽤来定义空对象指针。
let x = null;
console.log(x,typeof x);
使⽤ typeof 操作符来查看Null 的类型，发现Null的类型是 Object ，说明 Null 属于Object对象的⼀个特殊值。

将变量赋值为Null时，我们可以创建⼀个空的对象

5. Undefined类型

Undefined 也是⼀个只有⼀个值的特殊数据类型，表示未定义。当⼀个变量已声明但是未赋值时，这个变量的默认值是 Undefined.
 var num;
 console.log(num)
●在使⽤ typeof 操作符查看未赋值的变量时，发现它们的类型也是undefined 。

●对于未赋值的变量，使⽤ typeof 操作符查看其类型会发现，未声明的变量也是undefined.
 var message; 
console.log(typeof message); //message
console.log(typeof a); //a变量未声明

五.运算符

1. 算术运算符

 // 算术运算符
    var num1 = 10;
    var num2 = 5;
    console.log(num1 + num2);//15
    console.log(num1 - num2);//5
    console.log(num1 * num2);//50
    console.log(num1 / num2);//2
    console.log(num1 % num2);//0

2. 自增自减运算符

● ++/--在前先运算再赋值

● ++/--在后先赋值再运算

 var num = 10;
    var result1 = ++num;
    var result2 = --num;
    var result3 = num++;
    var result4 = num--;
    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);

3. 赋值运算符

  // 赋值运算符 = += -= *= /= %=
    var num1 = 10;
    num1 += 20;
    console.log(num1);
    var num2 = 10;
    num2 -= 20;
    console.log(num2);
    var num3 = 10;
    num3 *= 20;
    console.log(num3);
    var num4 = 10;
    num4 /= 20;
    console.log(num4);
    var num5 = 10;
    num5 %= 20;
    console.log(num5);

4. 字符串运算符

 // 字符串运算符
    let str1 = "哈哈哈";
    let str2 = "crazy";
    str1 += str2;
    console.log(str1 + str2 + "!!!");

5. 模板字符串

// 模板字符串
    let str1 = "哈哈哈";
    let str2 = "crazy";
    console.log(`${str1}--${str2}!!`);
    let num1 = 10;
    let num2 = 20;
    console.log(`${num1 + num2}`);

6. 比较运算符

/*  
    比较运算符
        == 相等(比较值)
        === 全等(比较值和数据类型)
        != 不相等
        !== 不全等
        >   >=   <   <=
    */  
    let num1 = 10;
    let num2 = "10";
    console.log(num1 == num2); // true
    console.log(num1 === num2); // false
    console.log(num1 != num2); // false
    console.log(num1 !== num2); // true
    console.log(num1 > num2);
    console.log(num1 >= num2);
    console.log(num1 < num2);
    console.log(num1 <= num2);

7. 逻辑运算符

// 逻辑运算符 && || !
    // && 两侧都为真，则为真，其中一个为假，则为假
    let result1 = true && true;
    let result2 = true && false;
    let result3 = false && true;
    let result4 = false && false;
    let result5 = 10 < 5 && 10 < 20 && 10 > 8;
    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);
    console.log(result5);

// || 两侧其中一个为真则为真，否则为假
    let result1 = true || true;
    let result2 = true || false;
    let result3 = false || true;
    let result4 = false || false;
    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);

//  ! 取反
    let result = 10 > 5;
    console.log(!result);

8. 三元运算符

 /*  
        三元运算符
            条件判断?满足条件执行的操作:不满足条件执行的操作;
    */
    let num = 10;
    num > 5?console.log('大于5'):console.log('不大于5');

六.数据类型转换

将⼀个值的数据类型转换为另⼀个值的数据类型，称为数据类型转换 .在JavaScript中，数据类型转换分为强制类型转换和⾃动类型转换两种.

1. ⾃动类型转换

当某些运算符需要运算的数据值不符合运算规则的类型时，JS引擎会⾃动将其转换为规定的数据类型，我们将这种转换⽅式称为⾃动类型转换。

 // 自动类型转换
    let num = "10" * 2;
    console.log(num, typeof num);

    let num2 = "10" * "2";
    console.log(num2, typeof num2);

    let num3 = true * 1;  // false 0 true 1
    console.log(num3, typeof num3);

    let num4 = null + 1;
    console.log(num4, typeof num4);

    let num5 = undefined + 1;
    console.log(num5, typeof num5); // NaN(not a number 不是一个数字，但是是number类型)

    let num6 = false - true;
    console.log(num6, typeof num6);

    let num7 = 200 / false;
    console.log(num7, typeof num7);  // Infinity 正无穷

2. 强制类型转换

2.1 Number(value)

// 将其他类型转换为number类型
    // 1.Number(需要转换的数据)
    let str1 = "10";
    let result1 = Number(str1);
    console.log(result1,typeof result1);


    let bol = false;
    bol = true;
    let result2 = Number(bol);
    console.log(result2,typeof result2);

    let str2 = "";
    str2 = ' ';
    let result3 = Number(str2);
    console.log(result3,typeof result3);

2.2 ⼀元运算符

//2.一元运算符 + -
 let a = "111";
    console.log(a, typeof a);  // 111 string
    let changeA = +"111";
    console.log(changeA, typeof changeA); // 111 number
    let b = true;
    console.log(b, typeof b); // true boolean
    let changeB = +true;
    console.log(changeB, typeof changeB); // 1 number
    let c = "abc";
    console.log(c, typeof c); // abc string
    let changeC = +"abc";
    console.log(changeC, typeof changeC); // NaN number

2.3 parseInt(value)

 // 3.parseInt(需要转换的数据) 将其他数据类型转换为整数
    let str = "111";
    str = "3.84";
    str = "111aaa";
    str = "111aaa222";
    str = "aaa111";
    let bol = true;
    let result1 = parseInt(bol);
    let result2 = parseInt(str);
    console.log(result1,typeof result1);
    console.log(result2,typeof result2);

2.4 parseFloat(value)

 // 4.parseFloat(需要转换的数据) 将其他数据类型转换为小数
    let str = "3.14";
    str = "5";

    let bol = true;
    let result = parseFloat(bol);
    console.log(result,typeof result);

2.5 Boolean(value)

 // 将其他类型转换为boolean类型
    // 1.Boolean(需要转换的数据)
    let num = 1;
    num = 0; // false 
    num = 2;
    let result1 = Boolean(num)

    let str = "今天周一";
    str = "";
    let result2 = Boolean(str); // false 

    let bol = undefined;
    let result3 = Boolean(bol); // false

    let x = null;
    let result4 = Boolean(x); // false

    let y = NaN;
    let result5 = Boolean(y); // false

2.6 !value

! 运算符表示取反，是当前值的相反值，主要⽤于操作布尔值。当值部分不是布尔值时会将该值先转换为布尔值，然后再取反。
 // 2.取反
    let str = "今天周一";
    let result1 = !str;
    console.log(result1,typeof result1);//false

    let num = 1;
    let result2 = !num;
    console.log(result2,typeof result2);//false

    let x = 100 / false;
    // let result = Boolean(x);
    let result3 = !x;
    console.log(result3,typeof result3);//false

2.7 String(value)

 // 将其他类型转换为string类型
    // 1.String(需要转换的数据)
    let num = 10;
    num = 100 / 0;
    let result1 = String(num);
    console.log(result1,typeof result1);

    let bol = true;
    let result2 = String(bol);
    console.log(result2,typeof result2);

2.8 连接运算符“ +”

// 2.连接运算符 +
    let result = 10 + "2022";
    result = "10" + 2022;
    result = 10 + +"18";  
    console.log(result,typeof result);