JavaScript基础培训

结构

ECMAScripBOMDOM

变量声明 (空格的使用,等同oc)

var a = 3;

语句

语句1; 语句2;

语句1 语句2

语句1; 语句2;

function(){ //具有风险的语句 return a }

注释风格

// 行注释 /*块注释*/

数据类型

String Number Boolean Null Undefined Object

String(字符串)

String类型用于表示由0或多个16位Unicode字符组成的字符序列 由双引号或单引号表示 没有字符类型 单个字符串值即可 转义字符() 字符串是不可变得 赋值时会销毁旧值,赋予新值

var fistName = "liu"; var lastName = "zhaozhen"; var FirstName ='LIU";//错误 var say = "he said,\"hi\""; var charA = "A";

Number(数字)

数字 0………Infinity NaN JS只有一种数字类型; (使用== 判断 1和1.0是否相等) 内部为64位浮点数 支持浮点数 整数 具备一些转换方法

var a = 1; var b = 0.1; var c = 0.2; //错误使用 if (b+c = 0.3){ alert("succ"); } //正确方法 var d = (b*10 + c*10) / 10; if (d = 0.3) { alert("succ") } //转换方法 parseFloat("21.4");//返回21.4; parseFloat("76 bones");//返回76; parseFloat("bones 76");//返回NaN;

NaN,即非数值(Not a Number)是一个特殊的数值,这个数值表示本来要返回数值的操作数未返回数值的情况,这样就不会抛出错误(其他语言会导致错误,从而停止代码执行)

两个特点 :

任何涉及NaN的操作都会返回NaN;

不等于任何值,包括自己本身,因此增加了一个新的判断isNaN

parseFloat("bones 76");//返回NaN; NaN / 10;//返回NaN alert(NaN == NaN);//false;

BOOLean

只有两个字面量值 true和false 区分大小写 函数Boolean转换

数据类型转换为true的值转换为false的值BooleantruefalseString任何非空字符串“”空字符串Number任何非零数字值(包括无穷大)0和NaNObject任何对象nullUndefinde无undefined

undefinde

只有一个值,即特殊的undefinde

在使用var声明变量但未对其加以初始化时,这个变量值即为undefined

var message; alert(message == undefinde);//ture alert(message);//警告框⚠️显示undefinde alert(aget);//错误 //坑人之处 alert (typeof message );//'undefinde' alert (typeof age);//'undefinde'

//undefinde 派生自null //如果判断,相等性测试== 返回true; //===却不相等

//区别:没有必要显示声明undefined,但是只要是未保存的对象就应该声明为null;体现空指针,也能?

Null

NULL 拥有唯一值“空值(null)”的类型。 空值 (null value)代表对象值故意留空的一个原始值(期望)。

在 APIs 中，null 常被放在期望一个对象，但是不引用任何对象的参数位置。

空对象指针,期望指望对象(类似于oc中的nil);id a = nil;期望

所以typeof为object,也是一种验证

//如果准备用来保存对象,初始化为null

var car = null; if (car != null){

//执行

}

控制

var message = ""; var bool = true; if(bool) message = "result is ture"; if(bool) {message = "result is ture"}; if (bool){ {message = "result is ture"}; }

//有风险 加上;

if(bool) { {message = "result is ture"}; } var color; switch (color){ case "red": message = "red"; break; }

//for forin do …while while

Function(函数)

作用域 函数中 if 内存泄漏 传参,参数没有类型,可以在里面判断, 参数没有必要全部传递,默认undefind 也可以赋予初始值 es6做了修改

//基本语法

function sayHello() { alert("Hello"); } //匿名函数 赋值给变量 var aFun = function () { alert("Hello"); }

//传参 * 没有类型 可以在内部判断 * 多传忽略 * 少传undefintd

function max(a,b) { //最好判断类型 if (){ var c=5; } return a+b+c; }

es6

function max(a=5,b=6) { //最好判断类型 if (){ var c=5; } return a+b+c; }

Object(对象)

对象是一组数据和功能; 最基本 Objec类型是所有对象的基础

基本声明

var o = new Object(); o.name = "zhaozhen"; o.write = function print(){ alert(hi); }

为字面量(讲解非法标识符)

var myObject = { name:"leo", "sec-name":"zahozhen", }

工厂方法生成

解决了重复代码,but不能获取对象的类型

function myObjectType() { var person = new Object(); person.name = "leo"; person.age = 16; person.info = function () { alert("hi"); } }

构造函数生成(注意首字母大写,this相关)

function MyObjectType() { this.name = "leo"; this.age = 16; this.info = function () { alert("hi"); } }

使用

var myob = new MyObjectType(); var name = myob.name; alert(myob.constructor == MyobjectType);//true //更靠谱的检测 alert(myob instanceof MyobjectType);

更加节约的方法

function MyObjectType() { this.name = "leo"; this.age = 16; this.info = sayHi; } } function sayHi(){ alert("hi"); }

扩展方法(原型模式)

基础:采用构造函数 ,有一个原型对象 原型对象 只有一个;子对象.prototype指向父类(委曲求全的父类,并非真正,历史)

MyObject.prototype.row = "5"; MyObject.sayHi = function(){ alert("hi"); }

//原型扩展的 指向父类 默认同一个 修改为新建

继承 function Student() { return this; }

Student.prototype = new myObjectType(); var xiaoming = new Student(); xiaoming.name = 18;

封装 在函数内部的方法,即为封装;如function () { alert(“hi”); }

高级

() if的内存泄露 从函数讲起…

无私奉献的两个附加参数:this和arguments

参数this非常重要,他的值取决于调用的模式;

函数方法调用模式构造器调用模式apply调用模式

当形参和实参不匹配时(圆括号是调用运算符)

var myMethod = function (a,b){ alert(a+b); } myMethod(1,2,3,4,5);//忽略 myMethod();//undefinde

方法调用

当一个函数保存为对象的一个属性时,我们称之为一个方法;

var myObject = { value:0, increment:function(inc){ this.value += typeof inc === "number"?inc :1; } }

通过this访问自所属的对象.这个绑定发生在调用时,超级延迟;

函数调用

var sum = add(3,4);

以此模式调用,this被绑定到全局对象.这是一个语言设计上的错误;

假如语言正确:this应该绑定到外部函数;

myObject.double = function(){ var helper = function(){ this.value = this.vale * this.vale; } helper(); }

正确的处理:that

myObject.double = function(){ var that = this; var helper = function(){ that.value = that.vale * that.vale; } helper(); }; myObject.double(); document.writeIn(myObject.value);

构造器调用模式

一个函数,如果创建的目的就是希望结合new前缀来调用,那么他就被称为构造器函数.按照约定,保存在以大写格式命名的变量里.如果调用时没有

之前的例子

function Person(name, age, job){//注意大写,这是一个约定 this.name = name; this.age = age; this.job = job; this.sayName = function{ alert(this.name); } } var person1 = new Person("zhaozhen",29,"soft engineer");

特点

没有显示创建对象;直接将属性和方法付给了this对象;没有retrun语句;

经历的步骤

创建一个新对象将构造函数的作用域赋值给新对象(因此this就指向了这个新对象;执行构造函数中的代码(为新对象添加属性)返回新对象;

==和===

javascript有两组相等运算符,

===和!== 会按照你期望的方式运行,如果类型一致且值相同,那么===返回true,!==返回false; 而==和!=只有在两个运算数类型一致时才会做出正确的判断.如果运算数是不同的类型,他们试图去强制转换值得类型 ,转换规则复杂且难记;

'' == '0' //false 0 == '' //true; 0 == '0';true var result = (55 = "55");//返回true var result2 = (55 === "55");//返回false; null == undefinde //返回ture;相似 null === undefinde // 返回fale; 不类型;

BOM

/** * Created by macbookpro on 2016/11/11. */ //ECMAScript 是js的核心,但是如果在Web中使用JavaScript,那么BOM则无疑才是真正的核心 //BOM:浏览器对象模型 //BOM提供很多对象,用于访问浏览器的功能,这些功能和任何网页无关

function myType() { function printt() { alert("jinggao"); } window.screenLeft = 10; // var name= "33"; // alert(this.name); // this.printt(); window.printt(); }

//贴一个windw结构图p8-入门经典配图

//window.alert //windw.doucument.write*()

window

//核心对象window (全局对象),是JS访问浏览器的一个窗口 //全局变量回成为window对象的属性

所有全局作用域中声明的变量 函数都会变成window对象的属性和方法

var age = 29; window.age = 20; 一点区别 window.color = "red"; delete window.age; delete window.clor; alert(window.age); alert(window.color);//undefined //访问区别 var newvalue = oldeValue;//错误 var newvalue = window.oldeValue;//unfefined

location

function myType() { window.location.href = "http://www.baidu.com"; } //如何不留痕迹 不然返回就会跳回来 循环往复 function myType() { location.replace("http://www.baidu.com"); }

DOM

分享

https://zhuanlan.zhihu.com/p/19996445?refer=FrontendMagazine

es6 http://es6.ruanyifeng.com/