0

0

JavaScript进阶教程(第一课)_基础知识

PHP中文网

PHP中文网

发布时间:2016-05-16 19:15:20

|

1365人浏览过

|

来源于php中文网

原创

欢迎您继续学习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"。

PHP 网络编程技术与实例(曹衍龙)
PHP 网络编程技术与实例(曹衍龙)

PHP网络编程技术详解由浅入深,全面、系统地介绍了PHP开发技术,并提供了大量实例,供读者实战演练。另外,笔者专门为本书录制了相应的配套教学视频,以帮助读者更好地学习本书内容。这些视频和书中的实例源代码一起收录于配书光盘中。本书共分4篇。第1篇是PHP准备篇,介绍了PHP的优势、开发环境及安装;第2篇是PHP基础篇,介绍了PHP中的常量与变量、运算符与表达式、流程控制以及函数;第3篇是进阶篇,介绍

下载

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
全国统一发票查询平台入口合集
全国统一发票查询平台入口合集

本专题整合了全国统一发票查询入口地址合集,阅读专题下面的文章了解更多详细入口。

9

2026.02.03

短剧入口地址汇总
短剧入口地址汇总

本专题整合了短剧app推荐平台,阅读专题下面的文章了解更多详细入口。

15

2026.02.03

植物大战僵尸版本入口地址汇总
植物大战僵尸版本入口地址汇总

本专题整合了植物大战僵尸版本入口地址汇总,前往文章中寻找想要的答案。

10

2026.02.03

c语言中/相关合集
c语言中/相关合集

本专题整合了c语言中/的用法、含义解释。阅读专题下面的文章了解更多详细内容。

2

2026.02.03

漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题
漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题

本专题围绕漫蛙漫画(Manwa / Manwa2)官网网页版入口进行整理,涵盖漫蛙漫画官方主页访问方式、网页版在线阅读入口、台版正版漫画浏览说明及基础使用指引,帮助用户快速进入漫蛙漫画官网,稳定在线阅读正版漫画内容,避免误入非官方页面。

5

2026.02.03

Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口
Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口

本专题汇总了俄罗斯知名搜索引擎 Yandex 的官网入口、免登录访问地址、中文登录方法与网页版使用指南,帮助用户稳定访问 Yandex 官网,并提供一站式入口汇总。无论是登录入口还是在线搜索,用户都能快速获取最新稳定的访问链接与使用指南。

62

2026.02.03

Java 设计模式与重构实践
Java 设计模式与重构实践

本专题专注讲解 Java 中常用的设计模式,包括单例模式、工厂模式、观察者模式、策略模式等,并结合代码重构实践,帮助学习者掌握 如何运用设计模式优化代码结构,提高代码的可读性、可维护性和扩展性。通过具体示例,展示设计模式如何解决实际开发中的复杂问题。

2

2026.02.03

C# 并发与异步编程
C# 并发与异步编程

本专题系统讲解 C# 异步编程与并发控制,重点介绍 async 和 await 关键字、Task 类、线程池管理、并发数据结构、死锁与线程安全问题。通过多个实战项目,帮助学习者掌握 如何在 C# 中编写高效的异步代码,提升应用的并发性能与响应速度。

2

2026.02.03

Python 强化学习与深度Q网络(DQN)
Python 强化学习与深度Q网络(DQN)

本专题深入讲解 Python 在强化学习(Reinforcement Learning)中的应用,重点介绍 深度Q网络(DQN) 及其实现方法,涵盖 Q-learning 算法、深度学习与神经网络的结合、环境模拟与奖励机制设计、探索与利用的平衡等。通过构建一个简单的游戏AI,帮助学习者掌握 如何使用 Python 训练智能体在动态环境中作出决策。

2

2026.02.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
麻省理工大佬Python课程
麻省理工大佬Python课程

共34课时 | 5.3万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

php-src源码分析探索
php-src源码分析探索

共6课时 | 0.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号