美文网首页视觉艺术
JavaScript基础知识

JavaScript基础知识

作者: 弓长晓 | 来源:发表于2020-03-19 21:03 被阅读0次

如果非要说JavaScript那我们就必须说网景公司(Netscape) 在1994年,网景发布了0.9版浏览器,这是历史上第一个比较成熟的网路浏览器,但在当时时期浏览器只能用来浏览,不具备与访问者互动的能力,

另一方面人们对客户端脚本语言的迫切需求,绝大多数因 特网用户都使用速度仅为 28.8kbit/s的“猫”(调制解调器)上网,但网页的大小和复杂性却不断增 加。为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担

只要是被需求的事物,必定有发展的前途,而网景公司就急需要一种网页的脚本语言.

脚本语言:脚本语言是为了缩短传统的编写-编译-链接-运行(edit-compile-link-run)过程而创建的计算机编程语言。 [1] 它的命名起源于一个脚本“screenplay”,每次运行都会使对话框逐字重复。早期的脚本语言经常被称为批量处理语言或工作控制语言。 


“Java+script”

1995年,Sun公司将Oak语言改名为Java,正式向市场推出。Sun公司大肆宣传,许诺这种语言可以"一次编写,到处运行”。

网景公司动了心,决定与Sun公司结成联盟。当时的形势就是,网景公司的整个管理层,都是Java的信徒,Sun公司完全介入了网页脚本语言的决策。网景公司认为未来的网页脚本语言必须"看上去与Java足够相似",但是比Java简单,能快速上手,

因此,Javascript后来就是网景和Sun两家公司一起携手推向市场的,这种语言被命名为"Java+script"并不是偶然的

1995年4月,网景公司录用了,34岁的系统程序员Brendan Eich,他对Java一点兴趣也没有。为了应付公司安排的任务,他只用10天时间就把Javascript设计出来了。

由于设计时间太短,语言的一些细节考虑得不够严谨,导致后来很长一段时间,Javascript写出来的程序混乱不堪。如果Brendan Eich预见到,未来这种语言会成为互联网第一大语言,全世界有几百万学习者,他会不会多花一点时间呢?

(1)借鉴C语言的基本语法; 

(2)借鉴Java语言的数据类型和内存管理; 

(3)借鉴Scheme语言,将函数提升到"第一等公民"(first class)的地位; 

(4)借鉴Self语言,使用基于原型(prototype)的继承机制。

1997年

以网景公司发布的javascript1.1为蓝本的建议提交给了欧洲计算机制造商协会也就是ECMA。该协会指定39号技术委员会来负责此事,委员会里面的成员来自微软,网景,Sun,以及其他关注脚本语言发展的公司的程序员,他们经过数月的努力完成了ECMA-262  —定义一种名为ECMAScript的新脚本语言的标准。

JavaScript的实现

JavaScript主要由三个不同核心组成,核心(ECMAscript) 文档对象模型(DOM)浏览器对象模型 (BOM);

ECMAScript :是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScriptJScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

语法 类型 语句 关键字 保留字 操作符 对象

文档对象模型(DOM)是针对 XML但经过扩展用于 HTML的应用程序编程接口,是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM

 DOM标准出现了一段时间之后,Web 浏览器才开始实现它。微软在 IE5中首次尝试实现 DOM, 但直到 IE5.5才算是真正支持 DOM1级。在随后的 IE6和 IE7中,微软都没有引入新的 DOM功能,而 到了 IE8才对以前 DOM实现中的 bug进行了修复。 Netscape直到Netscape 6(Mozilla 0.6.0)才开始支持 DOM。在 Netscape 7之后,Mozilla把开发重心转 向了 Firefox浏览器。Firefox 3完全支持 DOM1级,几乎完全支持 DOM2级,甚至还支持 DOM3级的一部 分。(Mozilla开发团队的目标是构建与标准 100%兼容的浏览器,而他们的努力也得到了回报。) 

浏览器对象模型(BOM) : BOM真正与众不同的地方(也是经常会导致问题的地方),还是它作为 JavaScript实现 的一部分但却没有相关的标准。这个问题在 HTML5中得到了解决,HTML5致力于把很多 BOM功能写 入正式规范。HTML5发布后,很多关于 BOM的困惑烟消云散。 

主要功能:

1. 弹出新浏览器窗口的能力;

2. 移动、关闭和更改浏览器窗口大小的能力;

3. 可提供WEB浏览器详细信息的导航对象;

4.可提供浏览器载入页面详细信息的本地对象;

5 .可提供用户屏幕分辨率详细信息的屏幕对象;

6. 支持Cookies;

7. Internet Explorer对BOM进行扩展以包括ActiveX对象类,可以通过JavaScript来实现ActiveX对象。

JavaScript基础知识:

一用法:行内样式、嵌入样式、外部样式

行内样式:<input type ="button" value ="提交" onclick="alert(弹出框)">

嵌入样式: <head>中嵌入 <script alert("我的第一个 JavaScript ");><script>

注意点:文档加载和解析方式从上到下,意味着嵌入式的javaScript也将从上至下依次解析,所以需要注意嵌入式的javaScript存放的位置,因为页面上javaScript内部所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。 

head中引用JavaScript外部文件,意味着必须等到JavaScript代码被全部下载、解析、执行完成后才开始呈现页面内容,这种引入方式会导致页面呈现的延迟,所有慎用。

外部样式:<script src="URL JavaScript .js"></script>

可维护性:遍及不同HTML页面的JavaScript会造成维护问题, 

可缓存:浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件,也就是,如果两个页面都使用同一个文件,那么文件只需要加载一次。

02输出(显示数据)JavaScript可以通过不同的方式进行不同的方式进行输出数据

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

03--变量:变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据

如何使用变量:

                        1声明变量: var age;|声明多个变量 var age,name, pas;

                        2变量赋值:age = 18;|同时多个变量赋值 : age = 18,name =tom, pas = 123;

                        3同时声明多个变量并赋值:var age= 18, name = tom;

变量的命名规范:

与C,C++等编程语言一样,JavaScript作为一门解释性语言,也有自己的命名规则,先说其命名原则:

变量可以由字母数字下划线和美元符号($)组成 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量)

1. 匈牙利命名法:

一句话:变量名 = 数据类型 + 对象描述,变量名以数据类型的简写开始,接着是描述变量内容的有意义的名字,

在保证含义明确的前提下尽量简短。

数据类型:指的是JavaScript中数据类型之一,undefined、null、boolean、number、string、symbol和Object 对象描述:指对象名字全称或名字的一部分,而且要有明确含义,易记而且还要好理解

例如:

var aPerson = [];

var oName = function();

2. 驼峰式命名法:

大驼峰式:组成变量名的每个单字的首字母大写,单字之间没有下划线等分隔标识,例如 MyFirstName;

小驼峰式:组成变量名的除首个单字的首字母小写外,其余每个单字的首字母大写,单字之间没有下划线等分隔标识,又称为帕斯卡命名法,例如 myFirstName。

04--数据类型 简单的数据类型(Number、String、Boolean、Undefined、Null)

typeof 操作符:

typeof   123   //Number

typeof   'abc'  //String

typeof    true       //Boolean

typeof    undefined   //Undefined

typeof    null        //Object

null 类型在进行typeof进行操作后,结果是Object,是由于,null    类型被当做一个空对象引用。

Number 类型:包含整数和浮点数(浮点数值必须包含一个小数点,且小数点后面至少有一位数值)

NaN:非数字类型:特点:①只要是与NaN有关系的操作,都会返回NaN ② NaN不等于自身

isNaN()函数是检验数值是否为非数字

String类型:

length:用于字符串长度的获取:document.write(变量名.length)

字符串拼接 "+" :若加号两侧都是数值类型的,那么变量会进行算数运算。但如果有一侧不是数据类型的,那么将会进行拼接

Boolean 类型:只有两个值: true 和 false

Undefined :表示一个申明了没有赋值的变量,变量只有声明的时候默认是Undefined

Null类型:可以看做空对象直指,如果想要为Null需要我们设置为Null

05--数据类型转换

字符串:.toString() | String()

数值: Number()|parselnt()|parseFloat()

布尔:Boolean()

06--运算符

算数运算符:+ 加法 | - 减法 | * 乘法| /除法| ++ 自增| --自减|

关系运算符:<  >  >= <=  == != === !==

赋值运算符: = += -= *= /= %=

逻辑运算符:&& |并且  || 或者 | ! 取反

一元运算符: ++自身加1 --自身减1| ++num:num++ 前置与后置

07--条件语句

if 语句 -- 只有在指定条件时候,使用该语句来执行代码

if...else-- 当条件为true执行代码,当代码为false是时候执行其他代码

if..else if..else 语句- 使用该语句来选择多个代码块

switch 语句 - 使用该语句来选择多个代码块来执行

if(条件表达式){ 成立..执行语句} 否则 执行语句

if(条件表达式){成立条件执行}else{否则执行这个条件}

if(条件表达式){成立条件执行}else if{判断条件是否成立。成立执行}否则执行

switch(条件表达式){case 常量1:语句;}

三元运算符

表达式1 ? 表达式 2 :表达式 3;

08--循环构造

while语句(基本语法:)

while(循环条件){循环条件}

//当循环条件为true时,执行循环体,

//当循环条件为false时,结束循环。

var i = 1; var sum = 0 ; while(i<= 100){

  sum  + = i; //循环体

    i++; // 自增

}

for语句 ()

for循环一般在循环次数确定的时间比较方便for循环的表达式之间用的是;号隔离,千万不要写成,

for(初始化表达式1;判断表达式2;自增表达式3 ){

                    //循环体 

}结束

break :立即跳出整个循环。循环结束,开始执行循环后面的内容(自接调到大括号)

continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)

09--数组

数组概念:所谓的数组,就是将多个元素按照一定顺序排列放到一个集合里面,我们把这个集合叫做集合

数组的定义: 数组是一个有序的,可以在数组中存放数据,并且数组长度可以被调整,

如何定义数组:

var arr = [ 1,'你好'];//创建一个数组

console.log (arr.length);//可以通过数组的length来获取一个数组的长度

我们还可以设置length属性来改变数组中的元素个数

arr.length = 0;

获取数组元素

数组取值:格式 :数组名[下标] 又称为索引

//功能:获取数组对应下的值,如果下标不存在,则会返回undefined.

遍历数组

对数组的每一个元素都访问一次就可以说是遍历

基本语法:for(var i = 0 ;i< arr.length ; i++){

        //数据遍历的固定结构

}    

数组中新增加元素

基本格式: 数组名 [下标/索引 ] = 值

                //定义一个空的变量,对相对应的下标的值,进行交换,如果下标有对于相对应的值,会把原来的覆盖,如果下标不存在,会给数组新增加一个新的元素。

10函数

什么是函数: 把具有相对独立的具有特定代码块封装,形成一个独立实体,就是函数,起个名字(函数名),我们可以再次调用,反复使用。

函数定义:函数声明 | 函数表达式

function 函数名 (){//函数体}

function fn = function(){ // 函数体 }

特点:当函数被声明,函数并不会执行,只有当函数被调用才会执行,

函数调用:调用的方法: 

    函数名();

特点:函数只有在调用的时候才会执行,调用需要()进行调用||调用可以多次重复使用

作用域:泛泛而谈,作用域就是函数可以访问的的范围,

全局作用域:函数以外的执行范围。

局部变量 :在函数以内可以访问的执行的范围。

主要是以函数定义的变量时,会先从本作用域中找这个变量,若找不到则向上一级作用中找,依次类推,依次类推,就形成一个作用域链。

相关文章

网友评论

    本文标题:JavaScript基础知识

    本文链接:https://www.haomeiwen.com/subject/onevbqtx.html