JS 基础知识篇

JavaScript

• 负责页面的行为和动作(交互)

• 组成部分：

  ​ 1. ECMAScript: 基础的语法(常量, 变量, 函数, 循环, 判断…)

  ​ 2. DOM: Document Object Model, 文档对象模型, 处理文档内容有关的方法

  ​ 3. BOM: Browers Object Model, 浏览器对象模型, 描述与浏览器进行交互的方法

• JavaScript的特点:

  ​ 1. 弱类型, 没有严格的数据类型

  ​ 2. 事件驱动, 所有的逻辑出发需要借助事件

  ​ 3. 跨平台

  ​ 4. 面向对象, 一切事物皆对象

• JavaScript: 弱数据类型, 变量没有严格规定数据类型, 具体的变量的数据类型是什么取决于变量里面存的是什么, 是什么就是什么类型;

  C语言: 强数据类型; 在声明变量的同时就规定了变量的数据类型, 一旦规定, 变量的数据类型不可修改, 如果变量在存储数据的时候存储了规定之外的数据类型, C语言会识别并报出警告甚至报错;

js 输出方式

1. alert() 显示一个带有指定内容和确定按钮的警告框

// 警告弹出框
			alert("你好!");
			alert("世界!");

2. console.log() 在控制台输出内容, 常用语代码测试

//			console.log(666);
//			console.log("你好");

3. document.write() 向页面body里写内容 (字符串文字, 字符串标签), 如果写多个, 效果为拼接不是覆盖

   //			document.write("你好!");
   //			document.write("<br>");
   //			document.write(123);
   //			document.write("<h1>标题标签1</h1>");
   

4. innerHTML 向某个html元素里写内容(必须先找到元素)

5. 修改元素属性

6. 修改元素样式

常量

• 在程序运行期间, 值不可以被修改的量

  1. 数字常量: 1, 5, -10, 1.22, 0, -5.76
  2. 字符串常量: “123”, “你好”, “abc”, “09+123=-”, ‘ABC’

• js里, 单引号和双引号都是字符串

• 字符串是可以嵌套的, 嵌套时, 只允许双引号里套单引号, 或者单引号里套双引号;

变量

• 在程序运行期间, 其存储的值可以被修改的量。把变量理解成一个存储数据的容器。

• 变量在使用之前是需要声明(创建)的

• 语法：

  var 变量名;

  var关键字用于创建变量, 一旦这个变量被创建, 接下来我们就可以使用这个变量

  ​ 在使用变量的过程中, 直接通过变量名操作变量, 不需要在写var

• 建议, 变量在创建的同时给变量赋初始值

  语法:

  var 变量名 = 初始值;

• 变量名的命名规则

  1. 由数字, 字母, 下划线, 美元符号($)组成, 数字不能开头

  2. 不能与系统的关键字重名

  3. 见名知意

  4. 遵循通用的命名规则(驼峰, 帕斯卡, 匈牙利)

     var name = "张三";
     var age = 20;
     var sex = "男";
     
     			
     // 驼峰  出现多个单词, 第二个单词开始首字母大写
     var personCount = 20;
     // 帕斯卡 出现多个单词, 所有单词首字母大写
     var PersonCount = 30;
     // 匈牙利 出现多个单词, 以字母i开头,所有单词首字母大写
     var iPersonCount = 40;
     

原始数据类型

• 数据类型, 数据的格式

  1. 数字类型 number

  2. 字符串类型 string

  3. 布尔类型 boolean

     一种非真即假的数据类型, 只有两个值, true或者false

  4. 空值类型 null

  5. 未定义类型 undefined

     变量声明却没有赋值, 值就是undefined, 对象的某个属性不存在, 获取到的也是undefined

  6. 对象类型 object

     js里有一些复杂数据类型都是object类型, 比如数组, 对象

• 获取变量的数据类型 , 使用typeof关键字; null数据类型打印出来是object

• 数字和字符串的相互转化

  显式转化：

  1. 数字转字符串 String(数字)
  2. 字符串转数字 Number(字符串) ps: 当有些字符串无法转化成数字时, 结果为NaN

  隐式转换：

  1. 数字转字符串 数字加上空字符串
  2. 字符串转数字 字符串减0 字符串*1 字符串/1

  注：NaN(not a number)是一个值, 其数据类型是number, NaN是一个不与任何数字相等的数字, 包括其本身

• 其他数据类型转布尔

  显式转化：

  1. Boolean(其他数据类型)

  隐式转化：

  在某些需要布尔值的表达式里, 系统会自动将一些数据类型转化成布尔值

  1. 数字: 非0即为真, 0为假
  2. 字符串: 非空即为真, 空字符串为假
  3. null: 为假
  4. undefined: 为假
  5. NaN: 为假
  6. 对象: 为真

运算符

• 算数运算符 (+, -, *, /, %, ++, --)

  console.log(a * b);
  // js里除数可以为0, 结果是Infinity
  
  // ++ 自增运算符; -- 自减运算符 属于单目运算符
  // ++/--运算符在前, 先执行自增或者自减操作, 再执行表达式的其他操作
  // ++/--运算符在后, 先执行表达式的其他操作, 在执行自增或者自减操作
  
  
  // JS里的加法运算, 
  // 数字就是普通的加法运算;
  // 字符串, 做的是字符串拼接;
  // 如果一个是数字, 一个是字符串, 做的是字符串拼接(数字转字符串)
  // 除了加法, 减法,乘法,除法,取余如果碰到一个是数字, 一个是字符串, 做的是算数运算(字符串转数字)
  

• 赋值运算符 (=, +=, -=, *=, /=, %=)

• 关系运算符 (>, <, >=, <=, ==, =, !=, !)

  /*
   ===或者!== 在做比较时, 先比较两侧的数据类型, 如果数据类型不一致, 返回false(true); 如果数据类型一致, 再判断值是否一致;
   
   == 或者!= 在做比较时, 不考虑数据类型的问题(把两侧的数据类型转化一致, 再比较)
  */
  

• 逻辑运算符(&&, ||, !)

短路现象

• 有些时候, 系统能从第一个式子判断出整个运算的结果, 那么系统不再理会第二个式子.