js入门基础 一

218 阅读4分钟

JS引入方式

1.行内式

<div onclick = "alert('这是JS代码')"></div>

2.内嵌式

<script>
alert('内嵌JS代码')
</script>

3.外链式

<script src = '路径'></script>

不论是哪种模式 都建议写在body里面

js的组成部分

  • ECMASript(ES) js的核心语法 js代码的规范
  • DOM (Document Object Model) 文档对象模型 提供各种API(属性和方法)让JS可以获取或操作HTML元素
  • BOM (Browser Object Model)浏览器对象模型 提供各种API让js可以操作浏览器 js的注释 在执行时会被忽略

变量

是用来存储具体值的容器或者代名词 可以修改

方法

  • var 定义变量
  • let(ES6)声明变量
  • const(ES6) 定义常量 值不能修改
  • function 函数名是变量 存储的值是函数类型
  • import(ES6)规范需要导出的内容
  • class (ES6) 创建类
var 变量名 = 值
let 变量名 = 值
const 常量名 = 值
(报错:Uncaught TypeError: Assignment to constant variable (尝试修改常量))
function 函数名(){
    值
}
class 类名(){
    
}

变量名的命名规范

  1. 只能是字母数字下划线 不能以数字开头
  2. 小驼峰 除了第一个单词首字母 其他单词首字母全部大写
  3. 大驼峰 每个单词的首字母全部大写
  4. 不能使用关键字和保留字 在JS中具有特殊意义的叫关键字 在以后可能成为关键字的叫保留字

变量语义化:用单词尽量描述这个变量的用途

数据类型

基本数据类型

- 字符串 String    用单引号或者双引号包起来的多个字符      **没有字符为空字符串** **引号中包含空格也不是空字符串**
- 数字 Number 正数 负数 小数  **NAN也是number类型**  **not a number 是非有效数字**
- 布尔 Boolean  只有两个值 true 或者 false
- null 空 什么都没有
- undefined 未定义 很多浏览器的初始值都是undefined
- Sombel (ES6新增) 产生一个唯一值 和谁都不重复

引用数据类型(复杂数据类型 对象数据类型)

- object
  - 普通对象 由花括号包起来 键(key) 值(value)
  {属性名1:属性值1,属性名2:属性值2}  又叫键值对
  - 数组 由方括号包起来的数组项
  - 正则 用来处理字符串的规则 /元字符/
  - Date js用来处理日期的类型
- 函数 function 将需要重复执行或者有特殊功能的代码需要封装成函数
  - function 函数名(形参){
      函数体
  }

js代码运行及常用的输出方式

  1. alert()函数 以弹出框的形式输出
  2. console.log()函数 输出来浏览器控制台的日志
  3. innerHTML属性 输出到页面元素中
  4. innerText属性 输出到页面元素中

3和4的区别 前者可以识别字符串里面的标签 并识别到标签以HTML形式插入到页面中 后者不管表面里面写什么 都不会处理 直接输出

有效数字的检测

  1. isNaN(需要检测的值) 返回的是一个布尔值 检测当前是否第一个有效数字 当需要检测的值 是NaN 就返回true 否则返回false

为什么检测的值 不是数字类型也有返回值?

因为isNaN的内部工作机制 会查看检测的值 是否是number类型 不是的话会转成number类型 是isNaN内部调用Number()把非number转成number类型

转换规则

  1. Number('12.13') 字符串使用数字转换时(可以识别小数点) 只要里面有一个不是数字就返回NaN
  2. Number(布尔值) 转换成数字 true 转成1 false 转成0
  3. Number(null) 0
  4. Number(undefined) NaN
  5. !! 引用数据类型转换成数字的时候,先调用引用数据类型的toString()函数将引用数据类型转换成字符串,然后再用Number转这个字符串。
  6. parseInt() / parseFloat() 把字符串转成数字的,和Number类似,Number是强制转化,字符串里面有一个不是数字字符,就会得到NaN;
  7. parseInt(字符串) 函数:从字符串左侧开始查找,把找到的整数部分返回。如果第一个字符就不是数字,直接返回NaN
  8. parseFloat() 函数:从字符串左侧开始查找,把找到的整数和小数一起返回,只能识别一个小数点。如果字符串第一个字符就不是数字,就直接返回NaN

数据类型检测方式

  1. typeof 运算符 基本数据类型 语法:typeof 需要检测的值或者变量; 返回一个字符串包裹着的数据类型;

所以typeof不能检测引用数据类型中的对象数据类型的具体细分(不能区分数组、对象、正则)一律返回

  1. constructor 运算符
  2. instanceof 运算符
  3. Object.prototype.toString.call() 方法

面试题: var r2 = typeof typeof typeof sum; // "string" // 执行顺序:先执行最后一个 typeof sum -> "function" -> typeof typeof "function" -> typeof "string" -> "string" // 只要是两个及以上的typeof 最后返回结果就是 "string"