JavaScript进阶教程(第二课)

时间:2020-05-12 人气:0

今天我们将学习一项很有用而且很有趣的内容：cookies - 这是用来记录访问过你的网页的人的信息。利用Cookies你能记录访问者的姓名，并且在该访问者再次访问你的站点时向他发出热情的欢迎信息。你还可以利用cookie记忆用户端的特点 - 如果访问者的所接入的网线的速度慢，cookie可以自动告诉你在给其发送网页的时候只发送尽可能少的图片内容。

    只要你在合理的范围内使用cookies(不要用它探询用户的个人隐私)，cookies还是相当实用得。所以我要向你们介绍cookies的工作原理，但是在正式开始之前，我们先谈两个JavaScript内容：有趣的字符串处理以及相关数组。

    为什么必须在开始cookies世界漫游之前必须先学习神奇的字符串处理呢？因为cookies也是字符串。要保存访问者的信息，你必须首先建立一个特殊的cookie字符串。然后在访问者又返回你的站点时读取该信息，而此时你必须对该cookie字符串进行解码。要生成和解释这些字符串你必须了解JavaScript的字符串工作原理。所以我们必须先要了解字符串。如果你是一个新手，你应该先阅读一下javascript初级教程第二课的内容，以下是一个例子：

    var normal_monkey = "I am a monkey!<br>";
    document.writeln("Normal monkey " + normal_monkey);
    var bold_monkey = normal_monkey.bold();
    document.writeln("Bold monkey " + bold_monkey);

    这里的声明：

    var bold_monkey = normal_monkey.bold();

    和下面对声明是等同的：

    var bold_monkey = "<b>" + normal_monkey + "</b>";

    第1个版本的声明看起来要简明得多。这里用到了字符串对象中的bold对象，其他的字符串对象还有indexOf, charAt, substring, 以及split, 这些方法可以深入字符串的组成结构。首先我们研究一下indexOf。

    indexOf
    indexOf用于发现一系列的字符在一个字符串中的位置并告诉你子字符串的起始位置。如果一个字符串中不包含该子字符串则indexOf返回"-1." 这里是一个例子：

    var the_word = "monkey";
    让我们从单词 "monkey"开始。

    var location_of_m = the_word.indexOf("m");
    location_of_m(字母m的位置)将为0，因为字母m位于该字符串的起始位置。var location_of_o = the_word.indexOf("o"); location_of_o(字母o的位置)将为1。

    var location_of_key = the_word.indexOf("key");
    location_of_key(key的位置)将为3因为子字符串“key”以字母k开始，而k在单词monkey中的位置是3。

    var location_of_y = the_word.indexOf("y");
    location_of_y)字母y的位置)是5。

    var cheeky = the_word.indexOf("q");
    cheeky值是-1，因为在单词“monkey”中没有字母q。

    indexOf更实用之处:

    var the_email = prompt("What's your email address?", "");
    var the_at_is_at = the_email.indexOf("@");

    if (the_at_is_at == -1)
    {
        alert("You loser, email addresses must have @ signs in them.");
    }

    这段代码询问用户的电子邮件地址，如果用户输入的电子邮件地址中不包含字符则提示用户＂＠你输入的电子邮件地址无效，电子邮件的地址必须包含字符@。＂

    charAt
    chatAt方法用于发现一个字符串中某个特定位置的字符。这里是一个例子：

    var the_word = "monkey";

    var the_first_letter = the_word.charAt(0);
    var the_second_letter = the_word.charAt(1);
    var the_last_letter = the_word.charAt(the_word.length-1);

    the_first_letter(第1个字符)是"m"
    the_second_letter(第2个字符)是"o"
    the_last_letter(最后一个字符)是 "y"

    注意利用字符串的length(长度)属性你可以发现在包含多少个字符。在本例中，the_word是"monkey"，所以the_word.length是6。不要忘记在一个字符串中第1个字符的位置是0，所以最后一个字符的位置就是length-1。所以在最后一行中用了the_word.length-1。

子字符串（substring）和charAt有些象，不同之处在于它能够从一个单词中抓取整个的子字符串，而不只是字母，这里是其格式：

    var the_substring = the_string.substring(from, to);

    "From"指的是子字符串中第１个字母的位置，"to"有点奇特，它是该子字符串中比最后一个位置大１的位置．使用这种神奇的方法你可以标记子字符串的起始和结束位置，用"to"的位置减去"from"的位置就会得出该子字符串的长度：

    var the_string = "monkey";

    var clergy = the_string.substring(0,4);

    var tool = the_string.substring(3,6);

    运行该段代码后变量clergy的值为"monk"; 变量tool的值为"key"。

    子字符串常和indexOf一起使用，将字符串分成若干块．例如，你可以从一个给定的URL中抽取出其域名：

    var the_url = prompt("What's the URL?","");

    var lead_slashes = the_url.indexOf("//");

    var domain_start = lead_slashes + 2;

    var without_resource = the_url.substring(domain_start, the_url.length);

    var next_slash = without_resource.indexOf("/");

    var domain = without_resource.substring(0, next_slash);

    这段代码的意思是：如果你输入"http://www.jsfan.org/course/senior"，则域名就是"www.jsfan.org" ．如果这个方法对你来说有些麻
烦，我将向你介绍如何使用split方法简化其执行过程．但是首先我们作一些分析．

    基本的技巧是将第１个斜杠和第２个斜杠之间的内容分离出来：

    var the_url = prompt("What's the URL?","");

    这行代码向用户询问一个URL．假设用户输入了

    "http://www.jsfan.org/course/senior"

    var lead_slashes = the_url.indexOf("//");
    这行代码确定第一个双斜杠的位置．在本例中lead_slashes的值是５，因为双斜杠的位置从５开始．

    你可能会想，通常的URL都是以http://开始，所以双斜杠的位置肯定是在５开始，为什么还要加入indexOf这一段多余的代码呢？但是问题的关键在于你不知道用户在填入URL时是否一定填入http:，他们也许会不小心多键入了一个空格，也许他们所键入的URL在一个加密服务器上，其URL是"https://www.whatever.com/" ．在编程你必须预料到种种可能发生的问题．所以我们必须用indexOf方法确定双斜杠的确切的起始位置．

    var domain_start = lead_slashes + 2;

    这行代码用于计算该域名的第１个字母的起始位置．由于这里有一个双斜杠，所以域名第１个字母的起始位置应该在双斜杠所在位置加２的位置．

    var without_resource = the_url.substring(domain_start, the_string.length);

    这段代码将域名起始位置往后的所有字符都提取出来．所以执行完这行代码后without_resource是"www.jsfan.org/course/senior"

    var next_slash = without_resource.indexOf("/");

    这行代码计算出该字符串中下一个斜杠的位置，而从该字符串起始位置到这个斜杠之间的内容就是域名．在本例中下一个斜杠的位置是13。

    var domain = without_resource.substring(0, next_slash);

    最后一步是提取出该字符串起始位置到下一个斜杠之间的所有内容．在本例中使得域名等同于"www.jsfan.org"。

    这样做确实很麻烦，利用split方法则可以使该过程容易很多．

    你可以使用split方法用限位器来分割一系列的名称，然后将其放在一个数组中．例如：

    var my_friends = "trixie,moxie,sven,guido,hermes";

    var friend_array = my_friends.split(",");

    for(loop=0;loop<friend_array.length;loop++)
    {
        document.writeln(friend_array[loop] + " is my friend.<br>");
    }

    这段代码将字符串my_friends分割成包含５个元素的数组．JavaScript可以为你自动建立一个数组，所以你无需使用new Array()．

    将字符串分割成数组之后，我们使用了循环语句写出每一个名称．我们可以利用split方法简化前面所讲到的域名提取：

    var the_url = prompt("What's the URL?","");

    var first_split = the_url.split("//");

    var without_resource = first_split[1];

    var second_split = without_resource.split("/");

    var domain = second_split[0];

    这段代码简化了很多而且也更容易理解．我们来分析一些这段代码：

    var the_url = prompt("What's the URL?","");

    提示用户输入一个URL，假设用户输入"http://www.jsfan.org/course/senior" ．
    var first_split = the_url.split("//");

    将用户输入的字符串分割成两块：first_split[0]是"http:"，first_split[1]是"www.jsfan.org/course/senior"

    var without_resource = first_split[1];
    提取出数组中的第２个元素，所以现在without_resource是"www.jsfan.org/course/senior"

    var second_split = without_resource.split("/");
    将without_resource分割成３块：www.jsfan.org, course和senior．现在你可以看到split的用途了吧？

    var domain = second_split[0];
    现在我们提取出新数组中的第１个元素就可得出域名．

    接下来我们将学习相关数组的概念，然后我们就正式开始学习神奇的cookie．

数组可以使你存储各种元素的列表，而且使你能够访问图象、表单以及表单元素．在上次的Javascript教程中我讲解了如何生成和控制按照索引号编排的数组例如：

    var an_array = new Array("hickory","dickory");
    var element_one = an_array[0];
    var element_two = an_array[1];

an_array[2] = "doc";

这里生成一个新数组，并用两个字符串进行了初始化．第１个元素可以用其索引号０进行访问，而第２个元素则可以用其索引号１进行访问an_array[1]．你可以通过添加数组索引号加长数组的长度．在本例中我加入了第３个元素，使其值等于 "doc"．现在该数组中包含"hickory,dickory, doc"３个元素．

相关数组和上面的数组相同，但它不使用数字做索引，而是用单词来做索引．

var phone_book = new Array();

phone_book["sleepy"] = "(203) 555-1234";
phone_book["happy"] = "(203) 555-2345";

这段代码生成一个电话号码簿，你输入"happy"就可以访问相应的电话号码：

var happy_number = phone_book["happy"];

执行相关数组的例子看看它如何工作，同时再温习一下javascript中表单的使用方法．

Name: Happy Sleepy Sneezy Sleazy Sneery Bleary Tweaked

Number:

这个例子比较复杂，我们来慢慢研究它．首先我们看一看电话号码簿本身．它定义为phone_book，有７条输入项：

var phone_book = new Array();

phone_book["happy"] = "(203) 555-1234";

phone_book["sleepy"] = "(203) 555-2345";

phone_book["sneezy"] = "(203) 555-4321";

phone_book["sleazy"] = "(203) 555-3245";

phone_book["sneery"] = "(203) 555-3213";

phone_book["bleary"] = "(203) 555-2365";

phone_book["tweaked"] = "(203) 555-1664";

每条记录的关键字是小矮人的名字，而每条记录的值就是该小矮人的电话号码．假设我们需要找到某个小矮人的电话号码，例如Sneezy的电话号码，我们这样写：

var the_number = phone_book["sneezy"];

现在我们看看这个表单：

    <form name="the_form">
        <b>Name:</b>
        <select onChange = "displayNumber(phone_book,this.options[selectedIndex].value);">
            <option value="happy">Happy</option>
            <option value="sleepy">Sleepy</option>
            <option value="sneezy">Sneezy</option>
            <option value="sleazy">Sleazy</option>
            <option value="sneary">Sneery</option>
            <option value="bleary">Bleary</option>
            <option value="tweaked">Tweaked</option>
        </select>

        <p>
        <b>Number:</b>
        <input type="text" name="number_box" value="">
    </form>

注意表单和表单内的元素都有名称，这样以来便于我们读取和写入表单元素．

注意select标签中的onChange处理器的用法：当所选择的选项变化时，它就调用函数displayNumber，该函数已做了定义．如果我在下拉选单中选择了sneezy，则表达式this.options [selectedIndex].value 返回"sneezy"，如果你对该部分的内容不熟悉，请先阅读上次的javascript初级教程－第五课的内容．

确定了用户所选择的选项之后，我们进入函数displayNumber：

    function displayNumber(phone_book, entry)
    {
        var the_number = phone_book[entry];
        window.document.the_form.number_box.value = the_number;
    }

它使用了两个参数－一个电话号码簿和一个名称，在函数第1行中，

var the_number = phone_book[entry];

观察一下电话号码簿上的名字，然后进入下一行，

window.document.the_form.number_box.value = the_number;

填入表单元素的数字命名为number_box．

你可以看到相关数组是将一个字符串连接到另一个字符串的好办法．你可以利用相关数组将名字连接到电话号码，密码，生日以及其他各种资料．在之后的课程中我将向你们介绍利用相关数组可以做的各种有用的技巧．

加载全部内容