Top

  1. CSS 样式
  2. JavaScript 的使用方式
  3. JavaScript 输入输出
  4. 运算符
  5. 选择结构
  6. 循环结构
  7. 对象的使用
  8. DOM 操作

1 CSS 样式

1.1 问题

分别使用三种方式的 CSS 样式设置如下效果。

CASE - 图1

图 - 1

1.2 步骤

实现此案例需要按照如下步骤进行。

步骤一: 通过内联 (行内) 的方式实现样式的设置

1）创建文件 css1.html

2）通过快捷方式生成页面结构

3）添加 div 标签，并通过 style 属性设置样式

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>css案例</title>
  7. 5.  </head>
  8. 6.  <body>
  9. 7.      <!-- 行内样式 -->
  10. 8.      <h1 style="width: 300px; height: 50px;line-height: 50px;
  11. 9.   text-align: center;
  12. 10.   background-color:black;color:gold;">
  13. 11.          《普希金文学集》
  14. 12.      </h1>
  15. 13.  </body>
  16. 14.  </html>

步骤二: 通过内嵌的方式实现样式的设置

1）创建文件 css2.html。

2）通过快捷方式生成页面结构

3）添加 div 标签，并设置内容

4）在 head 标签内，添加 style 标签，并设置样式

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>css案例</title>
  7. 5.      <style>
  8. 6.          /\* 内嵌样式 */
  9. 7.          div{
  10. 8.              width:200px;
  11. 9.              height:50px;
  12. 10.              line-height:50px;
  13. 11.              text-align:center;
  14. 12.              background-color:lightblue;
  15. 13.              border-radius:10px;
  16. 14.          }
  17. 15.      </style>
  18. 16.  </head>
  19. 17.  <body>
  20. 18.      <div>
  21. 19.          《米小圈上学记》
  22. 20.      </div>
  23. 21.  </body>
  24. 22.  </html>

步骤三: 通过外链的方式实现样式的设置

1）创建文件 css1.css，并添加如下内容

  3. 1.  /\* 外链样式 */
  4. 2.  div{
  5. 3.  width:200px;
  6. 4.  height:50px;
  7. 5.  line-height:50px;
  8. 6.  text-align:center;
  9. 7.  background-color:lightblue;
  10. 8.  border-radius:10px;
  11. 9.  }

2）创建 css3.html 文件

3）通过快捷方式生成页面结构

4）添加 div 标签，并设置内容

5）在 head 标签内，添加 link 标签，并设置属性

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>css案例</title>
  7. 5.  </head>
  8. 6.  <body>
  9. 7.      <!-- 行内样式 -->
  10. 8.      <h1 style="width: 300px; height: 50px;line-height: 50px;
  11. 9.   text-align: center;
  12. 10.   background-color:black;color:gold;">
  13. 11.          《普希金文学集》
  14. 12.      </h1>
  15. 13.  </body>
  16. 14.  </html>

2 JavaScript 的使用方式

2.1 问题

通过三种不同的 JavaScript 方式，弹框显示 “hello, 北京 “。

2.2 步骤

实现此案例需要按照如下步骤进行。

步骤一: 通过元素绑定事件的方式实现弹框

1）创建文件 js1.html

2）通过快捷方式生成页面结构

3）添加 button 标签，并添加 onclick 事件

  3. 1.  <!DOCTYPE html>
  5. 3.  <head>
  6. 4.      <meta charset="UTF-8">
  7. 5.      <title>js案例</title>
  8. 6.  </head>
  9. 7.  <body>
  10. 8.      <button onclick="alert('hello，北京')">click me</button>
  11. 9.  </body>
  12. 10.  </html>

步骤二: 通过内嵌的方式实现弹框

1）创建文件 js2.html。

2）通过快捷方式生成页面结构

3）在 head 标签内，添加 script 标签，并添加 JavaScript 代码

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>js案例</title>
  7. 5.      <script>
  8. 6.          alert("hello，北京");
  9. 7.      </script>
  10. 8.  </head>
  11. 9.  <body>
  13. 11.  </body>
  14. 12.  </html>

步骤三: 通过外链的方式实现弹框

1）创建文件 js.js，并添加如下内容

  3. 1.  /\* 外链样式 */
  4. 2.  alert("hello,北京");

2）创建 js3.html 文件

3）通过快捷方式生成页面结构

4）添加 script 标签，并设置 src 属性链接外部 js 文件

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>js案例</title>
  7. 5.      <script src="js.js"></script>
  8. 6.  </head>
  9. 7.  <body>
  11. 9.  </body>
  12. 10.  </html>

3 JavaScript 输入输出

3.1 问题

接收输入的用户名，并在页面中输出显示。

3.2 步骤

1）创建文件 js4.html

2）通过快捷方式生成页面结构

3）添加 script 标签，在标签中添加代码

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>js案例</title>
  7. 5.      <script>
  8. 6.          name = prompt("请输入您的姓名：");
  9. 7.          document.write("欢迎您，"+name);
  10. 8.      </script>
  11. 9.  </head>
  12. 10.  <body>
  14. 12.  </body>
  15. 13.  </html>

4 运算符

4.1 问题

接收一个年份的输入，判断是否是闰年。

4.2 步骤

1）创建文件 js5.html

2）通过快捷方式生成页面结构

3）添加 script 标签，在标签中添加代码

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>js案例</title>
  7. 5.      <script>
  8. 6.          year = prompt("请输入年份：");
  9. 7.          if (year%4==0&&year%100!=0||year%400==0){
  10. 8.              document.write(year+"是闰年");
  11. 9.          }else{
  12. 10.              document.write(year+"是平年");
  13. 11.          }
  14. 12.      </script>
  15. 13.  </head>
  16. 14.  <body>
  17. 15.  </body>
  18. 16.  </html>

5 选择结构

5.1 问题

输入成绩值，范围是 1~100 ，输出优良中差四个等级。

5.2 步骤

1）创建文件 js6.html

2）通过快捷方式生成页面结构

3）添加 script 标签，在标签中添加代码

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>js案例</title>
  7. 5.      <script>
  8. 6.          score = prompt("请输入成绩（0~100）：");
  9. 7.          if (score<=100 && score>=90){
  10. 8.              document.write("成绩优秀");
  11. 9.          }else if(score<90 && score>=80){
  12. 10.              document.write("成绩良好");
  13. 11.          }else if(score<80 && score>=60){
  14. 12.              document.write("成绩中等");
  15. 13.          }else if(score<60 && score>=0){
  16. 14.              document.write("成绩较差");
  17. 15.          }else{
  18. 16.              document.write("成绩有误");
  19. 17.          }
  20. 18.      </script>
  21. 19.  </head>
  22. 20.  <body>
  23. 21.  </body>
  24. 22.  </html>

6 循环结构

6.1 问题

计算 1~100 的和。

6.2 步骤

1）创建文件 js7.html

2）通过快捷方式生成页面结构

3）添加 script 标签，在标签中添加代码

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>js案例</title>
  7. 5.      <script>
  8. 6.          var sum=0;
  9. 7.          for(var i=0;i<=100;i++){
  10. 8.              sum+=i;
  11. 9.          }
  12. 10.          alert("sum="+sum);
  13. 11.      </script>
  14. 12.  </head>
  15. 13.  <body>
  16. 14.  </body>
  17. 15.  </html>

7 对象的使用

7.1 问题

定义一个手机对象，包含品牌和颜色属性，打电话和拍照方法。

7.2 步骤

1）创建文件 js8.html

2）通过快捷方式生成页面结构

3）添加 script 标签，在标签中添加代码

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>js案例</title>
  7. 5.      <script>
  8. 6.          var phone={
  9. 7.              brand:"华为",
  10. 8.              color:"黑色",
  11. 9.              ShowInfo:function(){
  12. 10.                  alert("我是用的是"+this.brand+"手机，颜色是"+this.color);
  13. 11.              }
  14. 12.          };
  15. 13.          phone.ShowInfo();
  16. 14.      </script>
  17. 15.  </head>
  18. 16.  <body>
  19. 17.  </body>
  20. 18.  </html>

8 DOM 操作

8.1 问题

接收用户在表单中输入的姓名和年龄，并在页面中输出。

8.2 步骤

1）创建文件 js9.html

2）通过快捷方式生成页面结构

3）添加表单元素和表单控件

4）添加 script 标签，在标签中添加代码

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>js案例</title>
  8. 6.  </head>
  9. 7.  <body>
  10. 8.      <form action="" method="post">
  11. 9.          <p>
  12. 10.              姓名:<input type="text" id="name">
  13. 11.          </p>
  14. 12.          <p>
  15. 13.              密码:<input type="password" id="password">
  16. 14.          </p>
  17. 15.          <p>
  18. 16.              <input type="button" value="显示" onclick="show()">
  19. 17.          </p>
  20. 18.      </form>
  21. 19.      <script>
  22. 20.          function show(){
  23. 21.              var name=document.getElementById("name").value;
  24. 22.              var password=document.getElementById("password").value;
  25. 23.              document.write("姓名:"+name,",密码"+password);
  26. 24.          }
  28. 26.      </script>
  29. 27.  </body>
  30. 28.  </html>

https://tts.tmooc.cn/ttsPage/NTD/NTDTN202109/WEBBASE/DAY02/CASE/01/index.html