自学前端js基础（上）

js05

• 在我们表格创建一个表格时，如果没有使用 thead tbody tfoot 这些标签时，浏览器会自动在页面中添加 tbody，并且将所有的tr都放到tbody中，所以实际上tr 并不是 table 子元素，而是 tbody 的子元素。

• th 标签专门用来表示表头的单元格

• HTML中还为我们提供了三个标签，来将表格分成三个部分 thead tbody tfoot

  这三个标签出现的表格，在打印时，会在每页都打印表格的头部和底部，无论编写什么位置 thead中的内容永远都会显示在表格的头部，而 tfoot 中的内容，永远都会显示在表格的底部

• 在一个表格中也可以嵌套其他的表格

  • 在很久以前，我们经常使用表格在页面进行布局，此时就需要使用大量的表格的嵌套表格布局，使用起来非常简单，但是维护起来特别的麻烦，所以现在已经很少有人用
  • 表格的列数由最多的那个 tr 来决定

• form标签创建表单

  • form中有一个必须的属性叫做action
  • action需要一个服务器的地址，当我们提交表单，填写的内容会提交到是action指向的地址

• 在form中可以创建一个表单项，用户可以通过表单项来填写信息

  • 文本框
    • 需要一个 type 属性是 text
      • 如果希望表单中的内容最终发送到服务器还必须给表单项添加一个 name 属性，该属性将会作为用户填写内容名字，在服务器还可以根据这个名字来获取用户填写内容
    • 默认情况下，用户添加的内容将会以查询字符串的形式发送给服务器，查询字符串就是url地址？后面的内容
    • 查询字符串实际上就是一个一个的名值对结构，多个名值对之间使用 & 隔开
      • 一个名字 = 一个值
      • 名字就是表单项指定的name属性值
      • 值就是用户填写的内容，在服务器中可以通过名字来获取用户填写的内容
      • 可以通过value属性为文本框指定一个默认值
  • 密码框
    • 也是 input，不同的是他的 type 需要使用 password
  • 单选按钮
    • 使用 input 来创建一个单选按钮
    • 他的 type 属性值是 radio
    • 单选按钮是通过 name 属性来分组的，相同的 name 属性属于一组
    • 像这种选择框不需要用户填写内容的，还必须指定一个 value 属性
      • 想这样选中的元素的 value 属性值将会被提交给服务器
    • 如果希望某个单选按钮在默认选中状态可以在标签中添加属性 checked='checked';
  • 多选框
    • 用 input 来创建
    • type 属性是 checkbox
  • 提交按钮
    • 用 input 创建
    • type 叫做 submit
    • 通过 value 属性可以设置提交按钮上的文字
  • 重置按钮
    • 重置按钮可以使表单恢复到默认值

• 也可以通过 button 标签来创建按钮

  • 使用 button 创建的按钮和 input 创建的按钮功能一致
  • 只不过 button 标签更加灵活

• alert('66');

  • 控制浏览器弹出一个警告框

• document.write(‘llll‘);可以向body中输出一个内容

  • 在计算机页面输出一个内容

• console.log

  • 向控制台输出一个内容

• js代码编写位置（推荐使用方式）

  • 可以将js代码编写到外部js文件中，然后通过script标签引入，
    • 写到外部文件中可以在不同页面中同时引用，也可以利用到浏览器的缓存机制
    • script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略
    • 如果需要可以在创建一个新的script标签用于编写内部代码
  • 可以将js代码编写到script中
  • 可以将js代码编写到标签的onclick属性中
    • 当我们点击按钮时，js代码才会执行
    • 虽然可以写在标签的属性中，但是他们属于结构和行为耦合，不方便维护，不推荐使用
  • 可以将js写在超链接的href属性中，这样当点击超链接时，会执行js代码

• js注释

  • 多行注释/**/
    • 注释中的内容不会被执行，但是可以在源代码中查看
    • 要养成良好的编写注释的习惯，也可以通过注释来对代码进行一些简单的调试

• js基本语法

  • js中严格区分大小写
  • js中每一条语句一分号结尾
    • 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，
    • 而且有些时候，浏览器会加错分号，所以在开发中分号必须写
  • js中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

• 字面量

  • 都是一些不可改变的值
    • 例如：1 2 3 4 5
    • 字面量都可以直接使用，但是我们一般都不会直接使用字面量

• 变量

  • 变量可以用来保存字面量，而且变量的值是可以任意改变的
  • 变量更方便我们使用，所以在开发中都是通过变量去保存一个字面量
  • 而很少直接使用字面量
  • 可以通过变量对字面量进行描述

• 声明变量

  • 在js中使用var关键字来声明一个变量

• 标识符

  • 在js中所有的可以由我们自主命名的都可以称为是标识符
  • 例如：变量名，函数名，属性名都属于标识符
  • 命名一个标识符需要遵守如下规则
    • 标识符中可以含有字母，数字，__,$
    • 标识符不能以数字开头
    • 标识符不能是ES中的关键字或者保留字
    • 标识符一般都采用驼峰命名法
      • 首字母小写，每个单词的开头字母大写，其余字母小写
  • js底层保存标识符时实际上采用的是Unicode编码
    • 所以理论上讲，所有的utf-8中含有的内容都可以作为标识符

js06

• 数据类型

  • 数据类型指的就是字面量的类型

    • 在js中一共有六种数据类型

      • String 字符串
      • Number 数值
      • Boolean 布尔值
      • Null 空值
      • Undefined 未定义
      • Object 对象

    • 其中 String Number Boolean Null Undefined 属于基本数据类型

        			而Object 属于引用（复杂）数据类型
      

  • String 字符串

    • 在 JS 中字符串需要使用引号引起来
    • 使用双引号或单引号都可以，但是不要混着用
    • 引号不能嵌套，双引号不能放双引号，单引号不能放单引号
    • 在字符串中我们可以使用 \ 作为转义字符
      • 当表示一些特殊符号时可以使用 \ 进行转义
      • \" 表示 ''
      • \' 表示 ’
      • \n 表示换行
      • \t 制表符
      • \\ 表示 \
    • 输出字面量 字符串str
      • alert("str");
    • 输出变量str
      • alert(str);

  • Number

    • 在 js 中所有的数值都是 Number 类型 包括整数和浮点数（小数）

    • JS 中可以表示的数字的最大值

      • Number.MAX_VALUE 1.7976931348623157e+308
      • Number.MIN_VALUE 大于0的最小值 5e-324

    • 如果使用 Number 表示的数字超过了最大值，则会返回一个Infinity（正无穷） -Infinity（负无穷）

    • 使用 typeof 检查 Infinity 也会返回number

      NaN 是一个特殊的数字，表示Not A Number

      使用 typeof 检查一个 NaN 也会返回number

    • 可以使用一个运算符，typeof

        来检查一个变量的类型	
      

      语法：typeof 变量

      检查字符串时，会返回 string

      检查数值时，会返回number

    • 在JS中整数的运算基本可以保证精确

    • 如果使用JS进行浮点运算，可能得到一个不精确的结果，所以千万不要使用JS进行对精确度要求比较高的运算

  • Boolean 布尔值

    • 只有两个，主要用来做逻辑判断
    • 用 typeof 检查一个布尔值时，会返回 boolean

  • Null（空值）类型的值只有一个，就是null

    • null 这个值专门用来表示一个为空的对象
    • 使用 typeof 检查一个 null 值时，会返回 object

  • Undefined（未定义）类型的值只有一个，就 undefined

    • 当声明一个变量，但是并不给变量赋值时，它的值就是 undefined
    • 使用 typeof 检查一个 undefined 时也会返回 undefined

• 强制类型转换

  • 指将一个数据类型强制转化为其他的数据类型

  • 类型转换主要指，将其他的数据类型转换为String Number Boolean

  • 将其他的数据类型转换为String

    • 方式一

      • 调用被转换数据类型的toString()方法

      • 该方法不会影响到原变量，他会将转换的结果返回

      • 但是注意：null和undefined 这两个值没有toString()方法，如果调用，会报错

      • a = a.toString();

    • 方式二

      • 调用String()函数，并将被转换的数据作为参数传递给函数

      • 使用String()函数做强制类型转换时

        • 对于Number 和Boolean 实际上就是调用toString()方法

        • 但是对于null 和undefined，就不会调用toString()方法

            	他会将  null  直接转换为  "null"
          
            			将  undefined  直接转换为  "undefined"
          

        • a = String(a);

  • 将其他的数据类型转化为Number

    • 方式一
      • 使用Number()函数
        • 字符串-->数字
          • 如果是纯数字的字符串，则直接将其转换为数字
          • 如果字符串中有非数字的内容，则转换为NaN
          • 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
        • 布尔-->数字
          • true 转成 1
          • false 转成 0
        • null -->数字 0
        • undefined --> 数字 NaN
    • 方式二
      • 这种方式专门用来对付字符串
      • parseInt() 把一个字符串转换成一个整数
      • 可以将一个字符串中有效的整数内容去除，之后转换为Number
        • 可以传递第二个参数，来指定数字的进制。a = parseInt(a, 10);
    • parseFloat() 把一个字符串转换成一个浮点数
      • 作用和parseInt()类似，不同的是它可以获得有效的小数
      • 如果对非String 使用parseInt() 或parseFloat()
      • 他会先将其转换为String然后再操作

  • 将其他的数据类型转换为Boolean

    • 使用Boolean()函数
      • 数字---> 布尔
        • 除了0 和NaN，其余的都是true
      • 字符串--->布尔
        • 除了空串，其余的都是true
      • null和undefined都会转换为false
      • 对象也会转换为true

• 在js中，如果需要表示16进制的数字，则需要以0x卡头

    		如果需要表示8进制的数字，则需要以0开头
    
    		如果需要表示二进制的数字，则需要以0b开头
    
    							但是不是所有的浏览器都支持
  

• 运算符

  • 运算符也叫操作符，可以对一个或者多个值进行运算，并获取运算结果

    • typeof 就是运算符，可以来获得一个值的类型
      • 他会将该值的类型以字符串的形式返回
      • number string boolean undefined object

  • 算数运算符

    • 当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算，任何值和NaN做运算都得NaN

    • • 可以对两个值进行加法运算，并将结果返回

      • 如果对两个字符串进行加法运算，则会做拼串

        		会将两个字符串拼接为一个字符串并返回
        

      • 任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作

    • • 可以对两个值进行减法运算，并将结果返回

    • • 可以对两个值进行乘法运算

    • /

      • 可以对两个值进行除法运算

    • %

      • % 取模运算（取余数）

  • 任何值和字符串相加都会转换成字符串，并做拼串操作

    • 我们可以利用这一点，来将一个任意的数据类型转换为String
    • 我们只需要为任意的 数据类型 + 一个 “ ” 即可将其转换为String
    • 这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数

  • 任何值做+-*/ 运算时都会自动转换为Number

    • 我们可以利用这一特点做隐式的类型转换
      • 可以通过为一个值 -0 *1 /1 + 来将其转换为Number
      • 原理和Number()函数一样，使用起来更加简单

• 一元操作符，只需要一个操作数

  • 正号
    • 不会对数字产生任何影响
  • 负号
    • 负号可以对数字进行负号的取反
  • 对于非Number 类型的值
    • 会将其先转换为Number，然后在运算
    • 可以对一个其他的数据类型使用+，来将其转换为number
    • 他的原理和Number()函数一样

• 自增 ++

  • 通过自增可以使变量在自身的基础上增加1

  • 对于一个变量自增以后，原变量的值会立即自增1

  • 自增分为两种：后++（a++）和前++（++a）

    无论是a++还是 ++a，都会立即使原变量的值自增1

    		不同的是a++ 和 ++a的值不同
    

    a++的值等于原变量的值（自增前的值）

    ++a的值等于新值（自增后的值）

• 自减--

  • 通过自减可以使变量在自身的基础上减1

  • 自减分为两种：后--（a--） 和前--（--a）

    无论是a-- 还是 --a 都会立即使原变量的值自减1

    		不同的是a-- 和 --a的值不同
    

    a--是变量的原值（自减前的值）

    --a是变量的新值（自减以后的值）

js07

• 对于Number调用toString()时可以在方法中传递一个整数作为参数

  • 此时他将会把数字转换成指定的进制，如果不指定则默认转换为10进制

• 逻辑运算符

  • JS中为我们提供了三种逻辑运算符

  • ！非

    • 可以用来对一个值进行非运算

    • 所谓非运算就是指对一个布尔值进行取反操作

      true变false，false变true

    • 如果对一个值进行两次取反，他不会变化

    • 如果对非布尔值进行取反，则会将其转换为布尔值，然后再取反

      • 所以我们可以利用该特点，来将一个其他的数据类型转化为布尔值
      • 可以为一个任意数据类型取两次反，来将其转换为布尔值
      • 原理和Boolean()函数一样

  • && 与

    • &&可以对符号两侧的值进行与运算并返回false

        只有两个值都是true时，才会返回true
      

    • JS中的“与”属于短路的与

        如果第一个值为false，则不会看第二个值
      

  • || 或

    • ||可以对符号两侧的进行或运算并返回结果

      • 两个值只要有一个true，就返回true

            如果两个值都是false，才返回false
        

      • JS中的”或“属于短路的或

        	如果第一个值为true，则不会检查第二个值
        

• && || 非布尔值的情况

  • 对于非布尔值进行与或运算时，

      会先将其转换为布尔值，然后再运算，并且返回原值
    

  • 与运算

    • 如果第一个值为true，则必然返回第二个值
    • 如果第一个值为false，则直接返回第一个值

  • 或运算

    • 如果第一个值为true，则直接返回第一个值
    • 如果第一个值为false，则返回第二个值

• 赋值运算符

  • 可以将符号右侧的值给符号左侧的变量

• 关系运算符

  • 通过关系运算符可以比较两个值之间的大小关系，如果关系成立就返回true，如果关系不成立则返回false

  • 大于号 大于等于 小于号 小于等于

  • 非数值的情况

    • 对于非数值进行比较时，会将其转换为数字然后在比较

    • 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较

        而会分别比较字符串中字符的Unicode编码
      
        	比较两个字符串时，比较的是字符串的字符编码
        
        	比较字符编码时是一位一位进行比较的
        
        	如果两位一样，则比较下一位，所以借用它来英文进行排序
      

    • 如果比较的两个字符串型的数字，则可能会得到不可预期的结果

      注意：在比较两个字符串型的数字时，一定要进行转型

• 在字符串中使用转义字符输入Unicode编码 \u 四位编码

  • 在网页中使用Unicode编码
    • &#编码; 这里的编码需要的是10进制

• ==相等运算符

  • 用来比较两个值是否相等 相等返回true，否则返回false

  • 使用 == 来做相等运算

    • 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，之后再进行比较

      undefined 衍生自 null

      所以这两个值做相等判断时，会返回true

      NaN不和任何值相等，包括他本身

• !=不相等

  • 不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
  • 使用 != 来做不相等运算
  • 不相等也会对变量进行自动的类型转换，如果转换后相等，它也会返回false

• === 全等

  • 用来判断两个值是否全等，他和相等类似，不同的是它不会做自动的类型转换

    如果两个值的类型不同，直接返回false

• ！== 不全等

  • 用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换

    如果俩个值的类型不同，直接返回true

  • isNaN()函数可以判断一个值是否是NaN

    • 如果是返回true 否则返回false

• 条件运算符

  • 条件运算符也叫三元运算符
    • 条件表达式？语句1：语句2；
    • 执行的流程
      • 条件运算符在执行时，首先对条件表达式进行求值
        • 如果该值为true，则执行语句1，并返回执行结果
        • 如果该值为false，则执行语句2，并返回执行结果
      • 如果条件的表达式的求值结果是一个非布尔值，
        • 会将其转换为布尔值然后在运算

• 运算符

  • 使用 , 可以分割多个语句，一般可以在声明多个变量时使用
  • 使用 , 运算符同时声明多个变量并进行赋值
  • 就像数学中一样，在JS中运算符也有优先级
    • 比如：先乘除，后加减
  • 在 JS 中有一个运算符优先级的表
    • 在表中越靠上优先级越高，优先级越高越优先计算
    • 如果优先级一样，则从左往右计算
  • 但是这个表我们并不需要记忆，如果遇到优先级不清楚可以使用() 来改变优先级

• 代码块

  • 我们的程序是由一条一条语句构成的
    • 语句是按照自上向下的顺序一条一条执行的
    • 在JS中使用{}来为语句进行分组
      • 同一个{}中的语句我们称为是一组语句
      • 他们要么都执行，要么都不执行
      • 一个{}中的语句我们也称为叫一个代码块
      • 在代码块的后边就不用再编写；了
    • JS中的代码块，只具有分组的作用，没有其他的用途
      • 代码块内容中的内容，在外部都是完全可见的

• 流程控制语句

  • JS中的程序是从上到下一行一行执行的

  • 通过流程控制语句可以控制程序执行流程

    • 使程序可以根据一定的条件来选择执行

  • 语句的分类

    • 条件判断语句
    • 条件分支语句
    • 循环语句

  • 条件判断语句：

    • 使用条件判断语句可以在执行某个语句之前进行判断

      • 如果条件成立才会执行语句，条件不成立则语句不执行

    • if语句

      • 语法一：

        • if(条件表达式){语句}
        • if语句在执行时，会先对条件表达式进行求值判断
        • 如果条件表达式的值为true，则执行if后的语句
        • 如果条件表达式的值为false，则不会执行if后的语句
          • if语句只能控制紧随其后的那个语句，
            • 如果希望if语句可以控制多条语句
            • 可以将这些语句统一放到代码块中
          • if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句

      • 语法二：

        • if(条件表达式){语句...}else{语句...}

        • 当该语句执行时，会先对if后的条件表达式进行求值判断

          • 如果该值为true，则先执行if后的语句
          • 如果该值为false，则执行else后的语句

      • 语法三

        • if(条件表达式){语句...}else if(条件表达式){语句...}else{语句...}
        • if...else if...else
          • 当该语句执行时，会从上到下依次对条件表达式进行求值判断
          • 如果值为true，则执行当前语句
          • 如果值为false，则继续向下判断
          • 如果所有的条件都不满足，则执行最后一个else后的语句
          • 该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句