JavaScript介绍

JavaScript是什么？

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

JavaScript作用

JavaScript作用:确定网页的行为交互(教网页做事情)

JavaScript组成

 ECMAScript     DOM  BOM

JavaScript书写位置

 

内部样式(内嵌式):通过 script 标签包裹 JavaScript 代码

外部样式:一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

行内样式:此处了解即可，后面Vue框架会使用这种模式

注释和结束符

单行注释：使用 // 注释单行代码

多行注释：快捷键:shift + alt + A (或ctrl+shift+/) 使用 /* */ 注释多行代码

输入和输出语法

输出

将数据显示到网页

// 1. 将数据显示到网页，相当于给body添加内容
document.write('我是div标签')
document.write('<h1>我是标题</h1>')

在网页弹出一个提示框，输出数据

//2 .在网页弹出一个提示框
alert("hello world");

控制台输出语法，程序员调试使用

//3. 控制台打印输出,给程序员看的.
console.log("你好！");

 

输入

在网页弹出一个输入框，让用户输入数据

prompt('请输入您的年龄：')

在网页弹出一个确认框，让用户输入 确认/取消 二选一

confirm("你确定好了吗？");

变量

理解变量是计算机存储数据的“容器”，

变量就是计算机中用来存储数据的容器,它可以让计算机变得有记忆.简单理解变量就是一个装东西的盒子.变量作用:用来存放数据.

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>

变量赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

<script> 
   // 1. 声明一个年龄变量
    let age
   //2. 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    console.log(age)
    // 3. 声明的同时直接赋值  变量的初始化
    // let age = 18
      // 小案例
    let num = 20
    let uname = '摇头娃娃老师'
    console.log(num)
    console.log(uname)
  </script>

 

更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

// 1 声明的同时直接赋值  变量的初始化
let age = 18
age = 19
console.log(age)
//let 不允许多次声明一个变量
let age = 19

 多个变量中间使用逗号隔开

// 2 声明多个变量
let age = 18, uname = '卡卡西'
console.log(age, uname)
//提倡声明方式 一行声明一个变量,可读性比较好
let age = 18
let uname = '卡卡西'
console.log(age, uname)

 

变量扩展-数组

数组是一种复杂数据类型

数组可以在容器中 存储多个数据

数组三要素: 元素 下标 数组长度

数组声明语法:

let arr = [数据1,数据2,数据3,...,数据n]

// let arr = [10, 20, 30]
    // 1. 声明数组 
    let arr = ['娃娃', '张学友', '黎明', '郭富城', '杰尼龟', 10]
    // 2. 使用数组  数组名[索引号] 从0
    // console.log(arr)
    console.log(arr[0]) // 娃娃/
    console.log(arr[4])
    // 3. 数组长度:数组名.length
	// 数组长度 =  索引号 + 1 
    console.log(arr.length)  // 6

    // let 娃娃 = 10
    // console.log(娃娃)

常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

// 1.常量 不允许更改值
const PI = 3.14
// PI = 3.15
// console.log(PI)
// 2. 常量声明的时候必须赋值
const PI

注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）

数据类型

 

基本数据类型:number(数字型) . string(字符串型). boolean(布尔型) . undefined(未定义型) . null(空类型)

引用数据类型: object对象

数字型

即我们数学中学习到的数字，可以是整数、小数、正数、负数。JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

 

算术运算符

数学运算符也叫算术运算符，主要包括加(+)、减(-)、乘(*)、除(/)、取余(%)（取模）

 

NaN  

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

布尔型

 表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

 

未定义

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。  

空类型

 JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

undefined与null的区别

undefined 表示没有赋值

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

 

数据类型检测

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：

1.作为运算符： typeof x （常用的写法）

2.函数形式： typeof(x)

有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

 

隐式转换

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

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

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

任何数据和字符串相加结果都是字符串

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。  

转换为数字型

	let str = '123'
	console.log(Number(str))
	console.log(Number('bozai'))//NaN
	// let num = Number(prompt('输入年薪'))
    // let num = +prompt('输入年薪')
    // console.log(Number(num))
    // console.log(num)
 	console.log(parseInt('12px'))
    console.log(parseInt('12.34px'))
    console.log(parseInt('12.94px'))
    console.log(parseInt('abc12.94px'))

    // -------------------
    console.log(parseFloat('12px')) // 12
    console.log(parseFloat('12.34px')) // 12.34
    console.log(parseFloat('12.94px')) // 12.94
    console.log(parseFloat('abc12.94px')) // 12.94

 

转换为字符型

	// 1. 把数字型转换为字符串型 变量.toString()
       let num = 10;
       let str = num.toString();
        console.log(str);
        console.log(typeof str);
        // 2. 我们利用 String(变量)   
        console.log(String(num));

 

字符串型

通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

1. 无论单引号或是双引号必须成对使用

2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已(口诀:外双内单 或者外单内双)

3. 必要时可以使用转义符 \，输出单引号或双引号

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个 字符串的长度  

// 检测获取字符串的长度 length 
let str = 'my name is ldh';
console.log(str.length);

字符串拼接  +运算符 可以实现字符串的拼接。

口诀：数字相加，字符相连

 

console.log(1 + 2)
console.log('我叫' + 'sober')
let age = 25 
document.write('我今年' + age + '岁了')

模板字符串

模板字符串 外面用`` 里面 ${变量名}

  // let age = 20
    // document.write(`我今年${age}岁了`)
    let uname = prompt('请输入您的姓名:')
    let age = prompt('请输入您的年龄:')
    // 输出
    document.write(`大家好，我叫${uname}， 我今年贵庚${age}岁了`)