JS基础讲解

js简介

前端三大件
        html  超文本标记语言  结构层  也是一门语言
        css  层叠样式表  样式层
        JavaScript 轻量级弱类型的脚本语言
js三大核心
        ES（ECMAScript) js 语法规范
        我们要按照指定的语法进行开发  js这门语言就是一个工具  我们使用这个工具解决问题
         ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
         BOM (Browser Object Model): 浏览器对象模型
         提供一整套操作浏览器的解决方法
         DOM (Document Object Model): 文档对象模型
         提供一整套文档流相关的属性和方法       

vscode 常用快捷键

1. Ctrl + / : 注释

2. Alt+B : 快速开启浏览器

3. 复制 : shift + alt + ↓

4. 移动 : alt + ↓

5. 格式化代码规范 : shift + alt + F

6. 折叠侧边栏 :Ctrl + B

7. ctr + ` => 切换vscode终端

8. 浏览器调出控制台

9. Ctrl+N : 新建

10. Ctrl + C : 复制 ( 光标在这一行即可)

11. Ctrl + X : 删除当前行

12. Ctrl+Z 撤销这一次操作

13. Ctrl+Shift+Z : 反撤销

js应用位置行内

写在标签上的 js 代码需要依靠事件（行为）来触发

写在a标签上的href属性上
<a href="javascript:alert('我是一个弹出层');">点击</a>
写在其他元素上
<div οnclick="alert('我是一个弹出层')">点击</div>
注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码

内嵌式js代码

内嵌式的js代码会在页面打开的时候直接触发

在html页面书写一个script标签，标签内部书写js代码
<script type="text/javascript">
    alert('我是一个弹出层')
</script>
注：script标签可以放在head里面也可以放在body里面

外链式jS代码

外链式js代码只要引入了html页面，就会在页面打开的时候直接触发

新建一个.js后缀的文件，在文件内书写js代码，把写好的js文件引入html页面

我是index.js文件
alert('我是一个弹出层')

html文件
通过script标签的src属性，把写好的js文件引入页面
<script src="index.js"></script>
一个页面可以引入多个js文件
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

JS中的注释

学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是个开发人员看的

写一个好的注释，有利于我们以后阅读代码

单行注释

一般就是用来描述下面一行代码的作用

可以直接写两个/，也可以按Ctrl+/

// 单行注释
// 下面代码表示在浏览器里面出现一个弹出层
alert('弹出层')

多行注释

一般用来写一大段话，或者注释一段代码

可以直接写/**/然后再两个星号中间写注释。各个编辑器的快捷键不一样，vscode是ctrl+shift+a

/*
  多行注释
*/
/*
  注释的代码不会执行 alert('弹出层')
*/
alert('弹出层')

JS输出的三种方式

<script>
        alert(4333)  //弹出弹框
        console.log('hello.word')  //控制台打印   遇到问题 使用console.log() 进行打印 如果能够出来结果说明 结果不在这里  如果不出来 说明错误出现在上面
        document.write('东风吹战鼓擂当今世界谁怕谁')  //在网页上显示
 </script>

变量

变量指的是在程序中保存数据的一个容器

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他

语法： var 变量名 = 值

定义变量及赋值

// 定义一个变量
var num;
// 给一个变量赋值
num = 100;
// 定义一个变量的同时给其赋值
var num2 = 200;

注意：

1. 一个变量名只能存储一个值

2. 当再次给一个变量赋值的时候，前面一次的值就没有了

3. 变量名称区分大小写（JS 严格区分大小写）

变量的命名规则和命名规范

• 规则： 必须遵守的，不遵守就是错

  1. 一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成

  2. 严格区分大小写

  3. 不能由数字开头

  4. 不能是 保留字 或者 关键字

  5. 不要出现空格

• 规范： 建议遵守的（开发者默认），不遵守不会报错

  1. 变量名尽量有意义（语义化）

  2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

  3. 不要使用中文

<script>
        // x = 8
        // y = 8
        // alert(x+y)  // 给cpu 发送指令 算1+1 
        // alert(x+y) 
        // alert(x+y) 
        // alert(x+y) 
        // alert(x+y)  
        // 第一个需求  100 行代码  都是算2+2   alert(2+2) 这种写法有弊端   这属于写死 想改成8+8 100行都要改  
        // 如果想简单 
        //设置 x  y  都是可变的量   
        // 第一次 x = 2 y =2 满足上面的需求  
        // 当我们想算8+8的时候 仅仅需要改 x = 8 y=8 即可
        // 这里 x y 就是变量
        // var x = 10;   // 从右往左  
        // 规则  你必须遵守  
        // 规范 风格  可遵守可不遵守 
        // alert(x)
        // var 1abc = 1
        // alert(1)
        // 只能包含 字母 数字 下划线  $ 
        // 不能以数字开头  
        // var a = 10;
        // var A = 20;
        // alert(a); // 10 
        // 严格区分 大小写
        // var = 100
        // alert(var) 
        // 避开关键字 和保留字 
        //  关键字 就是 已经被系统占用的 单词   保留字 就是虽然还没占用但是后边会占用  
        //  编辑器中高亮的 就是关键字   
    </script>

数据类型

是指我们存储在内存中的数据的类型

我们通常分为两大类 基本数据类型 和 复杂数据类型

基本数据类型

1. 数值类型（number）

   • 一切数字都是数值类型（包括二进制0b，八 进制0o，十进制，十六进制0x等）

   • NaN（not a number），一个非数字

   • console.log(0o77)八进制

2. 字符串类型（string）

   • 被引号包裹的所有内容（可以是单引号也可以是双引号）console.log('hello')

3. 布尔类型（boolean）

   • 只有两个（true 或者 false）var test=true console.log('test')

4. null类型（null）

   • 只有一个，就是 null，表示空的意思

     var test = null;
      console.log(test)

5. undefined类型（undefined）

   • 只有一个，就是 undefined，表示没有值的意思

var test; 仅仅声明 但是没有赋值

var test 仅仅声明 但是没有赋值

console.log(test) undefined

复杂数据类型

对象类型object 类 数组

函数类型function 函数 工具

判断数据类型

• 使用 typeof 关键字来进行判断 不是随便两个数据类型就能一起参与运算的

// 第一种使用方式
var n1 = 100;
console.log(typeof n1);
​
// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));
​
var test =  0xabc
        console.log(typeof test) // number  数值 如果返回的是number 代表这是一个 数值类型
        
        var haha = 'abc'
        console.log(typeof haha)  // string 字符
​
​
        var haha1 = true
        console.log(typeof haha1) //boolean  布尔
​
        var test1;
        console.log(typeof test1) //undefined  undefined
​
        var test2 = null;
        console.log(typeof test2) //object  null  是object 的一个特殊类型

判断一个变量是不是数字

• 可以使用 isNaN 这个方法来判断一个变量是不是数字

• isNaN ：is not a number

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false
​
// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

数据类型转换

数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等

其他数据类型转成数值

1. Number(变量)

   可以把一个变量强制转换成数值类型

   可以转换小数，会保留小数

   可以转换布尔值

   遇到不可转换的都会返回 NaN

2. parseInt(变量)