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 面试题 两个布尔类型的变量是否可以求和,为什么文章来源:https://www.toymoban.com/news/detail-484974.html
可以,在JavaScript中将true看做1计算,将false看做0,如果出现字符就会当做字符串拼接,如:文章来源地址https://www.toymoban.com/news/detail-484974.html
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
到了这里,关于JavaScript实现网页交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!