JavaScript入门(五)

简介:     网页中的JavaScript和基本语法 应用JavaScript到一个网页中是非常容易的; 所有你要做的就是使用这个标本标签:   // Your code here   对于老版本的浏览器,或如果你想使用严格的 XHTML ( HTML的最新版本) 代替过渡的XHTML, 你需要把这段代码加上注释,确保用户代理不在网页中显示它或试着把它当作HTML标示来解析。

    网页中的JavaScript和基本语法

应用JavaScript到一个网页中是非常容易的; 所有你要做的就是使用这个标本标签:

 

<script type="text/javascript">

// Your code here

</script>

 

对于老版本的浏览器,或如果你想使用严格的 XHTML ( HTML的最新版本) 代替过渡的XHTML

你需要把这段代码加上注释,确保用户代理不在网页中显示它或试着把它当作HTML标示来解析。 给代码加注释有两种不同的语法。 对于 HTML 文档和过渡的XHTML,你使用标准的HTML注释:

 

<script type="text/javascript">

<!--

// Your code here

-->

</script>

 

在严格的XHTML中,你需要使用CDATA注释语法为你的代码加注释——然而,最好不要在严格的XHTML文档中添加任何JavaScript,而是把它放到自己的文档中。在第三章有更多关于这方面的说明。

 

<script type="text/javascript"><!--//--><![CDATA[//><!—

// Your code here

//--><!]]></script>

 

技术上讲,在HTML文档的任何地方加入JavaScript都是做得到的,然后浏览器就会解释它。可是, 在流行的脚本中,有许多理由说明为什么这样做是个非常糟糕的主意。尽管到目前为止,我们会在文档的主体中加入JavaScript例子使你直接地可以看到你的第一个脚本在干什么。 这样会比第三章中等待你的流行和高级技术更容易帮助你的熟悉JavaScript

                                                                                  

注解也有一个与script“相反”的标签—noscript,它允许你添加一些只有在JavaScript不可用的情况下才会显示的内容。然而,noscriptXHTML 和严格的HTML中是不赞成使用的。如果你创建的JavaScript是友好的,就没有必要使用它。

                                                                                  

     JavaScript语法

在我们进一步探讨之前,先来讨论一下JavaScript基本语法:

l        // 表示当前行的其它部分是注释并且代码是不会执行的,所以解释器不会试着运行它。注释是一个把注解放到代码中的一个便捷方式,它可以提示我们这段代码打算作什么,或者帮助其它人阅读代码以理解代码是干什么的。

l        /* 表示一个多行注释的开始。

l        */ 表示一个多行注释的结束。多行注释同样是有用的,如果你想阻止某段代码被执行但是又不想永久的删除它。如果你对一个代码段有疑问,例如,你不能确定哪些行有问题,那么你可以每次注释掉它的一部分,从而分离出问题来。

l        大括号 {})被用来表示一个代码段。它们确保大括号中间的所有行都被当作一个代码段来看待。当我们在讨论像iffor这样的结构语句和函数时,你会看到大括号更多相关的应用。

l        分号或换行定义了语句的结束,一条语句就是一个单行命令。在实际应用中,分号是可以选择的。但是在语句结束的时候,使用它们来使代码更清晰条理是个好主意,因为这样做可以使你的代码更容易读和调试(尽管你可以把许多语句放到一行中,但是最好还是把它们放到独立的行中以使代码更容易读)。在大括号的后面不需要使用分号。

我们来把这个语句加到运行的代码段中:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html dir="ltr" lang="en">

<head>

<body>

<script type="text/JavaScript">

// One-line comments are useful for reminding us what the code is doing

/*

This is a multiline comment. It's useful for longer comments and

also to block out segments of code when you're testing

*/

/*

Script starts here. We're declaring a variable myName, and assigning to it the

value of whatever the user puts in the prompt box (more on that in Chapter

2), finishing the instruction with a semicolon because it is a statement

*/

var myName = prompt ("Enter your name","");

// If the name the user enters is Chris Heilmann

if (myName == "Chris Heilmann")

{

// then a new window pops up saying hello

alert("Hello Me");

}

// If the name entered isn't Chris Heilmann

else

{

// say hello to someone else

alert("hello someone else");

}

</script>

</body>

</html>

依据以前的JavaScript经验,你会发现一些代码不起作用了。现在所有的事情就是要弄清楚注释是怎么使用的、代码段是什么和为什么一些语句的结尾有个分号。如果你喜欢,你可以运行这段代码:只要把它复制到HTML网页中,使用.html后缀保存文档,按后在你的浏览器中打开它。

尽管一些像ifelse的语句跨越不止一行而且包含其它语句,但它们让被看成是一个语句,它们的后面不需要加分号。JavaScript解释器知道在if语句后面的哪几行语句应该被当作一个代码块来处理,因为有大括号{}。虽不是强制的,但是把大括号内面的代码进行缩进处理是个很不错的注意。这可以使阅读和调试更容易。我们会在下一章中讨论变量和条件语句(ifelse)。

  执行代码

浏览器从上到下来读取页面,所以代码执行的顺序取决于脚本块的顺序。一个脚本块是指 <script> </script>之间的代码。(同样需要注意到,不只是浏览器可以阅读我们的代码,一个网站的用户也可以查看你的代码,所以不要把一些保密的信息或者敏感的内容放到内面。)

在下面的例子中有三个脚本块。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html dir="ltr" lang="en">

<head>

<script type="text/javascript">

alert( 'First script Block ');

alert( 'First script Block - Second Line ');

</script>

</head>

<body>

<h1>Test Page</h1>

<script type="text/JavaScript">

alert( 'Second script Block' );

</script>

<p>Some more HTML</p>

<script type="text/JavaScript">

alert( 'Third script Block' );

function doSomething() {

alert( 'Function in Third script Block' );

}

</script>

</body>

</html>

 

如果你试着运行一下它,你会首先看到第一个脚本块中的alert()窗口,显示着消息:

 

 

First script Block

 

 

紧跟着的是第二行中的下一个alert()窗口,显示着消息:

 

 

First script Block - Second Line.

 

 

解释其会继续往下执行来到第二个脚本块,在这里alert函数会显示这样一个窗口:

 

 

Second script Block

 

 

接着其后包括alert()语句的第三个脚本块会显示:

 

 

Third script Block

 

 

尽管最下面几行的函数中存在另一个alert语句,但是它不会执行并显示消息。这是因为它在函数定义的内面(function doSomething(), 函数内面的代码只有在函数被调用的时候才会执行。

     函数

我们会在第三章中对函数进行深入的讨论,但我在这里介绍它们是因为不了解函数很难对JavaScript做更深入进一步的了解。一个函数就是一个被命名的、可重用的代码块,它被成对的大括号括起来,你可以用来完成一个特定的任务。 JavaScript包含许多函数,我们可以直接使用来完成一些任务如显示消息给用户。合理的使用函数可以避免一个程序员重复代码的编写。

我们同样可以创建自己的函数,在前面的代码段中我们就已经创建了一个。假定我们创建了一些代码,它们可以在某个元素里向网页中写一个消息。 我们可能需要在不同的情况下重复的使用它。当然我们可以在需要使用它们的地方通过复制粘贴代码段来实现,但是这种方法使代码过于冗长; 如果同样的代码段在一个页面中出现三四次,那么它同样很难理解和调试。 我们可以把这段打印消息的代码封装到一个函数中来替代,然后使用参数来给函数传递运行需要的消息。一个函数也可以为调用它的代码返回一个值。

       调用函数,你可以简单的在它的名字后写个括号:()。(注——你可以使用括号来传递参数。但是在没有参数的时候,你仍然必须使用括号。)但是你不能调用你想象的函数,必须是脚本已经创建的。我们可以如下的方式,通过把它添加到第三个代码块中来调用它:

 

<script type="text/JavaScript">

alert( 'Third script Block ');

function doSomething(){

alert( 'Function in Third script Block ');

}

// Call the function doSomething

doSomething();

</script>

</body>

</html>

 

到目前为止,在这章中我们已经从 JavaScript 语言的正反两方面讨论了它,明白了一些语法规则,学习了这种语言的一些主要组成部分(虽然只是简要地),并运行了一些 JavaScript 代码。你已经接触到了相当多的东西。在我们在下一章中继续对 JavaScript 语言作更详细的讲解前,让我们先来讨论一下成功的 JavaScript 开发的关键点:对象 
相关文章
|
2月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
563 2
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
113 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
41 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
87 10
|
1月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
3月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
31 1
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
598 1
|
2月前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。
下一篇
DataWorks