JavaScript实现网页交互

Ifeng_iPhone

已于 2022-09-17 14:35:35 修改

阅读量1.5k

点赞数

文章标签： javascript 前端开发语言

于 2022-07-21 19:26:18 首次发布

本文链接：https://blog.csdn.net/Ifeng_iPhone/article/details/125919324

版权

1.JavaScript简介

JavaScript 是⼀种基于对象的、事件驱动型的、解释型的脚本语⾔，JS设计的⽬的是实现⽹⻚的交互能⼒

•基于对象：（区别于⾯向对象），JavaScript和Java语⾔⼀样可以通过对象调⽤⽅法 obj.fn()

•事件驱动：⽹⻚⽂档中的HTML标签事件触发JavaScript代码执⾏

•解释型：边解释边执⾏（不会先对⽹⻚进⾏编译⽣成中间⽂件）

•脚本语⾔：JavaScript不会独⽴运⾏，依赖于⽹⻚⽂件（HTML⽂档）存在（通俗的理解为js要写在⽹⻚中）

2.案例

先建立一个HTML5文件，新增三个按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/test.js"></script>
</head>
<body>
<input type="button" value="clickMe1" onclick="test01();"></input>
<input type="button" value="clickMe2" onclick="test02();"></input>
<input type="button" value="clickMe3" onclick="test03();"></input>
</body>
</html>

2.1 定义两个变量分别计算他们和差积商

function test01(a,b){
  console.log(a+"和"+b+"的差为"+(a-b));
  console.log(a+"和"+b+"的积为"+(a*b));
  console.log(a+"和"+b+"的商为"+(a/b));
}

2.2 定义3个变量分别记录年⽉⽇，使⽤switch结构，计算出是指定的年⽉⽇的该年的第⼏天

function test02(y,m,d){
  var sum = 0;//记录总天数
  switch (m-1){//由月份计算，利用case穿透的特点
    case 11:sum += 30;
    case 10:sum += 31;
    case 9:sum += 30;
    case 8:sum += 31;
    case 7:sum += 31;
    case 6:sum += 30;
    case 5:sum += 31;
    case 4:sum += 30;
    case 3:sum += 31;
    case 2:sum += 28;
    case 1:sum += 31;
    case 0:sum += d;
  }
  if(m > 2) {
    if (y % 400 == 0 || y % 4 == 0 && y % 100 != 0) {
      sum++;
    }
    console.log("这是"+y+"年的第"+sum+"天")
  }
  }

2.3 使⽤循环在⻚⾯上打印出99乘法表

function test03(){
  document.write("<table>");
  for (var i = 1; i < 10; i++) {
    document.write("<tr>");
    for (var j = 1; j <= i; j++) {
      document.write("<td style='border: 3px solid brown;'>");//设置元素边框border，颜色是brown
      document.write(j + " * " + i + " = " + i * j + " ");
      document.write("</td>");
    }
    document.write("<br>");
    document.write("</tr>");
  }
  document.write("</table>");
}

2.4 面试题两个布尔类型的变量是否可以求和，为什么

可以，在JavaScript中将true看做1计算，将false看做0，如果出现字符就会当做字符串拼接,如：

var a = true;
var b = false;
var c = xx;
var d = a+b;
var e = c+a;
console.log(d);//结果为1
console.log(e);//结果为xxtrue

Ifeng_iPhone

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现网页交互

JavaScript是⼀种基于对象的、事件驱动型的、解释型的脚本语⾔，JS设计的⽬的是实现⽹⻚的交互能⼒
复制链接

扫一扫