JAVASCRIPT学习笔记基础（一）

来源：互联网发布：comsol软件用途编辑：程序博客网时间：2024/04/30 17:35

学习教程：

http://www.w3school.com.cn/js/index.asp

生成文本

<html><body><script type="text/javascript">document.write("Hello World!");</script></body></html>

生成普通文本和标签

<html><body><script type="text/javascript">document.write("<h1>HelloWorld!</h1>");</script></body></html>

实例解释：

如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 <script> 标签（同时使用 type 属性来定义脚本语言）。

这样，<script type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。

document.write 字段是标准的 JavaScript 命令，用来向页面写入输出。

把 document.write 命令输入到 <script type="text/javascript">与</script>之间后，浏览器就会把它当作一条 JavaScript 命令来执行。这样浏览器就会向页面写入 "Hello World!"。

注意：如果我们不使用 <script> 标签，浏览器就会把 document.write("Hello World!") 当作纯文本来处理，也就是说会把这条命令本身写到页面上。

在哪里放置 JavaScript

页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。

位于 head 部分的脚本：

当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。

head部分

包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。

<html><head><script type="text/javascript">function message(){alert("该提示框是通过 onload 事件调用的。");}</script></head><body onload="message()">body内容</body></html>

位于 body 部分的脚本：

body部分

在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。

<html><head></head><body><script type="text/javascript">document.write("该消息在页面加载时输出");</script></body></html>

外部的JAVASCRIPT

有时，你也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。

为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

注意：外部文件不能包含 <script> 标签。

然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了：

<html><head></head><body><script src="/js/example_externaljs.js"></script><p>实际的脚本位于名为 "xxx.js" 的外部脚本中。</p></body></html>

提示：您可以把 .js 文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。

JavaScript 是由浏览器执行的语句序列。

JavaScript 语句

JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

这个 JavaScript 语句告诉浏览器向网页输出 "Hello world"：

document.write("Hello world");

通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯，而且在 web 上的 JavaScript 案例中也常常会看到这种情况。

分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾。正因如此，常常会看到一些结尾没有分号的例子。

注释：通过使用分号，可以在一行中写多条语句。

JAVASCRIPT语句

<html><body><script type="text/javascript">document.write("<h1>这是标题</h1>");document.write("<p>这是段落</p>");document.write("<p>这是另一个段落</p>");</script></body></html>

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落：

javascript代码

<html><body><script type="text/javascript">document.write("<h1>这是标题</h1>");document.write("<p>这是段落。</p>");document.write("<p>这是另一个段落。</p>");</script></body></html>

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落：

javascript代码块

<html><body><script type="text/javascript">{document.write("<h1>这是标题</h1>");document.write("<p>这是段落。</p>");document.write("<p>这是另一个段落。</p>");}</script></body></html>

JavaScript 变量

<html><body><script type="text/javascript">var firstname;firstname="zzk";document.write(firstname);document.write("<br />");firstname="John";document.write(firstname);</script><p>上面的脚本声明了一个变量，为其赋值，显示该值，改变该值，然后再显示该值</p></body></html>

对字符串和数字进行加法运算

规则是：

如果把数字与字符串相加，结果将成为字符串。

<html><body><script type="text/javascript">x=5+5;document.write(x);document.write("<br />");x="5"+"5";document.write(x);document.write("<br />");x=5+"5";document.write(x);document.write("<br />");x="5"+5;document.write(x);document.write("<br />");</script><h3>规则是：</h3><p><strong>如果把数字与字符串相加，结果将成为字符串。</strong></p></body></html>

If 语句

如何编写一个 If 语句。

<html><body><script type="text/javascript">var d=new Date()var time=d.getHours()if(time<11){document.write("<b>早安</b>");}</script><p>本例演示 If 语句。</p><p>如果浏览器时间小于 10，那么会向您问“早安”。</p></body></html>

If...else 语句

如何编写 if...else 语句。

<html><body><script type="text/javascript">var d=new Date()var time=d.getHours()if(time<10){document.write("<b>早安</b>");}else{document.write("<b>十点以后了</b>");}</script><p>本例演示 If 语句。</p><p>如果浏览器时间小于 10，那么会向您问“早安”。</p></body></html>

If..else if...else

<html><body><script type="text/javascript">var d=new Date()var time=d.getHours()if(time<10){document.write("<b>早安</b>");}else if(time>=10&&time<16){document.write("<b>午安</b>");}else{document.write("<b>晚安</b>")}</script><p>本例演示 If 语句。</p><p>如果浏览器时间小于 10，那么会向您问“早安”。</p></body></html>

随机链接

本例演示一个随机的链接，当您单击这个链接时，会打开某个随机的网站。

<html><body><script type="text/javascript">var r=Math.random()if(r>0.5){document.write("<a href='http://www.baidu.com'>百度一下，你就知道</a>");}else{document.write("<a href='http://www.qq.com'>腾讯首页</a>");}</script></body></html>

Switch 语句: 如何编写一个 Switch 语句。

<html><body><script type="text/javascript">var d = new Date()theDay=d.getDay()switch (theDay){case 1:  document.write("<b>Money Monday</b>");case 5:  document.write("<b>Finally Friday</b>")  breakcase 6:  document.write("<b>Super Saturday</b>")  breakcase 0:  document.write("<b>Sleepy Sunday</b>")  breakdefault:  document.write("<b>I'm really looking forward to this weekend!</b>")}</script><p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p></body></html>

工作原理：switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。

警告框

<html><head><script type="text/javascript">function disp_alert(){alert("我是警告框");}</script></head><body><input type="button" onclick="disp_alert()" value="显示警告框"></body></html>

带折行的警告框

<html><head><script type="text/javascript">function disp_alert(){alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")}</script></head><body><input type="button" onclick="disp_alert()" value="显示警告框" /></body></html>

确认框

<html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button!");if(r==true){alert("You pressed OK!");}else {alert("Yout pressed Cancel!");}}</script></head><body><input type="button" onclick="show_confirm()" value="显示确认框"></body></html>

提示框

<html><head><script type="text/javascript">function disp_prompt(){var name=prompt("请输入您的名字","zhuzhengke")if(name!=null&&name!=""){document.write("欢迎"+name+"你今天过得怎么样")}}</script></head><body><input type="button" onclick="disp_prompt()" value="显示提示框"/></body></html>

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：

alert("文本")

确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

语法：

confirm("文本")

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：

prompt("文本","默认值")