javascript


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

1. JavaScript简介

1.1. JavaScript由来

Netscape 发明了 JavaScript

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

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

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

三足鼎立

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

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

标准化

1997 年,JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA)。第 39 技术委员会(TC39)被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义” 。由来自 Netscape、Sun、微软、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. JavaScript与Java不同 

  1. JS是Netscape公司的产品,Java是Sun公司的产品
  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实现继承的主要手段。粗略来说就是:prototype是javascript中的函数(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=样式名