JavaScript系统学习之一 <基本语法，运算符，流程控制语句>

本文链接：https://blog.youkuaiyun.com/iciclewang/article/details/7003849

本文深入探讨JavaScript语言的基础概念、语法特性、控制结构、循环、函数、条件运算符、变量、运算符、函数、条件运算符、变量作用域、错误处理等核心知识点，详细介绍了JavaScript在网页交互中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考资料来源W3School（http://www.w3school.com.cn）

什么是 JavaScript？

JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
所有的人无需购买许可证均可使用 JavaScript。

原来JavaScript跟Java完全不一样，JavaScript 的正式名称是 "ECMAScript"。

HTML 的 <script> 标签用于把 JavaScript 插入 HTML 页面当中。

JavaScript代码可以放在三个地方：

1.当页面载入时，会执行位于 body 部分的 JavaScript。

2.当被调用时，位于 head 部分的 JavaScript 才会被执行。

3.使用外部js文件，<script src="xxx.js">....</script>

JavaScript语句

document.write("Hello world");

其中分号是可选的，养成习惯最好是写上。语句块是用大括号括起来：注意：它是大小写敏感的。

<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

JavaScript的注释有两种，行注释用两斜杠“//”；块注释用/* 注释内容 */，这个跟sql的一样。

变量的定义如：var x;也可以这样：var iNum1 = 1, iNum = 2, iNum3 = 3; 但不知道它为什么没有类型。赋什就用等于号如：x=5;

JavaScript运算符

给定 y=5，下面的表格解释了这些算术运算符：

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
--	递减	x=--y	x=4

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	等价于	结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

看见没有，赋值运算符还蛮先进的。再来看一下比较运算符，比较运算符在逻辑语句中使用，以测定变量或值是否相等。给定 x=5，下面的表格解释了比较运算符：

运算符	描述	例子
==	等于	x==8 为 false
===	全等（值和类型）	x===5 为 true；x==="5" 为 false
!=	不等于	x!=8 为 true
>	大于	x>8 为 false
<	小于	x<8 为 true
>=	大于或等于	x>=8 为 false
<=	小于或等于	x<=8 为 true

这里说一下，测试的时候可以直接把语句写在浏览器的地址栏里面，如把这一样复制到地栏中按回车试试

javascript:var d=new Date(); document.write(d);

JavaScript还有条件运算符，格式如下：

variablename=(condition)?value1:value2

JavaScript 函数

将脚本编写为函数，就可以避免页面载入时执行该脚本。前面不是说地，在Body中的JavaScript会在页面加载时执行吗，在head中的脚本也会执行，但是把它放到函数里面就不会了，函数要调用才会执行。

<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>

注意：别忘记 JavaScript 中大小写字母的重要性。"function" 这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。无参数的函数必须在其函数名后加括号，像上面例子一样。

return 语句

return 语句用来规定从函数返回的值。

因此，需要返回某个值的函数必须使用这个 return 语句。

JavaScript控制语句

if 语句

在一个指定的条件成立时执行代码。

if...else 语句

在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

if...else if....else 语句

使用这个语句可以选择执行若干块代码中的一个。

<script type="text/javascript">

var d = new Date()
var time = d.getHours()

if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>

switch 语句

使用这个语句可以选择执行若干块代码中的一个。

<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date()
theDay=d.getDay()

switch (theDay)
   {
   case 5:
     document.write("Finally Friday")
     break
   case 6:
     document.write("Super Saturday")
     break
   case 0:
     document.write("Sleepy Sunday")
     break
   default:
     document.write("I'm looking forward to this weekend!")
}
</script>

switch后面的变量也可以是字符。厉害吧。

JavaScript 循环

1.for循环

<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>

很像C语言吧

2.while循环

<script type="text/javascript">
var i=0
while (i<=10)
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
</script>

3.do while

<script type="text/javascript">
var i=0
do 
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
while (i<0)
</script>

4.JavaScript break 和 continue 语句
用在循环内部，也跟C语言的意思一样。

JavaScript For...In 声明

用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。很像C#的foreach。

<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>

Try...Catch 语句

下一个例子会显示一个确认框，让用户来选择在发生错误时点击确定按钮来继续浏览网页，还是点击取消按钮来回到首页。如果 confirm 方法的返回值为 false，代码会把用户重定向到其他的页面。如果 confirm 方法的返回值为 true，那么代码什么也不会做。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="There was an error on this page.\n\n"
  txt+="Click OK to continue viewing this page,\n"
  txt+="or Cancel to return to the home page.\n\n"
  if(!confirm(txt))
    {
    document.location.href="http://www.w3school.com.cn/"
    }
  }
}
</script>
</head>

<body>
<input type="button" value="View message" οnclick="message()" />
</body>

</html>

脚本真是太厉害了。

Throw 声明

throw 声明的作用是抛出 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。厉害，连这个都有。

下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。

<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{ 
if(x>10) 
throw "Err1"
else if(x<0)
throw "Err2"
} 
catch(er)
{
if(er=="Err1") 
alert("Error! The value is too high")
if(er == "Err2") 
alert("Error! The value is too low") 
}
</script>