javascript


javascript在前端开发中尤为重要,此文首先列出快速复习的知识,随后举出一些列子供大家学习

1. JavaScript简介

1.1. JavaScript由来

Netscape 发明了 JavaScript

JavaScriptNetscape 1995年发明。早期的主要目的是处理一些用户的输入验证操作。而在JavaScript语言出现之前客户端的页面时需要提交到服务器端,由服务器去检测的。在刚刚普及的电话线调制解调器时代,对用户是一种考验,著名的Netscape Navigator(早期浏览器) 通过引入JavaScript来解决该问题  

随着互联网的流行,网页已经不断变得更大和复杂,如果用户想要注册表单,需要直接将表单提交到服务器进行验证,需要和服务器进行多次的往返交互,例如,用户注册一个表单,点击提交按钮,等待30秒服务器返回处理后,返回的是用户名不符合规则。这种用户体验是很不友好的。此时的Netscape(网景)开始着手解决这个问题。

Netscape1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。后来NetscapeSun公司合作,所以最后Netscape Sun 及时完成 LiveScript 实现。就在 Netscape Navigator 2.0 即将正式发布前,Netscape 将其更名为 JavaScript,目的是为了利用 Java 这个因特网时髦词汇,此后JavaScript 从此变成了因特网的必备组件。

三足鼎立

微软进军微软决定进军浏览器,发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript(这样命名是为了避免与 Netscape 潜在的许可纠纷)。

在微软进入后,有 3 种不同的 JavaScript 版本同时存在:Netscape Navigator 3.0 中的 JavaScriptIE 中的 JScript 以及 CEnvi 中的 ScriptEaseJavaScript 并没有一个标准来统一其语法或特性,而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加,这个语言的标准化显然已经势在必行。

标准化

1997 年,JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA)。第 39 技术委员会(TC39)被委派来标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义。由来自 NetscapeSun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262,该标准定义了名为 ECMAScript 的全新脚本语言。随后,国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准。

从此,Web 浏览器就开始努力将 ECMAScript 作为 JavaScript 实现的基础。

JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。JavaScript 是因特网上最流行的脚本语言。

注:

javascript运行必须依赖于宿主环境语言,即页面语言HTML

是解释型的语言,解释型:不需要编译,解释器程序会每读取一条语句就执行。运行速度慢,浏览器中默认内置了javascript的解释器程序。

浏览器中默认内置了javascript的解释器程序。

常见的脚本语言:

    ECMASCRIPT主要进行所有脚本语言的标准制定。

    JavaScript

 JScript

 VBScript

 ActionScript

JavaScript是基于对象和事件的脚本语言。

1.2. JavaScript特点

  1. 安全性(不允许直接访问本地硬盘),它可以做的就是信息的动态交互。
  2. 跨平台性。(只要是可以解释Js的浏览器都可以执行,和平台无关。)

1.3. JavaScriptJava不同 

  1. JSNetscape公司的产品,JavaSun公司的产品
  2. JS是基于对象,Java是面向对象。
  3. JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。
  4. JS是弱类型,Java是强类型。

1.4. JavaScript内容

尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的: 

目前我们学习JavaScript也就是需要学习:

JavaScript语法基础

使用JS操作网页(DOM

使用JS操作浏览器(BOM

1.5. 体验JavaScript

<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>体验JavaScript语言title>

head>

<body>

<h1>体验JavaScript语言h1>

<script type="text/javascript">

window.document.write("hello,world");

script>

body>

html>

2. JavaScript基础

2.1. 语法

2.1.1. 引入方式与引入位置

HTML页面插入JavaScript的主要方法,就是使用元素>。使用中。

  • 使用script标签的src属性引入一个js文件。(方便后期维护,扩展)
  • 例:

    注:规范中script标签中必须加入type属性。

    内部

    <html >
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>在HTML中使用JavaScripttitle>
    
    head>
    
    <body>
    
    <h1>在页面中嵌入JavaScripth1>
    
    <script type="text/javascript">
    
    window.document.write("hello,world");
    
    script>
    
    body>
    
    html>

    外部

    html文件

    JavaScript文件

    JavaScript代码

    关闭,而不能

    5. 面向对象

    JavaScript面向对象的脚本语言,此时开发者在开发的时候需要找对象,默认提供了内置的对象。也可以根据开发者的需求自己定义对象。

    5.1. 基本数据类型包装类

    为了便于操作基本类型值,ECMAScript 提供了3个特殊的引用类型:Boolean,Number,String。它们是引用类型。当读取基本数据类型时,后台就会创建一个对应的基本包装类对象,所以我们在操作基本数据类型时,可以直接调用一些方法。

    5.1.1. String

    //通过构造函数创建String 对象

    var b = new String("java");

    var c = new String("java");

    document.write(b + "," + c);

    document.write(b == c);

    //false

    //比较字符串的值是否相等

    document.write(b.valueOf() == c.valueOf());

    //属性

    var a = "helloworld";

    document.write(a.length);

    常见的方法:

    Anchor() 生产锚点

    Blink()   为元素添加blink标签

    charAt()    返回指定索引位置处的字符。

    charCodeAt() 回一个整数,代表指定位置上字符的 Unicode 编码。

    Concat()    回字符串值,该值包含了两个或更多个提供的字符串的连接。

    Fontcolor()  把带有 COLOR 属性的一个 HTML 标记放置在 String 对象中的文本两端

    indexOf()    返回 String 对象内第一次出现子字符串的字符位置

    italics()     HTML 标记放置在 String 对象中的文本两端。 

    Link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。

    Replace()      返回根据正则表达式进行文字替换后的字符串的复制

    Split()        切割   

    Substr()       截取子串

    toUpperCase()  转大写

    prototype

     “prototype”字面翻译是原型,是javascript实现继承的主要手段。粗略来说就是:prototypejavascript中的函数(function)的一个保留属性,并且它的值是一个对象(我们可以称这个对象为"prototype对象")。

    Prototype注意的细节:

    prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)

    prototype的值是一个对象

    可以任意修改函数的prototype属性的值。

    一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。

    需求:

    1. 自定义一个数组的工具类。

    function arrTool(){}

    var ArrayTool  = new arrTool();

    ArrayTool.getMax = function(arr)

    var max = 0;

    for(var x=1; x

    if(arr[x]>arr[max])

    max = x;

    return arr[max];

    };

    ArrayTool.getMin = function(arr)

    var min = arr[0];

    for(var x=1; x

    if(arr[x]

    min = arr[x];

    return min;

    /*

    ArrayTool.getMax = getMax;

    //获取最值。

    function getMax(arr)

    var max = 0;

    for(var x=1; x

    if(arr[x]>arr[max])

    max = x;

    return arr[max];

    */

    ArrayTool.binarySearch = function(arr,key)

    var min,max,mid;

    min = 0;

    max = arr.length-1;

    while(min<=max)

    mid  = (min+max)>>1;

    if(key>arr[mid])

    min = mid + 1;

    else if(key

    max = mid - 1;

    else

    return mid;

    return -1;

    /*

    ArrayTool.binarySearch = halfSearch;

    //折半查找,必须是对有序的数组。

    function halfSearch(arr,key)

    var min,max,mid;

    min = 0;

    max = arr.length-1;

    while(min<=max)

    mid  = (min+max)>>1;

    if(key>arr[mid])

    min = mid + 1;

    else if(key

    max = mid - 1;

    else

    return mid;

    return -1;

    1. 把数组的工具方法添加到javascript内置对象Array中。

    Array.prototype.getIndex = function(element)

    for(var x=0; x

    if(this[x]==element)

    return x;

    return -1;

    Array.prototype.getMin = function()

    var min = this[0];

    for(var x=1; x

    if(this[x]

    min = this[x];

    return min;

    1. 字符串添加新的方法

    // JavaScript Document

    //给字符串string对象添加新功能。

    //去除字符串两端的空格。

    String.prototype.trim = function()

    var start,end;

    start = 0;

    end = this.length-1;

    while(start<=end && this.charAt(start)==" ")

    start++;

    while(start<=end && this.charAt(end)==' ')

    end--;

    return this.substring(start,end+1);

    //将字符串变成数组。

    String.prototype.toCharArray = function()

    var arr = new Array(this.length);

    for(var x=0; x

    arr[x] = this.charAt(x);

    return arr;

    //将字符串进行反转。

    String.prototype.reverseString = function()

    var arr = this.toCharArray();

    return arr.reverse().join("");

    面试1。用javascript添加样式信息

        1)直接添加element.style['text-align'] = '100px';

        2)直接设置element.setAttribute('height','value');

        3)设置stype element.setAttribute('stype','样式设置')

        4)设置setProperty element.stype.setProerty('样式设计')

        5)更改元素的样式:element.stype.className=样式名