阅读912 返回首页    go 阿里云 go 技术社区[云栖]

JAVASCRIPT学习笔记基础（一）

学习教程：

https://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 >
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='https://www.baidu.com'>百度一下，你就知道</a>");
}
else
{
document.write("<a href='https://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>")
  break
case 6:
  document.write("<b>Super Saturday</b>")
  break
case 0:
  document.write("<b>Sleepy Sunday</b>")
  break
default:
  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"  value="显示警告框">
</body>
</html>

带折行的警告框

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

<input type="button"  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"  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"  value="显示提示框"/>
</body>
</html>

警告框

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

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

语法：

alert("文本")

确认框

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

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

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

语法：

confirm("文本")

提示框

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

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

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

语法：

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




最后更新：2017-04-02 06:52:19

  上一篇：go AIDL文件中 in类型和out类型数据的区别
  下一篇：go 应用语言切换的三种方法