JS详细入门教程(上)

首先,我们看一下DOM级别和兼容性:

之前好像在某本上看到说DOM有0级,实际上,DOM0级标准是不存在的。DOM有1、2、3三个级别。DOM1级由两个模块组成(DOM Core和DOM HTML),其中,DOM核心规定的是如何映射基于XML的文档结构,以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法。DOM2级在原来DOM的基础上又扩充了视图和用户界面事件、范围、遍历(迭代DOM文档的方法)等细分模块,而且通过对象接口增加了对CSS(Cascading Style Sheets,层叠样式表)的支持。DOM3级则进一步扩展了DOM,引入了以统一方式加载和保存文档的方法–在DOM加载和保存(DOM Load and Save)模块中定义;新增了验证文档的方法–在DOM验证(DOM Validation)模块中定义。

一、六种数据类型

Javascript是一种弱数据类型,这种弱数据类型有什么特征呢?看看下面的例子:

JavaScript一共有6种数据类型,其中五种原始类型(基本类型),一种对象类型(引用类型)。

引用类型:

object,包括Object类型、Array类型、Date类型、RegExp类型、Function类型。

基本类型:

number、string、boolean、null、undefined。

类型的转换和检测:

(1)隐式转换:巧用+、-、==规则转换类型

num-0 这样可以将字符串转化为数字

例如:“17”-7     //10

num+ " "  这样可以将数字转换为字符串

例如:“17”+7      //177

类型相同,用===检测是否相等,类型不同,尝试类型转换和比较,部分规则为:

null==undefined   相等

number==string 转number

boolean==?转number

object==number|string 尝试对象转为基本类型

其他:false

例如:
注意:===是绝对等的意思,只有类型和数值都相等才会成立。


更多:


(2)类型检测

检测方法:typeof、instanceof、Object.prototype.toString、constructor、duck type

typeof和instanceof比较常用,其中typeof比较适合函数对象和基本类型的判断,instanceof常用于判断对象类型,其判断专责是基于原型链判断的。例如:

typeof 100   //"number"

typeof ture   //"boolean"

typeof(undefined)  //"undefined"

typeof new Object()  //"object"

typeof [1,2]  //"object"

typeof NAN   //"undefined"

typeof function  //“function”

typeof null //"object"

备注:历史上曾经把null类型===‘‘null‘‘,但是造成许多网站没有办法正常访问,后来就决定null返回的是Object对象。所以typeof null==="object"  //true


注意:不同window或iframe间的对象类型检测不能使用instanceof!

更多:

二、表达式和运算符

表达式类型:原始表达式、初始化表达式、函数表达式、属性访问表达式、调用表达式、对象创建表达式。

初始化表达式:new Array(1,2)、[1,2]等

属性访问表达式:var o={x:1}; o.x;o[‘x]

调用表达式:func()

对象创建表达式:new Object;

运算符:逗号“,”、delet、in、new、this

逗号用法:a,b

如:var val=(1,2,3)

delet用法:  delet obj.x

如:var obj={x:1};

obj.x;   //1

delet obj.x

obj.x;   //undefined

注意:从IE9开始,新增的configurable标签,当这个的值为true的元素才可以被delet。创建对象时,属性默认的configurable的值是true。

in的用法:window.x=1;

‘x‘ in window;     //true

更多:

三、语句

语句分别有:block、var、try catch、function、for...in、with

block:


注意:js中没有块级作用域。所以在for循环中定义的变量的作用域会被扩大。即在for循环之后仍然可以访问for循环里面定义的变量。

try catch:

function:

函数声明:

fd();  //true

function fd(){...}

函数表达式:

var fe=function(){...}

注意:函数声明会在执行之前生效,所以在函数之前调用该函数也可以。但是函数表达式不会在执行之前生效,所以不能提前。

for...in:

var p;

var obj={x:1,y:2}

for(p in obj){....}

注意:

for...in的遍历顺序是不确定的,只是会把该遍历的每一个元素都遍历输出,但是不一定按照定义时候的顺序。而且,当enumerable为false时,不能用for...in遍历。另外,for...in遍历对象属性时受原型链影响。

严格模式:

严格模式是一种特殊的运行模式,它修复了部分语言上的不足,提供更安强的错误检查,并增强安全性。严格模式是向上兼容的。

严格模式和普通模式的区别:

①不允许使用with,若使用会报错(语法错误)

②不允许未声明的变量被赋值

③arguments变为参数的静态副本

④delete参数、函数名报错
⑤delete不可配置的属性也会报错

⑥对象字面重复属性名报错

⑦禁止八进制字面量

⑧eval、arguments变为关键字,不能作为变量、函数名

四、对象

对象中包含一系列属性,这些属性是无序的。每一个属性都有一个字符串key和对应的value。

数据属性:configurable、enumerable、writable、value

访问器属性:configurable、enumerable、get、set,访问器属性不能直接定义,必须使用Object。definedProperty()来定义。

创建对象

第一种是使用new操作符后跟Object构造函数

如下所示:

var person = new Object(); person.name = "Nicholas"; person.age = 29;

这种方法要注意原型链的问题:


特别注意,并不是所有的对象都会继承object:

另一种方式是使用对象字面量表示法。

var person = { name : "Nicholas", age : 29 };

另外,使用对象字面量语法时,如果留空其花括号,则可以定义只包含默认属性和方法的对象,如:

var person = {}; //与 new Object()相同

person.name = "Nicholas"; person.age = 29;

属性操作

属性操作包括:读写对象属性、属性异常、删除属性、检测属性、枚举属性

属性异常:


删除属性:

检测属性:

用hasOwnProperty()方法来判断某个对象是否有某个属性,用propertyIsEnumerable()方法判断某个属性是否可以枚举。

extensible标签:

设计模式

①工厂模式

function createPerson(name, age, job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(this.name);

};

return o;

}

var person1 = createPerson("winty", 29, "Software Engineer");

var person2 = createPerson("LuckyWinty", 27, "Student");

②构造函数模式

function Person(name, age, job){

this.name = name;

this.age = age;

this.job = job;

this.sayName = function(){

alert(this.name);

};

}

var person1 = new Person("Winty", 29, "Software Engineer");

var person2 = new Person("LuckyWinty", 27, "Student");

③原型模式

function Person(){ }

Person.prototype.name = "Winty";

Person.prototype.age = 29;

Person.prototype.job = "Software Engineer";

Person.prototype.sayName = function(){

alert(this.name);

};

var person1 = new Person();

person1.sayName(); //"Winty"

var person2 = new Person();

person2.sayName(); //"Winty"

alert(person1.sayName == person2.sayName); //true

④组合使用构造函数模式和原型模式

function Person(name, age, job){

this.name = name;

this.age = age;

this.job = job;

this.friends = ["Shelby", "Court"];

}

Person.prototype = {

constructor : Person,

sayName : function(){

alert(this.name);

}

}

var person1 = new Person("winty", 29, "Software Engineer");

var person2 = new Person("LuckyWinty", 27, "Student");

person1.friends.push("Van");

alert(person1.friends); //"Shelby,Count,Van"

alert(person2.friends); //"Shelby,Count"

alert(person1.friends === person2.friends); //false

alert(person1.sayName === person2.sayName); //true

⑤动态原型模式

function Person(name, age, job){

this.name = name;

this.age = age;

this.job = job;

if (typeof this.sayName != "function"){

Person.prototype.sayName = function(){

alert(this.name);

};

}

}

var friend = new Person("Winty", 29, "Software Engineer");

friend.sayName();

⑥:寄生构造函数模式

function Person(name, age, job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(this.name);

};

return o;

}

var friend = new Person("Winty", 29, "Software Engineer");

friend.sayName(); //"Winty"

⑦稳妥构造函数模式

所谓稳妥对象,指的是没有公共属性,而且其方法也不引用this的对象。稳妥对象最适合在一些安全的环境中(这些环境中会禁止使用this和new),或者在防止数据被其他应用程序(如Mashup程序)改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创建对象的实例方法不引用this;二是不使用new操作符调用构造函数。按照稳妥构造函数的要求,可以将前面的Person构造函数重写如下。

function Person(name, age, job){

var o = new Object();

o.sayName = function(){

alert(name);

};

return o;

}

----未完待续

欢迎关注我的个人微信订阅号:前端生活

转载请注明出处!

时间: 2024-10-06 01:10:04

JS详细入门教程(上)的相关文章

React JS快速入门教程

翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.net/adousen 推荐阅读 React|RakNet 博客:http://blog.csdn.net/rsspub/article/category/1435601 在入门教程里,我们会创建一个简单却实用的评论盒子来作为我们的例子,你可以把它放进一个博客什么的.它实际上就是Disqus.LiveFyre.

DeepFaceLab2.0 :超详细入门教程!

在这出门慌得一B,在家闲的D疼的日子,静下心来玩玩换脸黑科技也是一个不错的选择.新年新气象,DFL也迎来了2.0版本,虽然当前作者还在不断的修bug, 但是很多小伙伴肯定已经迫不及待的要去尝试新版本了. 今天我就针对2.0版本写一个详细的入门教程,争取做到只要会电脑的就能学会.话不多少直接进入正题,演示的软件版本为当天新鲜出炉的20200203版! 1. 获取软件以及安装 软件获取方法: QQ群:672316851 或者作者GITHUB:https://github.com/iperov/Dee

一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

↓— Vue.js框架魅力 —↓ 前言   Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue 只关注视图层并且采用自底向上增量开发的设计. Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前端框架/库的诸多特点,取得了相当不错的成绩.Vue.js 自身不是一个全能框架——它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支

django入门教程(上)

相信用过python的人都听过Django的大名,知道它是一个web框架,用来支持动态网站.网络应用程序以及网络服务的开发.那么为什么我们需要一个web框架,而不是直接用python来写web应用呢?其实简单来说,就是为了偷懒. 如果不用框架的话,你可能需要连接数据库.查询数据库.关闭数据库,在python代码文件里掺杂html标签.css样式等.并且每次开始一个web应用,你都要从头开始写起,重复许多枯燥无味的代码. 而web框架提供了通用web开发模式的高度抽象,使我们可以专注于编写清晰.易

gulp详细入门教程

简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上

ant使用指南详细入门教程

一.概述 ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.在实际软件开发中,有很多地方可以用到ant. 开发环境: 复制代码代码如下: System:WindowsJDK:1.6+IDE:eclipseant:1.9.1 二.优点 ant 是Apache软件基金会JAKARTA目录中的一个子项目,它有以下的优点: 1.跨平台性:Ant是纯Java语言编写的,所以具有很好的跨平台性. 2.操作简单:Ant是由一个内置任务和可选任务组成的,

J2EE详细入门教程--人员登入

离上一次开发J2EE已经有一段时间了,项目完成后没有及时总结.现在重新做一个简单的人员登入来总结J2EE吧.不要小看这登入,麻雀虽小五脏俱全啊.以便自己日后参考和供新手学习 系统框架: 服务器:JBOSS7.1 数据库:oracle11g 前台:extjs4.2(对于前台设计头痛的可以选择,可以省去很多css) 数据操作:EJB3 Action处理:structs2.3 编程工具:eclipse 首先第一步肯定是环境配置啦 (记得自己先配好jdk  参考:http://jingyan.baidu

JS简单入门教程

JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script type="text/javascript"> var a = 10; var b = 11; if (a < b) { document.write("hello man") } else { document.write("hello world&q

doodoo.js快速入门教程

Doodoo.js -- 中文最佳实践Node.js Web快速开发框架.支持Koa.js, Express.js中间件,支持模块化,插件,钩子机制,可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性 https://www.doodooke.com 快速入门我们通过3步演示如何快速创建一个doodoo项目 第一步 # 创建doodoo-demo目录 mkdir doodoo-demo && cd doodoo