JavaScript第一天

快捷键：win+v查看剪切板；Ctrl+右箭头跳过一个单词；Ctrl+回车换行

一、JavaScript介绍

 通常是运行在浏览器的编程语言
 可以实现人机交互效果，提供逻辑思维能力

作用：

   服务端编程、数据交互（获取后端数据、渲染到前端）、表单验证、网页特效（动画效果）、监听用户行为

（A）组成

（一）ECMAscript（规范|规则）

规定了js基础语法核心知识：语言法律
例如：创建变量、分支语句、循环语句、对象等

（二）Web APIs（网页应用接口 | 可操作的实体对象）

（1）DOM：document object model

文档对象模型
实体化了一个对象叫document，整个HTML页面就是一个文档

（2）BOM：browser object model

操作浏览器
实体化了一个浏览器window对象，整个网页

（B）、JavaScript书写位置

  内联（行内样式）、内部、外部

内联样式.png

内部样式：应该写在</body>标签上面。（浏览器从上至下逐行解析代码）

因为js可以去控制元素，所以应该写在所有的HTML标签元素之后

外部样式：通过src引入HTML页面中

但是<script>标签不要写内容，会被忽略

（C）、JavaScript注释

1、单行注释
符号：//
快捷键：ctrl+/
2、块注释
符号：/* */

（3）、JavaScript结束符

1、结束符

■ 代表语句结束
■ 英文分号 ;
■ 分号可写可不写，要么都写，要么都不写，建议写分号
■ 换行符（回车）会被识别为结束符

（D）、JavaScript输入输出法

alert（）和prompt（）会阻塞主线程

1、输出方式

  ■ alert（要弹出的内容);里面不可以写多个
  ■ document.write("要输出的内容");可以写多个
  ■ console.log（'控制台打印');console控制台.log日志方法，可以写多个

2、输入

  ■ prompt（'提示文字'）;

二、变量

  变量是计算机存储数据的容器（盒子）|  是内存中的地址空间

（A）变量声明方式

  1、语法： let关键字  变量名
  2、变量赋值：变量名 = 数据
  3、变量值的修改：变量名 = 数据
  4、声明多个变量：let age = 18,uname  = '刘亦菲'；中间以逗号隔开

注意：
（1）声明变量的同时可以进行赋值，例如：let age = 18;
（2）变量名不能重复
（3）名词解释：
关键字：系统内部已经定义好的词汇，
字面量：字面上，所见即所得的一个数据

（B）变量本质

内存：计算机存储数据的地方，相对于一个大空间
变量：是程序在内存中申请的一块用来存数据的小空间（内存中的一个地址空间）

（C）变量名命名规范与规则

1、规则

  ▲ 不能使用关键字
  ▲ 特殊字符：_下划线和$
  ▲ 不能以数字开头
  ▲ 可以有数字、字母

2、规范

  ▲ 起名要有意义
  ▲  遵循小驼峰命名法

小驼峰.png

三、数据类型

js数据类型分为两大类：
基本数据类型（简单数据类型），引用数字类型（复杂数字类型）

数据类型.png

（一）基本数据类型

1、数字类型number

   整数、小数、负数

2、字符串string

   单引号' '   、双引号" "    、反引号 `` (esc键下面）

△ 必须成对使用
△ 单双引号可以互相嵌套使用，前提是必须交替使用
△ 自己嵌套自己时，必须使用转义符号‘\’
△ 反引号中间可以直接用回车的

3、拼接字符串string

语法：字符串+字符串
数据${变量}
模板字符串

模板字符串.png

4、布尔类型（boolean）

true 真 false 假
用来判断

5、未定义（undefined）

没有初始化，没有开辟内存空间

声明变量但是未赋值

未定义类型.png

检测开发场景，通过值是否是undefined来判断传递过来了没

6、null （空类型）

赋值了，初始化了，只是值叫做空
代表empty变量为空数据

（二）检测数据类型

1、JS是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
JavaScript是强数据类型，例如 int a = 3 必须是整数
02、通过typeof 关键字来检测变量类型
3、通过控制台颜色看，可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

（三）类型转换

使用表单、prompt获取来的数据默认是字符串类型的

1、隐式转化

  系统内部自动的进行类型转化

规则：
1、+ 号两边只要有一个是字符串，都会把另外一个转成字符串；

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

隐式转换.png

2、显式转化

 //1、Number(数据)
console.log(Number("123"));
// 1.1 当数据不能转化为数字的时候，会返回NaN,not a number
console.log(Number("abc"));
// 1.2 NaN是一个数字类型
console.log(typeof Number("abc"));
// 2、parseInt(数据)
// 作用：解析为 整数
console.log(parseInt("1.23"));
// 3、parseFloat(数据)
// 作用：可以保留小数点
console.log(parseFloat("1.233"));

转换为字符型:

String(数据)、变量.toString(进制)

     // 字符串转化
    // 1.string（数据）
    console.log(String("321"));
    console.log(String(123));
    console.log(String(true));
    console.log(String(undefined));
    console.log(String(null));
    // 2.变量.toString(进制)；进制不写，默认为十进制
    // 需要一个变量
    // 数字.toString() 会报错，需要变量
    let a = 123;
    console.log(a.toString());

补充知识：

parseInt() parseFloat()
【parse解析的意思：只要传入的数据是以数字开头的，就能解析成功，返回值为第一个数字直到碰到非数值为止；比如 parseInt("123aa") ;返回 123】
Number() : 不能解析，有非数字就返回NaN

四、常见错误

  1、Uncaught ReferenceError: age is not defined（ age变量没有定义过）
  2、Uncaught SyntaxError: Identifier 'age' has already been declared （提示 “age”已经声明）
  3、Uncaught SyntaxError: missing ) after argument list （提示 参数少了 ））