JS入门到精通第2章 JavaScript基础

分类Javascript时间2026-04-04 09:55:35发布信义之树浏览175

导读：一、练习1. 练习1 （1）源代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>输出红、绿、蓝3种颜色的值</title> </head>...

一、练习

1. 练习1

（1）源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>输出红、绿、蓝3种颜色的值</title>
</head>

<body>
    <script type="text/javascript">
    document.write("RGB颜色#6699FF的3种颜色的色值分别为：");
    document.write("<p>R:"+0x66);
    document.write("<p>G:"+0x99);
    document.write("<p>B:"+0xff);
    
    </script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_1/

2. 练习2

（1）源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>输出科学记数法表示的浮点数</title>
</head>

<body>
    <script type="text/javascript">
    document.write("科学记数法表示的浮点数的输出结果：");
    document.write("<p>");    
    document.write(3e+6);    
    document.write("<br>");
    document.write(3.5e3);    
    document.write("<br>");
    document.write(1.236e-2);        
        
        
    </script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_2/

3. 练习3

（1）源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>输出奥尼尔的中文名、英文名和别名</title>
<style type="text/css">
    *{font-size:18px;}        
</style>
    
    </head>

<body>
    
<script type="text/javascript">
    document.write('<pre>');
    document.write('中文名：沙奎尔·奥尼尔');
    document.write('\n英文名：ShaquilleO\'Neal');
    document.write('\n别名：大鲨鱼');
    document.write('</pre>');    
</script>    
        
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_3/

4. 练习4

（1）源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>输出球员信息</title>
<style type="text/css">
*{font-size:18px;
  line-height:30px;}
</style>
</head>

<body>
<h1 style="font-size:24px;">科比·布莱恩特</h1>    
<script type="text/javascript">
var alias="小飞侠";
var height=198;
var score=33643;
var achievement="五届NBA总冠军";
var position="得分后卫/小前锋";    

document.write("别名")；
document.write(alias)；
document.write("<br>身高：")；    
document.write(height)；    
document.write("厘米<br>总得分：")；    
document.write("score")；    
document.write("分<br>主要成就：")；    
document.write("achievement")；    
document.write("<br>场上位置：")；    
document.write(position)；    

</script>
        
</body>
</html>

（ 2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_4/

5. 练习5

（1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>将华氏度转换为摄氏度</title>
</head>

<body>
<h2>洛杉矶市当前气温</h2>    
<script  type="text/javascript">
  var degreeF=68;
  var degreeC=0;
  degreeC=5/9*(degreeF-32)
  document.write("华氏度："+degreeF+"&deg;F");
  document.write("<br>摄氏度："+degreeC+"&deg;C");    
</script>
</body>
</html>

2. 运行页面

https://www.xinyizhishu.top/jsC/sc/2_5/

6. 练习6

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串运算符的使用</title>
</head>

<body>
<script type="text/javascript">
    var movieName,director,type,actor,boxOffice;
    movieName = "美人鱼";    
    director = "周星驰";    
    type = "喜剧、爱情、科幻";    
    actor = "邓超、林允";
    boxOffice = 33.9;
    alert("影片名称："+movieName+"\n导演："+director+"\n类型："+type+"\n主演："+actor+"\n票房："+boxOffice+"亿元");
</script>

</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_6/

7. 练习7

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较运算符的使用</title>
</head>

<body>
<script>
    var age = 25;
    document.write("age变量的值为："+age);
    document.write("<p>");
    document.write("age>20：");
    document.write(age>20);    
    document.write("<br>");
    document.write("age<20：");
    document.write(age<20);    
    document.write("<br>");    
    document.write("age=20：");
    document.write(age==20);    
        
</script>    
    
    
</body>
</html>

2. 运行页面

https://www.xinyizhishu.top/jsC/sc/2_7/

8. 练习8

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>赋值运算符的使用</title>
</head>

<body>
<script type="text/javascript">
    var a = 2;
    var b = 3;
    document.write("a=2,b=3");
    document.write("<p>");
    document.write("a+=b运算后：");
    a+=b;
    document.write("a="+a);
    document.write("<br>");
    document.write("a-=b运算后：");
    a-=b;
    document.write("a="+a);
    document.write("<br>");    
    document.write("a*=b运算后：");
    a*=b;
    document.write("a="+a);
    document.write("<br>");
    document.write("a/=b运算后：");
    a/=b;
    document.write("a="+a);
    document.write("<br>");
    document.write("a%=b运算后：");
    a%=b;
    document.write("a="+a);
    
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_8/

（3）Tips

这里有点绕，a的值不断在变化后再运算。

9. 练习9

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>逻辑运算符的使用</title>
</head>

<body>
<script type="text/javascript">    
var num = 20;    //定义变量
document.write("num="+num);//输出变量的值
document.write("<p>num>0 && num<10的结果：");//输出字符串    
document.write(num>0 && num<10);//输出运算结果    
document.write("<br>num>0 || num<10的结果：");//输出字符串    
document.write(num>0 || num<10);//输出运算结果    
document.write("<br>!num的结果：");//输出字符串
document.write(!num);//输出运算结果    
document.write("<br>!num<10的结果：");//输出字符串
document.write(!num<10);//输出运算结果    
    
    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_9/

（3）Tips

我多加一条。

10. 练习10

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件运算符的使用</title>
</head>

<body>
<script type="text/javascript">    
var year = 2026;//定义年份变量    
result=(year%4==0 && year%100!=0)||(year%400==0)   ?"是闰年"    :"不是闰年"
    
alert(year+"年"+result);    
    

</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_10/

（3）Tips

还行。

11. 练习11

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运算符优先级的使用</title>
</head>

<body>
<script type="text/javascript">
var balance = 10;//定义手机话费余额变量    平衡
var call = 0.2;//定义通话资费变量    
var traffic = 0.5;//定义流量资费变量  交通，交易    
var minutes = (balance-traffic*10)/call;//计算余额可通话分钟数document.write("手机话费余额还可以通话"+minutes+"分钟");//输出字符串    
    

</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_11/

（3）Tips

有啥意义？

二、编程训练

1. 训练1

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出文本</title>
</head>

<body>
<script type="text/javascript">
document.write("珠穆朗玛峰的高度约等于");
document.write(8844);
document.write("米");
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_12/

（3）Tips

还是有啥意义？

2. 训练2

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>反斜杠用法</title>
</head>

<body>
<script type="text/javascript">    
document.write("E:\\JavaScript\\Code\\demo");    
    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_13/

（3）Tips

反斜杠得用2个，1个不显示；正斜杠一个就显示

3。训练3

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出变量</title>
</head>

<body>
<script type="text/javascript">
    var area=1710
    document.write("俄罗斯的国土面积约为");
    document.write(area);
    document.write("万平方公里");
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_14/

（3）Tips

有病

4. 训练4

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出一串文本</title>
</head>

<body>
<script type="text/javascript">
    var name = '张无忌';
    var sex = '男';
    var age = 25;
    var height = 1.76;
    var skill = '九阳神功、乾坤大挪移';
    document.write("<h2>个人信息</h2>");
    document.write("姓名：" + name);
    document.write("<br>性别：" + sex);
    document.write("<br>年龄：" + age);
    document.write("<br>身高：" + height + "m");
    document.write("<br>武功：" + skill);
    

</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_15/

（3）Tips

输出文本

5. 训练5

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算利率</title>
</head>

<body>
<script type="text/javascript">
  var rate = 2.75;
  var money = 100000;    
  var year = 3;    

  document.write("存款金额："+money+"元");
  document.write("<br>年利率："+rate+"%");
  document.write("<br>存款期限："+year+"年");
  var total = money+money*(rate/100)*year;
  document.write("<br>本息合计："+total+"元");
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_16/

（3）Tips

比较简单

6. 训练6

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三目比较运算</title>
</head>

<body>
<script type="text/javascript">
    var score=65;
    var status;
    status=(score>=60)? "及格":"不及格";
    document.write("周星星的英语成绩是"+score+"分");
    document.write("<br>");
    document.write("周星星的英语成绩"+status+"");
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_17/

（3）Tips

记住

7. 训练7

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算梯形面积</title>
</head>

<body>
<script type="text/javascript">
  var t = 20;    
  var b = 30;
  var height = 20;
  var area = (t+b)*height/2;
  document.write("梯形稻田的面积为"+area+"平方米");    
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_18/

（3）Tips

运算符优先级

三、实践与练习

1. 实践1

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">
    document.write("<pre>");
    document.write("他强由他强，清风抚山岗\n");
    document.write("他横任他横，明月照大江\n");
    document.write("他自狠来他自恶，我自一口真气足\n\n");
    document.write("\t\t——《九阳神功》");
    document.write("</pre>");
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_19/

（3）Tips

如果没有pre标签则识别不了反斜杠标识。

2. 实践2

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算工资</title>
</head>

<body>
<script type="text/javascript">
var salary = 6500;        
var insurance = 500;  //保险    
var threshold = 5000; //阈值    
var tax = 0.03;       //税
salary-=insurance;    

var salary1=salary;    
salary1-=threshold;    
salary1*=tax;    

salary-=salary1;
document.write("该员工的实际收入为"+salary+"元");    
    
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_20/

（3）Tips

这种写法也会了。

3. 实践3

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2月有多少天</title>
</head>

<body>
<script type="text/javascript">    
 var year = 2026;    
 var result=(year%4 == 0 && year%100 != 0)?29 :28    
 alert(year+"年2月有"+result+"天");    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/2_21/

（3）Tips

前面已有。

JS入门到精通第1章初识JavaScript JS入门到精通第3章流程控制

JS入门到精通 第2章 JavaScript基础

相关内容

JS入门到精通第2章 JavaScript基础