JavaScript笔记

作者 : 开心源码 本文共7198个字,预计阅读时间需要18分钟 发布时间: 2022-05-12 共94人阅读

JavaScript笔记

Web发展史

Mosaic,是互联网历史上第一个.

获普遍用和能够显示图片的网页浏览器。

于1993年问世。

1994年4月,马克.安德森和Silicon Graphics(简称为SGI,中译为“视算科技”或者“硅图”)公司的创始人吉姆.克拉克(jim Clark)在美国加州设立了“Mosaic Communication Corporation”.Mosaic公司成立以后,因为伊利诺伊大学拥有Mosaic的商标权,且伊利诺伊大学已将

技术转让给Spy Glass公司,开发团队必需彻底重新撰写浏览器程式码,且浏览器名称更改为Netscape Navigator,公司名字于1994年12月更改名为“Netscape Communication Corporation”,此后沿使用至今,中译为“网景”。微软的InternetExplorer及Mozilla Firefox等,其早期版本皆以Mosaic为基础而开发。微软随后买下Spy Glass公司的技术开发出Internet Explorer浏览器,而Mozilla Firefox则是网景通

讯家开放代码后所衍生出的版本。

js历史

JavaScript作为Netscape Navigator浏览器的一部分初次出现在1996年。

它最初的设计目标是改善网页的使用户体验。

作者:Brendan Eich

期初JavaScript被命名为LiveScript,后因和sun公司合作,因市场宣传需要改名JavaScript。后来sun公司被oracle收购,JavaScript版权归Oracle所有。

浏览器组成

1.Shell部分—–翻译为 贝壳

2.内核部分

渲染引擎(语法规则和渲染)

Js引擎

其余板块

Js引擎

2001年发布IE6,初次实现对js引擎的优化和分离。

2008年Google发布最新浏览器Chrome,它是采使用优化后的JavaScript引擎,

引擎代号V8,因能把js代码直接转化为机械码来执行,进而以速度快而闻名。

后Firefox也推出了具有强大功能的js引擎

Firefox3.5 TraceMokey(对频繁执行的代码做了路径优化)

Firefox4.0 leagerMokey

Js的逼格

? 解释性语言——(不需要编译成文件)跨平台

? 单线程

? ECMA标准——为了获得技术优势,微软推出了Jscript,

? Cenvi推出了ScriptEase,与JavaScript同样可在浏览器上运行,为了统一规格JavaScript兼容与ECMA标准,因而也称为ECMAScript

? 编译 C 、C++

优点:快

不足:移植性不好(不跨平台)

? .Java —— > javac ——— > .class ——— > jvm -——>解释性执行

? 解释:JavaScript、PHP、Python

优点:跨平台

不足:略微慢

Js三大部分

ECMAScript DOM BOM

主流浏览器

IE trident Trident内核一直延续到IE11,IE11的后继者Edge采使用了新内核EdgeHTML

Chrome webkit/blink

Chromium(Blink,V8)(开源)值得一提是谷歌专门研发了自己的JS引擎——V8,极大地提高了JS的运算速度。因为chromium也是开源的,所以搜狗、QQ、360都使用chromium内核。

自13年4月后,谷歌开始在Chromium项目中研发Blink渲染引擎,之前一直使用的是Webkit的渲染引擎。之所以研发独立的渲染引擎,是由于苹果推出的Webkit2与chromium的设计存在冲突,影响了chromium的架构移植工作

Firefox Gecko Gecko是Netscape6Z开始采使用的内核,是一个开源内核,后来被FF(FireFox)采使用

Opera presto 自Opera7.0开始用。13年2月后为了减少研发成本,放弃Presto,采使用chromium,之后也紧跟Blink的脚步。

Safafi webkit

如何引入js?

页面内嵌

外部引入

为了符合web标准(w3c标准中的一项)结构、样式、行为相分离,通常会采使用外部引入。

Js基本语法

变量(variable)

变量公告

公告、赋值分解

单一var

命名规则:

1. 变量名必需以英文字母、_、$开头

2. 变量名可以包括英文字母、_、$、数字

3. 不可以使用系统的关键字、保留字作为变量名

Js语句基本规则

1、 语句后面要使用分号结束

2、 Js语法错误解引发后续代码终止,但是不会影响其余js代码块

3、 书写格式要规范,= + / – 两边都应该有空格

document.write('你好');//输出语句

var a;//公告一个变量

a=1;//给变量赋值

var b=10;

document.writeln(a);//输出变量a的值

document.writeln(b);//输出b的值

var c = '世界真好,我却是如此的暴躁!',

d,

e,

f,

g;

document.writeln(c);

var ab=20;

var cd=30;//可以相加

document.writeln(ab+cd);

//原始值

// Number 、Boolean、 String 、undefined 、null

数字天生就是是浮点型

字符串,使用双引号或者单引号

布尔类型,

var cc=false;

var ccc=true;

var c1=undefined;

var c2=null;

document.writeln(c1);

document.writeln(c2);

//引使用值

var arr = [1,2,3,true,false,'世界真好,我却是如此的暴躁!']

document.writeln(arr[5]);

document.writeln(“


“);//可以将标签写在js中

var arr1 = [1];

var arr2 = arr1;

arr1.push(2);

? 可以写多个代码块,但是互不影响

? 运算操作符

+

1、 数学运算、字符串链接

2、 任何数据类型加字符串都等于字符串

– * / % = ()

优先级=最弱,()最高

++ — += -= /= *= %=

? NaN——Not a Number

? Infinity 无穷—数字类型

? 交换两个数。

? 比较运算符

> = <= !=

比较结果为Boolean类型

数字、汉字、字母(比较的是ASC)都可以进行比较。

undefined == undefined true

infinity == infinity true

NaN == NaN false

? 逻辑运算符

&amp;&amp; || !

? 被认定为false的值

undefined null nan “” 0 false

Var a = 1 &amp;&amp; 2;

Document.write(a);//2

先看第一表达式转换成布尔值的结果,假如结果为真,那么他会看第二个表达式转换为布尔值的结果,而后假如只有两个表达式的话,只需看到第二个表达式,就会返回该表达式的值了。

Var a = 1 &amp;&amp; 2+2;

Document.write(a);//4

Var a = 0 &amp;&amp; 2+2;

Document.write(a);//0

假如第一个表达式是false,那么就会返回第一个表达式的值。

假如第一个为真,就会继续往下看,第二个是真的,接着往下看,假如看到头都是真,就会把最后一个返回,假如有假的,就会返回假的值。

var a = 1 + 1 &amp;&amp; 1 – 1 ;

document.write(a);

2 > 1 &amp;&amp; document.write(“真哥很帅!”);

练习:

1、写出打印结果

var a =(10*3-4/2+1)%2,

b = 3;

b %= a+3;

document.write(a++);

document.write(“
”);

document.write(–b);

2、var a = 123; var b = 234;请交换 a,b的值。

条件语句

if if else if

if 和 &amp;&amp; 转换

for

while ,do while

if(1){

document.write(“真哥很帅!”);

}

var score = window.prompt(‘请输入值’);//接收输入的值

var score = parseInt(window.prompt(‘请输入值’));

//接收输入的值,转换为int类型

作业:

1.计算2的n次幂,n可输入,n为自然数

2.计算n的阶乘,n可输入

3.输入a,b,c三个数字,打印出最大的。

答案:

1.

var mul = 1;

for(var i = 0;i < n;i ++){

mul *= 2;

}

document.write(mul);

2.

var mul = 1;

for(var i = 1;i <= n;i++){

mul *= i;

}

document.write(mul);

浏览器控制台

条件语句补充:

switch case

case后的值的类型可以是任意类型。

break

continue

初识引使用值

数组

var array = [1,2,”abc”,undefined]

array.length

console.log();

对象

var obj = {

lastName:”deng”,

age:40,

sex:undefined,

handsome:false

}

console.log(obj.age);

编程形式的区别:

1、 面向过程

2、 面向过程

typeof

6种数据类型

number string boolean undefined object function

//object—->null [] {}

// function—-function(){}

var num = 123;

console.log(typeof(num));

console.log(typeof num);

var a = “2”*”3”

console.log(typeof(a)+”:”+a);

类型转换

1、显示类型转换

Number(mix)

var num = Number(“123”);

var num = Number(true);

var num = Number(undefined);—NaN—转不成的

parseInt(string,radix)

parseFloat(string)

toString(radix)—-undefined和null不能使用这个

String(mix)

Boolean()

2.隐式转换

isNaN()

console.log(isNaN(NaN))—-true

console.log(isNaN(“abc”))—-true

++ — + – (一元正负)

var a=”abc”;

a++;

+a 和 –a 都是数字类型

+ ———–> String类型

– * / %

&amp;&amp; || !

=

var a = 1>’2’;

false>true;

2>1>3

undefined== undefined

null==null

null=undefined

NaN==NaN

== !=

不发生类型转换

=== !==

没有定义a,但是放在typeof种不会报错

console.log(typeof(a));

console.log(typeof(typeof(a)));

alert();

var num = 123.3455678;

document.write(num.toFixed(3));//保留3位小数

函数

定义

function test(){}

test();

1、 function 函数名(){函数体}

2、 函数名和变量名的起名规则一样

函数表达式

3、 var test = function abc(){}—–命名函数表达式

4、 var test = function(){}—–匿名函数表达式

可以打印出函数名 test.name

函数公告

组成形式

函数名称

参数

形参

实参

什么类型都可以。

形参和实参的个数可以不一致。

arguments—[11,2,3]—–形参

函数名.length

求任意数的和,利使用不定参

实参和形参数量一致时,有一个映射规则

arguments 和 变量是一致的 一个变 另一个也变

返回值

作使用域初探

作使用域定义:变量(变量作使用域又称上下文)和函数生效(能被访问)的区域

全局、局部变量

作使用域的访问顺序

js运行三部曲

语法分析:

代码是解释一行执行一行,但是在解释之前,要通篇扫描一遍看一下有没有语法错误。这个扫描的过程就是语法分析。

预编译:

? function test(){

console.log(‘a’);

}

test();

? test();

function test(){

console.log(‘a’);

}

? var a=123;

console.log(a);

? console.log(a);

var a=123;

//函数公告整体提升

//函数无论写在哪里,都会提升到逻辑最前面。

//变量 公告提升

var a =123;

会拆开写成

var a;//把公告变量提升到最前面

a=123;

但是处理不了深层次的问题,处理深层次的问题,必需要明白其底层原理。

console.log(a);

function a(a){

var a=234;

var a=function(){

}

a();

}

var a=123;

铺垫知识,预编译前奏:

1. imply global 暗示全局变量:即任何变量,假如变量未经公告就赋值,此变量就为全局对象所有。

eg:a = 123;

eg:var a = b = 123;

2. 一切公告的全局变量,全是window的属性。

eg:var a = 123;===>window.a=123;

var a=1;

// window.a=1

b=2;

// window.b=2;

window{

a:1

}

// window就是全局的域。

当我们公告一个变量的时候,这个变量就存放在window对象中,当我们输出的时候,就会去这里去找。

function test(){

var a=b=123;

}

test();

访问window.a是undefined,访问window.b是123,由于b归全局所有

window就是全局。

// 假如我们去公告3个变量

var a = 1;

var b = 2;

var c = 3;

// 其实就是相当于

// window{

// a : 1,

// b : 2,

// c : 3

// }

// 其实就是

// console.log(a)——>console.log(window.a);

预编译

四部曲:

1. 创立AO对象

2. 找形参和变量公告,将变量和形参名作为AO属性名,值为undefined

3. 将实参值和形参统一

4. 在函数体里面找函数公告,值赋予函数体

// 预编译发生在函数执行的前一刻

// 1.会创立一个AO 对象(Activation Object )

//(执行期上下文)

// AO{

// a:123,

// b:function(){},

// d:function d(){}

// }

例子:

function test(a,b){

console.log(a);

c = 0;

var c;

a = 3;

b = 2;

console.log(b);

function b(){}

function d(){}

console.log(b);

}

test(1);

例子:

function test(a,b){

console.log(a);

console.log(b);

var b = 234;

console.log(b);

a = 123;

console.log(a);

function a(){}

var a;

b = 234;

var b = function (){}

console.log(a);

console.log(b);

}

test(1);

全局的执行上下文

生成了一个GO对象 Global Object

例子:

console.log(test);

function test(test){

console.log(test);

var test = 234;

console.log(test);

function test(){}

}

test(1);

var test = 123;

例子:

var global = 100;

function fn(){

console.log(global);

}

fn();

例子:

global = 100;

function fn(){

console.log(global);

global = 200;

console.log(global);

var global = 300;

}

fn();

var global;

例子:

function test(){

console.log(b);

if(a){

var b = 100;

}

console.log(b);

c = 234;

console.log(c);

}

var a;

test();

a = 10;

console.log(c);

作使用域精解:

[[scope]]:每个JavaScript函数都是一个对象,对象中有些属性我么可以访问,但有些不可以,这些属性仅供JavaScript引擎存取,[[scope]]就是其中一个。

[[scope]]指的就是我们所说的作使用域,其中存储了运行期上下文的集合。

作使用域链:[[scope]]中存储的执行期上下文对象的集合,这个集合呈链式链接,我们把这种链式链接叫做作使用域链。

运行期上下文:当函数执行时,会创立一个称为执行期上下文的内部对象,一个执行期上下文定义了一个函数执行时的环境,函数每次执行时对应的执行上下文都是独一无二的,所以屡次调使用一个函数会导致创立多个执行上下文,当函数执行完毕,他所产生的执行上下文被销毁。

查找变量:从作使用域链的顶端依次向下查找。

闭包:

当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作使用域链不释放,造成内存泄漏。

立即执行函数:

定义:此类函数没有公告,在一次执行过后即释放,适合做初始化工作。

(function(){

var a=123;

console.log(a);

}())

传参:

(function(a,b,c) {

console.log(a+b+c);

}(1,2,3))

闭包章节案例:

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript笔记

发表回复