JavaScript基础 第一天 变量,数据类型

一.JavaScript介绍

1. JavaScript介绍 ）

1.1 JavaScript是什么?

• 是一种通常运行在浏览器中（运行环境）的编程语言;
• 可以用来实现人机交互效果，提供逻辑思维能力。
  1.2 JavaScript作用
• 监听用户的行为，并让网页作出对应的反馈
• 网页特效（动画效果）
• 表单验证 (针对表单数据的合法性进行判断)
• 数据交互 (获取后台的数据, 渲染到前端)
• 服务端编程 (node.js)
  1.3 JavaScript的重要性
• 前端的唯一脚本语言； Vue，react等框架语言都是基于js的；
  1.4 JavaScript的组成
• ECMAScript 规范： 规定了JavaScript的语法
• Web APIs(可操作的实体对象) : DOM BOM
  DOM： document object model 操作文档（浏览器帮我们实体化为了一个对象： document）
  BOM： browser object model 操作浏览器（浏览器帮我们实体化为了一个对象： window)

2. JavaScript的书写位置

2.1 内部 JavaScript
规范：script 标签写在上面
浏览器逐行解析,遇到script标签,会阻塞文档解析
原因一：如果JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效
原因二：因为script可能会修改dom元素，那么继续解析文档没多大意义，为了提升性能，浏览器会阻塞文档解析
2.2 外部 JavaScript
script 标签中间无需写代码，否则会被忽略！
2.3 内联 JavaScript 不推荐

3. JavaScript注释

3.1 单行注释

• 语法: //
• 作用: //右边这一行代码会被注释
• 快捷键: Ctrl + /
  3.2 块注释
• 语法: /* */
• 作用: 在/* */中间的内容被注释

4. JavaScript结束符

• 结束符为英文分号 ;
• 结束符可写可不写
• 换行符(回车)会被识别成换行符
• 为了风格统一,要么每句都写,要么都不写(按团队要求)

5.输出语法

常见的输出语法有 alert() , document.write() , console.log()

6.输入语法

输入语法: prompt('提示文字')

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字，获取的输入内容是字符串

二. 变量

1.什么是变量

• 变量是计算机存储数据的"容器"
• 变量的作用是用来存放数据的

2.变量的使用

2.1变量的创建 --声明变量
语法: let 变量名
let是关键字
2.2 变量赋值
语法: 变量名 = 数据

2.3 变量声明赋值连写
语法: let 变量名 = 数据

let age = 18

2.4变量值的修改
语法: 变量名= 数据

   let age = 1       age = 2      //变量值变为2  在页面中输出age 结果为2      document.write(age)

2.5 声明多个变量
语法: let 变量1 = 数据1 , 变量2 = 数据2 ---- 中间用逗号隔开

let name = '刘德华' , age = 18 , sex = '男' 

2.6案例:交换变量值
需求:num1= 10 , num2 = 20 交换两个变量的值 输出 num1= 20 , num2 = 10

//声明两个变量并赋值let num1 = 10 , num2 = 20//声明一个临时变量,并将num2的值给temp  temp的值为20let temp = num2//把num1 的值赋给num2   num2 的值为10num2 = num1//把temp 的值赋给num1  num1的值为20num1 = temp

2.7 字面量：字面上（表面上看上去去的）； 所见即所得的 一个数据；
一眼看上去，就知道这个数据的 类型 和 值的大小

3.变量命名规则与规范

规则：必须遵守，不遵守报错
规范：建议，不遵守不会报错，但不符合业内通识
3.1 规则：
不能用关键字
关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量
3.2 规范：
起名要有意义
遵守小驼峰命名法
第一个单词首字母小写，后面每个单词首字母大写。例：userName

三.数据类型

js数据类型整体分为两大类: 基本数据类型,引用数据类型

1.数字类型(number)

JavaScript 中的正数、负数、小数等 统一称为 数字类型.

      console.log("正数", +100);      console.log("小数", 1.23);      console.log("负数", -1.23);

2.字符串类型(string)

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

      console.log('123');      console.log("321");      console.log(`彦祖`);

注意点:

• 无论单引号或是双引号必须成对使用
• 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
• 必要时可以使用转义符 \，输出单引号或双引号

字符串拼接

语法: 使用加号拼接字符串

document.write('我叫' + '刘德华')//输出为 我叫刘德华let name = '刘德华'let song = '忘情水'document.write(name + song)//输出为 刘德华忘情水

模板字符串

用反引号包裹数据,${变量} 使用变量

let name = '刘德华' , age = 18document.write(`我叫${name},今年${age}岁了`)//输出 我叫刘德华,今年18岁了

3.布尔类型(boolean)

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

4. 未定义类型（undefined）

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

使用场景:我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

5. null(空类型)

null 表示 值为 空
null 和 undefined 区别：

• undefined 表示没有赋值
• null 表示赋值了，但是内容为空

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

6.检测数据类型

使用typeof 检测数据类型

四.类型转换

1.为什么需要数据类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
坑： 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型

2.隐式转换

• 加号（+） 左右，只要有一个字符串，就吧另外一个值转化为字符串
• 除了+号之外的，算数运算符；会吧数据转化为数字

• +号 可以作为正号解析

  
  
  

3.显式转换

3.1转换为数字型
语法: Number(数据)

• 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
• NaN也是number类型的数据，代表非数字
  语法: parseInt(数据)
• 只保留整数
  语法: parseFloat(数据)
• 可以保留小数

3.2 转换为字符型
语法:
String(数据)
变量.toString(进制) 进制默认为十进制

努力的往前飞，再痛也无所谓，黑夜过后的光芒有多美。 -- 张杰 《我们都一样》