由浅入深JavaScript——JavaScript的诞生背景

JavaScript的诞生背景

在上世纪90年代,欧美各国的web程序日益流行,但是当时用户上网还都在使用电话拨号上网,通过
调制解调器,网速仅仅只有28kb/s。而web程序的展现却日渐丰富。当时在没有JavaScript的年代,表单
验证等操作都是在服务器端执行的。
    举个例子,用户进入到一个注册页面,填写用户名,密码,个人信息,点击注册,好,事大了。。。
发送信息,开始网络传输,等了十几秒,服务器接到浏览器客户端发送的信息,开始处理,然后把处理
信息返回客户端浏览器,用户突然发现提示用户名填写要大写字母开头,修改,然后点击注册。。。
然后重复上一步,最后又提示密码太短,不够安全。仅仅一个简单的注册页面可能在表单验证花费大量
时间,浪费带宽。这对用户是难以忍受的。
    在这种背景下,社会急需一种客户端语言,来解决这类问题。当时处在科技前沿的Netscape(网景公司)
开始着手开发一种客户端脚本语言。
    1995 就职于Netscape的布兰登.爱奇在网景浏览器2.0中开发一个称之为 LiveScript 的脚本语言,为了
赶上和媒体热炒Java的热潮,改名为JavaScript。从此JavaScript诞生。

JavaScript标准化
    人怕出名猪怕壮,JavaScript一经推出在社会引起广泛关注,不同版本的JavaScript语言纷纷出来,
当时比较流行的有:Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的
ScriptEase。这对于程序员来说如果要开发一个对用户友好的web程序,或许兼容性就是一大工作量,毕竟
有的用户用的浏览器各不相同,而内嵌的脚本语言也不相同。对于JavaScript标准化就凸显出来了。
在1997年,由sun,微软,等一些科学家,程序员,坐在一起开了个会,并制定了ECMA-262标准,规范化
ECMAScript从此浏览器各大厂商将ECMAScript作为JavaScript实现的基础。

JavaScript的组成
    JavaScript由ECMAScript,BOM,DOM三部分组成,其中ECMAScript为JavaScript的核心,规定了JavaScript
的变量,类型,关键字,函数等基础语言。DOM为文档操作对象,是操作HTML,XML元素的接口,BOM为浏览器
对象,可以对浏览器窗口进行访问和操作。
    在ECMA262标准只定义了ECMAScriptd的标准,对于DOM。BOM并没有标准,BOM,DOM是属于宿主对象。
所谓的宿主就是JavaScript的运行环境,比如现在所看到的浏览器。不同的浏览器对于宿主对象略有差别
所以做前端面临最痛苦的兼容问题主要就是BOM和DOM引起的。

JavaScript基础知识
    1.区分大小写
        var a  ;var  A 是不一样的
        function myName() function myname()也是不一样的
    2.每行以分号结尾,分号可有可无,但为了保持良好编码习惯,我们以后都加上‘;‘。
        var a = ‘hello‘
        var b = ‘javascript‘;
    3.JavaScript注释
        单行注释//  
        多行注释/*开头  */结尾。中间部分都是被注释掉的内容
        //var a = ‘123‘ 我被注释掉了,不会被执行。
        /* var b =‘123‘;
            alert(b);
         */  中间部分都被注释掉了不会执行
    4.{}花括号表示代码块,代码块里封装一系列语句
        window.onload()=function(){
            …………语句
        }
        if(true){
            …………语句
        }
    5 忽略多余空白
        var num = 1;
        var num=1;
        var result = 1+    2;
        var result = 1 + 2;
第一个JavaScript例子
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            
            function sayHello(){
                //我是注释
                var a =  "hello,  javascript!!!";
                alert(‘我先执行‘);
                alert(a);
            }
        </script>
    </head>
    <body>
        <input type="button" value=‘hello‘ onclick="sayHello()"/>
    </body>
</html>

JavaScript代码嵌入位置
    JavaScript代码要放到<script>…………<script>标签里面
    <script></script>标签的嵌入位置可以在head中也可在body中
以上代码虽然没什么问题,但是稍微变一变,就会存在问题。
我们在上一个例子的基础上多加一个字体内容改变的小功能。
为了避免一些由于加载顺序而获取不到元素的问题。我们要不然在body
中嵌入js代码,要不然使用windo.onload函数来延迟js代码加载。
    
    
    
改进JavaScript例子sayHello
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload = function(){
                document.getElementById(‘p1‘).innerHTML=‘sayHello‘;
            }
            
            //document.getElementById(‘p1‘).innerHTML=‘sayHello‘;此处由于加载顺序p1获取不到出错。
            function sayHello(){
                //我是注释
                var a =  "hello,  javascript!!!";
                alert(‘p1标签已经存在‘);
                alert(a);
            }
        </script>
    </head>
    <body>
        <p id=‘p1‘>hello,javascript</p>
        <input type="button" value=‘hello‘ onclick="sayHello()"/>
        <script>
                //document.getElementById(‘p1‘).innerHTML=‘sayHello‘;
        </script>
    </body>
</html>

限于文章篇幅原因,这里仅仅介绍冰山一角。由于笔者的水平有限,编写时间也很仓促,
文中难免会出现一些错误或者不准确的地方,不妥之处恳请读者批评指正

说在最后的话:

本博会开一个JS专栏,长期更新,由浅入深带大家系统的学习JavaScript,做出多彩的JS特效。

如果对你有用就关注一下吧。

想观看JS视频的博友可以在51CTO上搜索《多彩JavaScript》。

时间: 2024-10-11 13:14:02

由浅入深JavaScript——JavaScript的诞生背景的相关文章

[Javascript] Javascript &#39;in&#39; opreator

If you want to check whether a key is inside an Object or Array, you can use 'in': Object: const obj = { name: 'GraphQL', watched: false }; console.log('name' in obj); // true console.log('title' in obj); // false Array: const characters = [ 'Harry P

[JavaScript] JavaScript 面向对象设计 (3) : 多态与界面篇

在前一篇中我们介绍了基础的 JavaScript 继承实践法,透过 Object.prototype 我们可以自由决定对象要继承自哪个对象,也可以扩充对象目前现有的属性和方法 (和 C# 的 Extension Method 有异曲同工之妙),在本篇中,我们要来介绍面向对象的另一个特性:多态 (Polymorphism). 在前一篇中我们介绍了基础的 JavaScript 继承实践法,透过 Object.prototype 我们可以自由决定对象要继承自哪个对象,也可以扩充对象目前现有的属性和方法

原生javascript实现的图片背景定位

首先说明我还是给菜鸟,平时逛逛博客园看看大神的博客!本着分享的心情写下自己之前完成的作品,总体来说还算满意. 看以通过键盘事件和按扭实现背景的移动 不多说上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>图片背景定位</title> 6 <style type="text/css">

【Javascript】IE8兼容 背景图片与a标签的onclick事件

先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在中国有很大的使用人群.既然是中国人自己埋下的坑,咬着牙也要走下去. a标签的onclick事件 在开发现在这个平台时,用的是国产dwz开源前端框架,还是挺好用的,对IE的兼容性做的也比较好,很少发现有啥大问题. 只是如开头标题所示,页面弹出提醒框时,[确定]按钮点不了,导致页面相当于死机一样,只能重

1. JavaScript的使用及其背景

JavaScript能做什么? JavaScript的常用功能介绍: 表单数据合法性验证 网页特效:使用DOM和CSS可以实现网页特效 交互式菜单:创作具有动态效果的交互式菜单,完全能够与flash制作的导航菜单相媲美 动态页面:使用JavaScript可以对WEB页面的全部元素进行访问或者修改其属性,实现动态的效果,如网页版的扑克游戏等. 数值计算:丰富的数据操作方式,让JavaScript也具有了可以开发网页版计算器的功能. 游戏开发:随着Unity3d.cocos2d-js.Html5的兴

用JavaScript添加选择按钮的背景颜色和juqery添加选择按钮的背景色

在项目开发中经常遇到要选择的按钮,选择完之后被选择的按钮的背景色会发生变化,表示被选择 样式图如下: 每点击一个数字,相应的背景色变为蓝色,其他的依旧是白色,先用JavaScript实现 html代码如下: <div>                            <ul>                                <li>                                    <p id="lyyckick_

[从jQuery看JavaScript]-JavaScript

什么是JavaScript?相信随便百度Google一下都能找到一大堆的定义解释.而在我的理解中,JavaScript就是一种客户端的脚本语言,用于处理页面数据逻辑和用户体验(网页特效).实际上,JavaScript并不仅仅只能用于客户端,它还能用于服务器端编程,典型的例子就是Mozilla Rhino.Mozilla Rhino是一个纯Java的开源的JavaScript实现,它只是对JavaScript核心语法的编译实现,并没有对HTML对象的处理等功能(这不是当然的嘛……).而我学习整理的

[JavaScript]JavaScript处理iframe的动作

随着W3C一声令下,几年前使用非常频繁的frameset + frame已完成使命,光荣退伍.作为frameset的替代方案(姑且这么称吧),iframe的使用也多了起来.较frameset方案,iframe在使用上更加灵活,文档结构更加友好. 本文就js操作iframe在不同浏览器(没错,又是浏览器兼容…)的差异性做一些说明,力求总结出一个适应于所有主流浏览器的方案,笔者只测试了IE 6/7/8(以下简称IE)和FireFox 5.0(以下简称FF). 约定与定义 iframeElement:

[ JavaScript ] JavaScript 实现继承.

对于javascript中的继承,由于js中没有后端语言中的类式继承,所以js中的继承,一般都是原型继承(prototype). function P (name){ this.name = name; this.say = function(){ console.log('p'); } } function S (name,id){ this.id = id; this.eat = function(){ console.log('s'); } } S.prototype = P.protot