01-JS基础认知

最新推荐文章于 2024-05-24 13:39:19 发布

孙小明的测试修炼手册

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量26

点赞数

分类专栏：前端实战-JS 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44431329/article/details/131446266

版权

前端实战-JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、JavaScript的介绍

js是一种运行在客户端（浏览器）的编程语言，实现人机交互
1、主要作用

网页特效(监听用户的一些行为，让网页做出对应的3反馈)
表单验证（针对表单数据的合法性进行判断）
数据交互
服务器编程

2、JS的引入方式

JavaScript程序是不能被独立运行，他需要被嵌入到HTML当中，然后浏览器才能执行代码，把js代码引入到HTML中，有两种方式

1、内部形式

通过scrpit标签包裹javaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
    <script>
        alert('嗨，欢迎来传智播学习前端技术！');
    </script>
  
</body>
</html>

2、外部形式

一般将JavaScrpit代码写在独立的.js结尾的文件中，通过script标签中的src进行引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

3、注释

注释一共有两种 1、单行注释 // 多行注释/* / 被注释的代码是不会被执行的注释快捷键为* ctrl + /**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        
        // alert('这是一个弹窗') 

        /*alert('这是一个弹窗')
        alert('这是一个弹窗')*/
    </script>
</body>
</html>

4、输入和输出三种形式

1、输出
alert() 页面弹出一个输入框

docment.wirte() 输出HTML页面上（可以解析HTML标签）

2、输入
prompt() 弹窗的形式出现在浏览器中，一般需要用户来输出什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert('这是一个弹窗')
        document.write('向文档中输入数据')
        prompt('您想输入点什么呢')
    </script>
</body>
</html>

5、变量

变量就是存储数据的容器，用来存储数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // x是存储变量的标识符，可以通过x标识符把5取出来
        let x = 5
        let y = 6
    
    </script>
</body>
</html>

1、声明和赋值

声明变量和赋值的格式：声明关键字、变量名、赋值

    <script>
        // let 为关键字 x为标识符 5为赋值
        let x = 5
        let y = 6
    </script>

注意

不允许重复声明
javascript内置的关键字不能作为变量名
允许声明和赋值同时进行

2、变量的命名规则

只能是字母、下划线、$ 且不能为数字开头
字母区分大小写，数字
javascript内置关键字不能作为变量进行使用
尽量保证变量具有一定的语意，见字知意

6、数据类型

一共分为4个数据类型 1、数值类型 2、字符串类型3、布尔类型 4、undefined类型
检测数据类型可以使用typeof关键字

1、数值类型

整数小数整数负数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(typeof 1);
        console.log(typeof -1);
        console.log(typeof 1.1);
        console.log(typeof -1.11);
    </script>
</body>
</html>

2、字符串类型

被(‘’)活(“”) 包裹的数据叫做字符串，推荐使用单引号,无论单引号还是双引号，必须成对进行使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(typeof 'AS');
        console.log(typeof "BB");
    </script>
</body>
</html>

3、布尔类型

布尔类型有两个固定的值 true和flase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(typeof false);
        console.log(typeof true);
    </script>
</body>
</html>

4、undefined类型

一个比较特殊的值，可以理解为变量被声明了但是没有赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let age;
        console.log(typeof age);
    </script>
</body>
</html>

7、类型转换

1、隐式转换

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13; // 数值
    let num2 = '2'; // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2);

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2);

    let a = prompt('请输入一个数字');
    let b = prompt('请再输入一个数字');

    alert(a + b);
  </script>
</body>
</html>

2、显示转换

因为只靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验来总结规律，所以一些数据就需要进行显示转换
Number
通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12';
    let f = 8;

    // 显式将字符串 12 转换成数值 12
    t = Number(t);

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f); // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello';
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str));
  </script>
</body>
</html>