前端学习笔记———浏览器篇

• 谷歌

  • webkit 国内常用 谷歌 qq浏览器
  • gecko 火狐
  • presto Open
  • trident IE

控制台结构

• Elememts: 查看结构样式，可以在线修改调试
• Console: 查看输出结果和报错信息，是js调试利器
• Sources: 查看项目源码，目录结构。
• Network: 查看当前网站所有资源的请求信息（包括和服务器的HTTP报文信息）、加载时间等（项目优化）
• Application: 查看当前网络数据存储和资源文件（盗图偷数据~~）

JS做客户端语言（node.js）

按照相关的JS 语发，去操作页面元素，有时还有操作浏览器里面的一些功能

• ECMAScript3/5/6…: JS的语法规范（变量、数据类型、操作语句等）
• DOM（document object model: 文档对象模型，提供一些JS的属性和方法，用来操作DOM 元素
• BOM(browser object model): 浏览器对象模型，提供一些JS 属性和方法，用来操作浏览器的（比如浏览器的类型，浏览器窗口大小）

JS 中的变量（variable）

变量：可变的量，用来存相应的值,可以改变这个值

  //ES3
   var a=3；
       a=13;
      console.log(a);//13
 //ES6
   let b=3;  //Es6 新增
       b=13;
       console.log(b)//13
   const c=100;// ES6新增
   
   function fn(){}// 创建函数也相当于创建变量
   
   class A{}// 创建类也相当于创建变量
   
   //ES6的模块导入也可以创建变量
   import B from './B.js';

   //Symbol  创建唯一值
   let n=Symbol(100)
 

JS 命名规范

• 严格区分大小写
• 以字母、数字、下划线、$ ，数字不开头，

    let Test=100;
    let $box  //=>  一般JQ 获取的$开头
    let _box  //=> 一般公共变量 _ 开头 

• 使用驼峰命名法： 首字母小写，其余单词首字母 大写（命名语义化，使用英文）

  let studentInformation;
  let syudentInfo; //部分简写
  //常用的缩写：add/insert/create/new(增加)、update(更新修改)、delete/del/remove/rm(删除)、sel/select/query/get(查询获取)  info(信息)

• 不能使用 关键字

 var let  const function import   ...

JS 常用数据类型 （data type）

• 基本数据类型
  • 数字 number
    常规数字和NaN
  • 字符串string
    单引号 、双引号、反引号（撇）所包含的
  • 布尔 boolean
    true false
  • 空对象指针null
  • 未定义undefined
• 引用数据类型
  • 对象数据类型 object
    • { } 普通数组
    • [ ] 数组对象
    • / ^ [ + - ] ? ( \ d | ( [1-9])\d )?$/ 正则对象
    • Math数学函数对象
    • 日期对象
    • 类数值
    • …
  • 函数数据类型function

JS数据转换

• Number( [ var ] )
• parseInt/parseFloat( [ var ]，[j进制]) // 第一个非有效数字结束 空数组 要先转空字符 [ ] => ’ ’

转布尔类型

只有 0、NaN、’ '、null 、undefined，五个值转false 其他 true

• Boolean( [ var ]):
• !: <=> Boolean

null / undefined

null /undefined 都代表没有

• null : 意料之中（空值 不占内存 。一般 都是开始并不知道值或数据类型）
• undefined : 意料之外 （不是我决定的）

 let num; //=> 默认没有赋值 默认值 undfined

obect 对象数据类型-普通对象

{ [ key ]: [ value ], … } 任何一个对象都是由零到多组键值对 key : value 属性名和属性都是字符串

  let person ={
       name: ' five',
       age '22',
       height: '178cm',
       weight: '64kg',
       1:100
 };
 //获取方式
 //=>  对象.属性名
 //=> 对象[ 属性名 ]
console.log( person.name)；// five
console.log( person[ ' age ' ]);// 22
console.log(person.sex)；//undefined
console.log(person[1]);// 100

console.log(person.1)//  报错 语法错误  属性名是数字 不能以 

 //设置属性名属性
 person.GF= ‘ LHL’;
 console.log('GF');
// 删除属性
//=> 真删除: 把属性彻底干掉
//=> 假删除： 属性还在，值为空

数组是特殊的对象数据类型

/*
  1.属性值默认 属性名 默认生成数字，从零开始 ，连续递增，代表每一项位置的数值的位置  即索引
*/
  let ary=[12,'哈哈哈'，true,13];
    console.log(ary[0]); //12
    console.log(ary[ary.length-1]); //13

浏览器 想要执行JS代码

1. 从电脑内存分配出一块内存，用来执行代码（栈内存 => Stack (变量存储空间 值储存空间) ）

2. 分配一个主线程用来 自上而下执行

JS 数据类型检测

• typeof [ var ] : 用来检测数据类型的运算符 无法细分具体对象数据具体类型。
• instanceof : 用来检测当前实例是否率属于某个类
• constructor : 基于构造函数的检测数据类型（也基于类的方式）
• Object.prototype.toString.call(): 检测数据类型最好的办法

JS 操作语句：判断、循环

函数 function

函数就是一个方法或则功能的体，函数就是把实现某个功能的代码放到一起进行分装，以后想要操作实现这个功能，只需要执行即可 => ‘封装’：减少页面中冗余代码，提高代码重复使用率（低耦合高内聚）

• 创建函数
  • 形参
  • 返回值
• 执行函数
  • 实参
• arguments
• 函数底层运行机制
• …

创建函数

        //ES5
         function [  函数名 ]( [  形参1 ], ... ){
         }//形参默认 undfined
       //ES6
        let res=(a,b)=>a+b;
       //匿名函数
       //匿名函数：把一个函数本身作为值赋值给其他东西，一般靠驱动触发执行（靠某个事件触发）
       document.body.onclick =function(){}
       setTimeout(function(){}.1000)
       //自执行函数
       (function(n){
          //n=>100
       })(100);


windows.onload =function(){
// 事件： 当页面中结构和内容都加载完全才会执行
}
//JQuery
$(document).ready(function(){ })

原型链 (MDN)

     __proto__  (myobj)
               ...
             __proto__   (myObject)
                        ...
                     __proto__   （Object）
                               ....
                                      //原型链 最终基于对象原型Object   一层一层形成链
obj.prototype 使用原型链上的东西