搜尋
首頁web前端js教程JavaScript进阶教程(第一课)_基础知识

欢迎您继续学习Javascript进阶教程。在此之前我们已经学习了Javascript初级教程。在这一阶段的学习中我们将继续学习在上次的教程中还没有来得及谈及的问题。我还将向你们展示Javascript的许多神奇功能,使你能够制作真正对多媒体应用程序。
    以下是我们将涉及的内容:
    给变量赋值
    If-then语句
    For和while循环
    编写你自己的函数
    打开及控制窗口
    读写HTML 表单
    应用数组
    控制图片转换
    如果这些课题你听起来还比较陌生的话,我建议你先阅读一下本站的Javascript基础教程。
    在上次的JavaScript教程中我们学习了JavaScript的核心内容:一些重要的语法以及最常用得一些对象。现在我们将加深你的JavaScript知识使你成为一个真正的JavaScript大师。以下就是你成为一个真正的大师必须走过的路。 
    第一课: 
    介绍和理清头绪,并介绍几个小技巧,重点介绍一种新的if-else语句以及变量真正含义。
    第二课:
    神奇的字符串处理,保存访问过你的网站得读者的信息,并介绍一种新的数组。
    第三课:
    甚至网页的时间线,使不同的事件在不同的时间发生,并且介绍如何使你的JavaScript脚本在各种浏览器上都能运行。
    第四课:
    预载图象,图象映射及JavaScript。生成你自己的对象及使用循环快捷地找到要找的对象。
    第五课:
    开发和测试JavaScript的工具,以及使你的JavaScript代码迅速运行的窍门。
    学习完本次的教程之后你将对JavaScript有了比较完整地了解。掌握了这门知识你就能够制作各种互联网应用程序了。

在JavaScript中最常用得语句就是if-else。下面是一个奖励猴子的例子:
    if (monkey_behavior == "good")
    {
        var toy = "videogames";
    } else {
        var toy = "rocks";
    }
    用通俗的英语翻译上面的代码意思是说:“如果猴子表现得好,就允许他玩电子游戏,否则就扁它。”上面的例子显示了if-else语句的标准格式,但是对于那些喜欢投机取巧的人,还有一种快捷方式: 
    var toy = (monkey_behavior=="good") ? "videogames" : "rocks";
    这个表达式和上面对语句所起的作用是完全一样的。这个条件语句有3部分:测试条件,测试为真时返回的值,以及测试为假时返回答值。在上面对例子中,测试条件是(monkey_behavior=="good")。如果测试条件为真,则返回字符串videogames;如果测试条件为假,则返回分号右边的值:rock。 
    这种快捷方式在函数调用中使用时非常便利。例如,你可以用它来做下面的事情:
    var password = "open sesame";
    var answer = prompt("what's the password? ","");
    alert((answer == password) ? "welcome!" : "buzz off");
    点击这里你就可以看到代码执行的过程。根据你所输入的字符是否是规定单密码,你将受到“欢迎”的信息或者to是蜂鸣。 
    如果没有这种条件语句,则必须这样书写代码:: 
    var password = "open sesame";
    var answer = prompt("what's the password? ","");
    if (answer == password) 
    {
        alert("welcome");
    } else {
        alert("buzz off");
    }
    显然代码长了很多,但是也更容易了解它的含义。选用何种条件语句依每个人的喜好而定。

这里是一个应用变量的例子:
    var happiness = "a banana split";
    alert("The monkeys think happiness is " + happiness);
    这行代码声明一个叫做happiness的变量,然后在一个alert对话框中调用这个变量。如果你看过别人的JavaScript,你可能会注意到他们在声明变量时使用了var,这种用法可能会造成问题。首先,可能会造成有些版本的MSIE瘫痪,或运行不正常。这种情况在Mac机上的MSIE最有可能发生。其次,如果你编写很复杂的JavaScripts,你必须编写你自己的函数,所以你必须了解变量的含义。
    正如上次的JavaScript教程: 第四课中所述,函数是被调用后执行某特定功能的JavaScript程序代码。最好的函数具有模块化的特性,你可以控制输入的变量以及输出的结果。而且一旦编好之后你就无需担心它会出问题,而且不会和别的函数发生冲突。要使编写地函数具备这些稳定的特性,你必须确保不要轻易改变那些作为参数传递给其他函数的变量. 下面对例子显示了如果你不注意这些细节会造成什么后果。假设我们编写一个程序将华氏温度转换为摄氏温度。点击华氏/摄氏来观察一下我所指的意思。如果你转换转换华氏50度,则会出现一条信息:
    “50 degrees Fahrenheit is 10 degrees Celsius(华氏50度相当于摄氏10度)。”
    以下是代码:
    function fahrenToCelsius(fare)
    {
        temp = (faren - 32) * 5/9;
        return temp;
    }
    function convertTemp()
    {
        temp = prompt("what temperature fahrenheit? ","50");
        celsius = fahrenToCelsius(temp);
        alert(temp + " degrees Fahrenheit is " + celsius + " degrees Celsius.");
    } 
    这个程序很简单。一个叫做convertTemp()得函数调用另外一个叫做fahrenToCelsius()并返回结果。如果你对本程序不是很懂,你需要重新学习一下javasript初级教程第四课。
    关于这个例子让人困惑之处在两个函数中都有一个叫做temp的变量,在convertTemp()函数中它的作用是储存华氏温度Fahrenheit值 (由用户提供)。在fahrenToCelsius()函数中,它用于计算转换后的摄氏温度值Celsius。这个不仅让我们感到困惑而且也会让这个Javascript程序感到困惑。如果你试图用变量运行这段代码就会发生下面的结果:如果你希望转换华氏50度,则会显示下面的信息:"10 degrees Fahrenheit is 10 degrees Celsius."(华氏10度相当于摄氏10度)。为什么你输入的是华氏50度,而程序却将其理解为你输入了10度呢?我们来研究一下这个程序的执行过程。当我们调用函数convertTemp()并在提示栏中输入了"50"时,我们得到temp = 50;然后"temp"被传递给函数farenToCelsius()。在farenToCelsius()中,参数faren被设定为50,而"temp" 被设定为(50 - 32) x 5/9, 其结果是10。在返回结果之前,各项参数值是:
    faren = 50
    temp = 10
    现在farenToCelsius()将10返回给变量celsius: 
    temp = 10
    celsius = 10
    现在我们得到一个错误的语句: "10 degrees Fahrenheit is 10 degrees Celsius"。如果你仔细一些,不要将两个函数中的变量起同样的名称就可以避免这些问题。但这也不是最佳解决方案。当你不断加入更多的函数时,很难确保你不会将函数中的变量重名。而且如果你重复使用许多变量名例如loop,index,count和the_name时,使用不同的名称实在是一个很令人头疼的事。
    最好的解决办法是让JavaScript明白在fahrenToCelsius()函数中用到的变量temp和在convertTemp()函数中用到的变量temp是两码事。如果每个函数都有只应用于本函数内部的变量temp你就无需担心不同函数中的同名变量会搅成一团。而var就是用于这个目的。
    要使JavaScript中各种同名变量不会发生混淆,你可以在声明变量时在变量前面加上var。在一个函数内用var声明后灯的变量叫做局部变量,它只存在于该函数内部。通常情况下你应该尽量使用局部变量。
    这里是用var声明后的正确的JavaScript代码:
    function fahrenToCelsius(faren)
    {
        var temp = (faren - 32) * 5 / 9;
        return temp;
    }
    function convertTemp()
    {
        var temp = prompt("what temperature Fahrenheit? ","50");
        var celsius = badFahrenToCelsius(temp);
        alert(temp + " degrees Fahrenheit is " + celsius + " degrees Celsius.");
    }
    现在当我们输入50时,(在convertTemp函数内部) temp = 50
    temp被传递到函数fahrenToCelsius(),在函数fahrenToCelsius()内部,参数faren现在被设定为50,然后temp用以下代码设定:
    var temp = (faren - 32) * 5 / 9;
    由于这个temp变量前面用var做了声明,所以该变量同其他函数中叫做temp的变量不同。执行完fahrenToCelsius()时,该函数种的temp即告消失。所以在fahrenToCelsius()返回数值前,faren = 50
    (在fahrenToCelsius内部) temp = 10
    (在convertTemp内部) temp = 50
    fahrenToCelsius()然后返回它的变量temp值10。一旦我们从fahrenToCelsius()函数中出来,该函数中等temp变量的作用即告终止。当fahrenToCelsius() 返回时,它将变量的值设置为10: 
    (在convertTemp内部) temp = 50
    (在convertTemp内部) celsius = 10
    现在显示的信息将是我们所希望的"50 degrees Fahrenheit is 10 degrees Celsius"。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

jQuery檢查日期是否有效jQuery檢查日期是否有效Mar 01, 2025 am 08:51 AM

簡單JavaScript函數用於檢查日期是否有效。 function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //測試 var

jQuery獲取元素填充/保證金jQuery獲取元素填充/保證金Mar 01, 2025 am 08:53 AM

本文探討如何使用 jQuery 獲取和設置 DOM 元素的內邊距和外邊距值,特別是元素外邊距和內邊距的具體位置。雖然可以使用 CSS 設置元素的內邊距和外邊距,但獲取準確的值可能會比較棘手。 // 設定 $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); 你可能會認為這段代碼很

10個jQuery手風琴選項卡10個jQuery手風琴選項卡Mar 01, 2025 am 01:34 AM

本文探討了十個特殊的jQuery選項卡和手風琴。 選項卡和手風琴之間的關鍵區別在於其內容面板的顯示和隱藏方式。讓我們深入研究這十個示例。 相關文章:10個jQuery選項卡插件

10值得檢查jQuery插件10值得檢查jQuery插件Mar 01, 2025 am 01:29 AM

發現十個傑出的jQuery插件,以提升您的網站的活力和視覺吸引力!這個精選的收藏品提供了不同的功能,從圖像動畫到交互式畫廊。讓我們探索這些強大的工具:相關文章:1

HTTP與節點和HTTP-Console調試HTTP與節點和HTTP-Console調試Mar 01, 2025 am 01:37 AM

HTTP-Console是一個節點模塊,可為您提供用於執行HTTP命令的命令行接口。不管您是否針對Web服務器,Web Serv

自定義Google搜索API設置教程自定義Google搜索API設置教程Mar 04, 2025 am 01:06 AM

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限制為Y

jQuery添加捲軸到DivjQuery添加捲軸到DivMar 01, 2025 am 01:30 AM

當div內容超出容器元素區域時,以下jQuery代碼片段可用於添加滾動條。 (無演示,請直接複製到Firebug中) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。