zoukankan      html  css  js  c++  java
  • JavaScript学习笔记,粗略

    语法:

     

    区分大小写

     

    标识符,首字母是字母,_,$,其他字母加上数字,命名推荐采用驼峰命名。

     

    注释,C风格,单行注释 // ,块注释 /* ... */

     

    严格模式,在顶部添加 "use strict" ; JavaScript引擎切换到严格模式。

     

    关键字: break do instanceof typeof case else new var catch finally return void continue for switch while debugger* function this with default if throw delete in try

     

    部分保留字class enum extends super const export import

     

    变量,变量是松散类型的,可以保存任何类型的数据,使用var关键字定义,var message;

    var message="hi" ; 像这样,初始化变量并不会把message标记为字符串类型,初始化过程就是给变量赋一个值那么简单。

     

    数据类型

    5种简单的基本数据类型

    Undefined Null Boolean Number String

    1种复杂数据类型

    Object , Object 本质上是一组无序的名值组成的。

     

    ECMAScript不支持任何创建自定义的类型的机制,而所以值最终都将是上述6种数据类型之一。

     

    typeof 操作符

    对于一个值使用typeof操作符,可能会返回以下值:

    "undefined" "boolean" "string" "number" "object" "function"

     

    Undefined

    一个声明的变量但是未初始化值,默认是undefined

    var message;

    //var date;

    alert(type message) //"undefined"

    alert(type date) //"undefined" 变量的默认值是undefined,即使是没有显示声明的变量。

    alert(message) //"undefined"

    alert(date) //编译错误,变量没有显示声明

    alert(message==undefined) //true

     

    Null类型

    这个特殊的值是null , 代表一个空对象指针,而这也是使用typeof null 是会返回一个 "Object"

     

    undefined派生null ,所以undefined==null ,是返回true,但是实际上它们的用法和用途都不同。

     

    Boolean

    JavaScript中所有类型的值都有与这两个Boolean值等价的值,都能使用Boolean() 函数转换成布尔类型的值。

     转换true转换false
    String 任何非空字符串 "" 空字符串
    Number 非0数字值 0,NaN
    Object 任何对象 null
    Undefined n/a undefined

     

    数字

    整数,浮点数

    数值范围 Number.MIN_VALUE Number.MAX_VALUE, 如果一个数值超过了这个范围,负数被转换为负无穷 -Infinity , 正数被转换成 无穷 Infinity

    NaN, 这个数值表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误),任何数值除0都会返回NaN, NaN与任何值都不相等,包括本身。

    NaN==NaN //false

     

    isNaN() 函数接收一个参数,如果这个参数能被转换成数值,就返回false 。

     

    数值转换

    Number() parseInt() parseFloat()

     

    Number() 转换规则:

    如果是Boolean, 返回1或0

    如果是数字值,简单输入和输出

    如果是null,返回0

    如果是Undefined , 返回NaN

    如果是字符串,如果是 "123", "1.2" , "011" ; "0xf" 按照16进制转换,"" 空字符串转换成0,其余的字符串转换NaN。

    如果是对象,调用valueOf()方法,然后依照前面的规则转换,如果返回NaN,则调用toString()方法,再进行转换。

     

    parseInt() 第二个参数是进制。

    parseFloat() 只会解析10进制,16进制的字符串都会转换成0.

     

    严格模式下,8进制是无效的。

     

    String字符串

    表示0或者多个16位Unicode字符组成的字符序列。使用 单引号或者双引号表示。

     

    字符串的length属性,能得到字符串长度

     

    转换字符串,直接调用toString() 函数

    如果值有toString方法,就会返回结果,如果值是null 或undefined,则返回"null","undefined".

     

    Object

    每个Object实例都具有下列属性和方法。

    Constructor

    hasOwnProperty(propertyName)

    isPrototypeOf(Object) 检测这个object对象是否是这个实例

    propertyIsEnumerable(propertyName) 属性能否使用for in枚举

    toLocaleString()

    toString()

    toValueOf() 通常与tostring相同

     

     

    操作符

    ECAM操作符与众不同,能适用很多值,再应用对象时,相应的操作符通常会调用对象的valueOf toString 方法,以便取得操作的值。

     

    位操作:位操作的所有数值都是32位的,最高位是符号位。

    转换过程:64位的数值被转换成32位,然后执行操作,再将32位的结果转换回64位。会有验证的副效应,特殊的NaN , Infinity 值再应用位操作时,会被当作0处理。

     

    非 ~ 与 & 或 |

     

    布尔操作符

    逻辑非 !逻辑与 && 逻辑或 ||

     

    全等和不全等

    判断两个变量是否相等,如果有数值存在,那么要将另外一个变量也转换成数值比较。

     

    全等== 判断数值是否相等,或者两个字符串相等

    不全等=== 还要附加上类型是否相等。

     

    语句

    with语句 with(expression) statement ;

    将代码的作用域设置到一个特定的对象中。

     

    with语句会造成性能下降,严格模式下无效。

     

    函数,理解参数,ECMAScript函数不介意传递来多少个参数,也不在乎类型,即使函数定义的时候声明传递两个参数,实际上你可以传递任何个参数,包括0个,解析器不会有任何怨言。因为在内部参数会用一个数组来表示,这个数组是arguments对象,使用arguments[0] 方式访问参数。

     

    函数没有重载,因为JavaScript中函数没有签名。

     

    变量,作用域,内存问题

    基本类型和引用类型,函数是按值传递的,引用类型,复制的是引用地址,函数内部的变量,在函数退出后,自动销毁。

     

    检测引用类型,使用 instanceof 操作符

     

    执行环境及作用域

    执行环境是JavaScript中最重要的一个概念,每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。

     

    全局执行环境是最外围的一个执行环境,关联对象是window对象。

     

    每个函数都有自己的执行环境。

     

    作用域链,当代码在执行环境中执行时,会创建变量对象的一个作用域链,保证对执行环境有权访问所有变量和函数的有序访问。作用域链的前端,始终是当前执行的代码与之相关联的对象。

     

    垃圾收集

    常用的算法标记清除,不常用的引用计数

     

    没有块级作用域

     

    引用类型

    Object类型

    访问属性的方法,点方法,数组方式,person.name person["name"]

     

    Array类型

    new Array() ; new Array(10); new Array("red","green"); // 可以省去new

    ["red","green"] ;[]

     

    栈方法 push() pop()

    队列方法 push() shift() 取得第一项 unshift() 与前端插入

    重拍方法 reverse() sort()

    操作方法 concat()基于当前数组,创建新数组 slice()

    splice()最为强大的方法,删除,插入,替换,主要用途是项数组中部插入某项。

    splice(0,2) 删除数组0,1的数据

    splice(2,0,"red","green”) 在数组2的位置,删除0项,插入"red" "green"

    splice(2,1"red","green") 在数组2下标处开始,删除1项,然后在小标2开始出入项。

    位置方法 indexOf() lastIndexOf()

    迭代方法 every() filter() forEach() map() some()

    缩小方法 reduce() reduceRight()

     

    Date类型

    new Date() ;

    Date.parse() Date.UTC()

    Date.now() 获取毫秒数

    此外还有获取属性的set/get方法

     

    RegExp类型

     

    var ex=/pattern / flags ; 创建一个正则表达式,flag =[g 全局i 忽略大小写 m 多行]

     

    var patter1=/at/g;

    var pattern2=new RegExp("at","g");

     

    RegExp的实例属性:global ignoreCase lastIndex multiline source

    RegExp实例方法 exec()接受字符串,返回包含第一个匹配信息的数组,或者null。

    test()

     

    Function类型

    函数声明,函数表达式,解析器在执行环境中加载数据时,会率先读取函数声明,等到具体执行函数时,才会找到函数具体的执行代码。

     

    函数是可以作为一个值的,及可以赋值给一个变量。

     

    函数内部属性 arguments this , arguments这个对象还要一个名为callee的属性,这个属性是一个指针,指向拥有这个arguments对象的函数。

     

    函数属性和方法:函数属性length prototype

    apply() call()

    apply()方法接受两个参数,一个是其中运行函数的作用域,一个是参数数组。call和前面的函数作用相同,唯一的区别是参数要一个一个传递,不能封装成为一个数组。

     

    apply() call() 真正的作用是扩充函数赖以运行的作用域。

     

    bind() 这个方法会创建一个函数的实例,其this值会被绑定到传给bind函数的值

     

    String类型

    字符方法:charAt() charCodeAt()

    concat() slice() substr() substring()

    indexOf() lastIndexOf() trim() match() replace() split()

     

    内置对象

    Global对象 Math对象

     

    面对对象的程序设计

    Object.defineProperty() 定义对象属性,属性值,get/set方法

    Object.defineProperties()

    Object.getOwnPropertyDescriptor()

     

    创建对象

    工厂模式:function createPerson(){return object}

    构造函数模式:function Person(){} //new Person();

    原型模式:function Person(){} Person.prototype.name="lin";

     

    delete person1.name //删除person1实例name保存的数据引用。

     

    in 使用in操作符,验证对象是否有这个属性。

    "name" in person1 //true

     

    构造函数模式定义用于定义实例属性,原型模式用于定义方法和共享的属性。

    两者可以混合使用。

     

    动态原型模式 寄生构造函数模式 稳妥构造函数模式

     

    继承

    ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链实现的。

     

    原型链,其基本思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。

     

    构造函数,原型,实例关系:

    每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

     

    函数表达式

    闭包:是指有权访问另外一个函数作用域中的变量的函数。

    创建闭包非常简单,就是在函数内部返回一个函数。

     

    匿名函数具有全局的执行环境,所以this指向的对象不是函数本身,而是window。

     

    JavaScript没有私有成员的概念,所以对象的属性都是公开的。

     

     

    Window

    window代表一个浏览器的一个实例

     

    窗口关系及框架

    如果页面中包含框架,则每个框架都拥有自己的window实例,且保存在frames集合中。

    window对象都有一个name属性,其中包含了框架的名称。

    top对象始终指向最高层框架,parent指向当前框架的直接上层框架

    与框架有关的对象是self,它指向window

     

    窗口位置

    screenLeft screenTop 或者firefox的screenX screenY

    moveTo() moveBy()

    窗口大小

    不同的浏览器,提供不同的属性,innerWidth innerHeight

     

    导航和打开窗口

    window.open() 第二个参数可以是页面的框架的name属性,或者_self _top _blank等

    弹出窗口的可能会被浏览器限制

     

    JavaScript是单线程语言,允许设置定时执行

    window.setTimeout(function,time|s)

    window.clearTimeout()

    setInterval(function,second)

     

    系统对话框

    alert() confirm() prompt()

     

    location对象

    既是window对象的属性,也是document对象的属性,

    window.location=document.location

     

    location属性

    hash host hostname href pathname port protocol search

     

    位置操作

    打开一个新的URL location.assign(url) = window.location=url = location.href=url

    修改location对象的其他属性也会改变当前加载的页面,location.hash,hostname等

     

    location.replace() 也会改变当前加载的页面,但不会生成新的历史记录

    location.reload()有可能从缓存中加载 location.reload(true) //从服务器重新加载

     

    navigator对象

    识别客户端浏览器的事实标准

     

    history对象保存着用户上网的历史记录

    go(n) forward() back()

     

    浏览器检测

    能力检测 怪癖检测 用户代理检测

     

    事件

    事件流 描述的是从页面中接受事件的顺序。

    比如 页面上你 按下了一个按钮,那么你不但只按了这个按钮,还按下了 这个按钮的 容器,也按下了这个页面。

     

    事件流,事件冒泡。事件捕获是和事件流相反的描述。

    DOM事件流:三个阶段,事件捕获阶段,处于目标阶段和事件冒泡阶段。

     

    事件处理程序

    HTML事件处理程序

    onclick ,处理click事件

     

    DOM0事件处理程序

    var btn=document.getElementById("btn");

    btn.onclick=function;

     

    DOM2事件处理程序,IE事件处理程序

     

    事件对象

    DOM中的事件对象,兼容DOM的浏览器会将一个event对象传入处理处理程序中。

    event对象的属性 type target

    event对象的方法 preventDefault()

     

    事件类型

    DOM3级事件规定了以下几类事件:

    UI事件,当用户与页面上的元素交互时触发,load,unload,abort,error,select,resize,scroll

    焦点事件,元素获得,失去焦点时触发, blur , focus

    鼠标事件,click,dblclick,mousedown, mouseenter, mouseleave ,mousemove, mouseout ,mouseover, mouseup

    滚轮事件 mousewheel

    文本事件,

    键盘事件 keydown , keypress, keyup

    合成事件

    变动事件

     

    此外还要HTML5事件,设备事件,触摸和手势事件

     

     

    事件委托

    对事件处理程序过多的问题的解决问题就是事件委托,事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所以事件。

     

    表单脚本

     

    表单基础知识

    在HTML中,表单是由<form>元素表示的,而在JavaScript中表单对应的是HTMLFormElement类型。

    HTMLFormElement类型的都有属性和方法:

    acceptCharset action elements enctype length method name

    reset() submit() target

     

    可以通过document.getElementById()找到表单。

    或者通过document.forms这个集合找到页面中的全部表单。

     

    文本框脚本可以过滤输入

     

    选择框脚本

    Option元素都有HTMLOptionElement对象表示

     

    表单序列化

    富文本编辑

     

    DOM

    D文档 O对象 M模型

    实用的4个DOM方法 getElementById getElementsByTagName getAttribute setAttribute

     

    CSS-DOM

    style属性,改变检索样式信息

    三位一体的网页:结构体,表示层,行为层。

     

    获取对象的样式属性,通过style

    element.style.property ; //element.style.color

     

    相比于直接修改标签的style样式的做法并不值得推荐,而是使用更新className更加值得推崇。

    获取对象使用element.className="classp" .classp{ color:red }

  • 相关阅读:
    ubuntu 读取群晖 nas 盘
    nginx 下载 apk、ipa 不改名zip 设置
    centos 更新时间
    go 交叉编译跨平台
    ffmpeg安装
    批量打开文件夹下所有的指定文件(批处理)
    端口流量统计
    关于 bind 和 dns
    关于使用 certbot 给网站增加 ssl
    Macos下制作可启动的u盘(转)
  • 原文地址:https://www.cnblogs.com/lin7155/p/13866614.html
Copyright © 2011-2022 走看看