首页 > 编程语言 >2--Web前端开发-JavaScript

2--Web前端开发-JavaScript

时间:2024-08-04 19:23:48浏览次数:19  
标签:Web arr console log -- JavaScript alert 对象 var

引入方式

1、内部脚本:将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间

在HTML文档中,可以在任意地方,放置任意数量的<script>

一般会把脚本置于<body>元素的底部,可以改善显示速度

<script>
alert("hello javascript");
</script>

可放在代码中任意位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-引入方式</title>
    <!-- 内部脚本 -->
   <script>
       alert("hello javascript");
   </script>
    
</head>
<body>
    
</body>
</html>

得到

2、外部脚本:将JS代码定义在外部JS文件中,然后引入到HTML页面中

外部JS文件中,只包含JS代码,不包含<script>标签

<script>标签不能自闭合:<script src="js/demo.js"/>错误

<script src="js/demo.js"></script>
alert("hello javascript")

将JS代码定义在外部JS文件中

在代码中引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-引入方式</title>
    <!-- 内部脚本 -->
     <!-- <script>
       alert("hello javascript");
     </script> -->
    <!--  外部脚本 -->
      <script src="js/demo.js"></script>
</head>
<body>
    
   



</body>
</html>

得到

基础语法

区分大小写:与java一样,变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无

注释:单行注释://注释内容

多行注释:/*注释内容*/

大括号代表代码块

输出语句

使用window.alert()写入警告、window可省略

使用document.write()写入HTML输出

使用console.log()写入浏览器控制台

<script>
window.alert("HelloJavaScript");//浏览器弹出警告框
document.write("Hello JavaScript"); //写入HTML, 在浏览器展示
console.log("Hello JavaScript"); //写入浏览器控制台
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-基础语法</title>
   
</head>
<body>
    
</body>
<script>
/*  alert("JS"); */

//方式一:弹出警告框
window.alert("Hello JavaScript");

//方式二:写入html页面中
document.write("Hello JavaScript");

//方式三:控制台输出
console.log("Hello JavaScript"); 

</script>
</html>

方式一:

方式二:

方式三:

变量:Javascript中用var关键字(variable的缩写)来声明变量

Javascript是一门弱类型语言,变量可以存放不同类型的值

var a=20;
a="小明";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-基础语法</title>
   
</head>
<body>
    
</body>
<script>
//var定义变量
// var a =10;
// a="小明";

// alert(a);

//特点1:作用域比较大,全局变量
{
    var x=1;
}
alert(x);
//特点2:可以重复定义
{
    var x=1;
    var x="A";//覆盖原来的定义
}
alert(x);

</script>
</html>

let关键字定义变量,用法类似于var,但是所声明的变量,只在let关键字所在的代码块内有效,且不允许重复声明

const关键字,用来声明一个只读的常量,一旦声明,常量的值就不能改变

变量名需要遵守以下规则:

  • 组成字符可以是任何字母、数字、下划线_或美元符号$
  • 数字不能开头
  • 建议使用驼峰命名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-基础语法</title>
   
</head>
<body>
    
</body>
<script>
//var定义变量
// var a =10;
// a="小明";

// alert(a);

//特点1:作用域比较大,全局变量
//特点2:可以重复定义
/* {
    var x=1;
    var x="A";//覆盖原来的定义
}
alert(x); */

//let:局部变量、不能重复定义
/* {
    let x=1;
    alert(x);
} */
//alert(x);

//const:常量,不能改变
const pi=3.14;
//pi=3.15;
alert(pi);


</script>
</html>

数据类型

JavaScript中分为:原始类型和引用类型

原始数据

  • number:数字(整数、小数、NaN(Not a Number))
  • string:字符串,单双引皆可
  • boolean:布尔,ture false
  • null:对象为空
  • undefined:方声明的变量为初始化时,该变量的默认值是undefined

使用typeof运算符可以获取数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-数据类型</title>
   
</head>
<body>
    
</body>
<script>

//原始数据类型
alert (typeof 3);//number
alert(typeof 3.14) ;//number

alert (typeof "A");//string
alert (typeof 'Hello');//string

alert (typeof true);//boolean
alert (typeof false);//boolean

alert(typeof null);//object

var a
alert (typeof a)//undefined

</script>
</html>

运行得到

运算符

  • 算数运算符:+,-,*,/,%,++,--
  • 赋值运算符:=,+=,-=,*=,/=,%=
  • 比较运算符:>,<,>=,<=,!=,==,===
  • 逻辑运算符:&&,||,!
  • 三元运算符:条件表达式?true_value:false_value

==与===

==会进行类型转换,===不会进行类型转换

var a=10;
alert(a=="10");//true,进行类型转换,类型相同;且数值相同
alert(a==="10");//false,类型相等
alert(a===10);//true,类型和值相等

字符串类型转为数字:

将字符串字面值转为数字,如果字面不是数字,则转为NaN

// 类型转换 - 其他类型转为数字
alert (parseInt ("12"));//12
alert (parseInt ("12A45") ) ;//12,当遇到的不是数字就停止
alert (parseInt ("A45"));//NaN

其他类型转为boolean

  • Number:0和NaN为False,其他均转为true
  • String:空字符串为false,其他均转为true
  • Null和undefined:均转为false
if(0){
    alert("0 转换为false");
}
if (NaN) {
alert("NaN 转换为false");
}
if(-1){
alert("除0和NaN其他数字都转为 true");
}

if(""){
alert("空字符串为 false,其他都是true");
}

if("s"){
alert("空字符串为 false,其他都是true");
}

 

if(null) {
alert("null 转化为false");
}
if (undefined) {
alert("undefined 转化为false");
}

流程控制语句

  • if...else if...else
  • switch
  • for
  • while
  • do...while

函数

介绍:函数(方法)是被设计为执行特定任务的代码块

定义:JavaScript函数通过function关键字进行定义

注意:

  • 形式参数不需要类型,因为JavaScript是弱语言类型;
  • 返回值也不需要定义类型,可以在函数内部直接使用return返回即可

调用:函数名称(实际参数列表)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-函数</title>
</head>
<body>
    
</body>
<script>

    //定义函数

    //方式一
    // function add(a,b){
    //     return a+b;
    // }


     //方式二
    var sdd=function(a,b){
        return a+b;
    }

    // 函数调用
    var result=add(10,20);
    alert(result);

    // var result=add(10,20,30,40);
    // alert(result);
    //结果相同,JS中,函数调用可以传递任意个数的参数

</script>
</html>

对象

Array数组

定义

方式一:var 变量名=new Array(元素列表);

方式二:var 变量名=[元素列表];

var arr=new Array(1,2,3,4);//方式一
var arr=[1,2,3,4];//方式二

访问

arr[索引]=值;

arr[10]="hello";
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-函数</title>
</head>
<body>
    
</body>
<script>

 //定义数组
 //var arr=new Array(1,2,3,4);
//var arr=[1,2,3,4];

// console.log(arr[0]);
// console.log(arr[1]);

//特点:长度可变、类型可变
var arr=[1,2,3,4];
arr[10]=50;

console.log(arr[8]);
console.log(arr[9]);
console.log(arr[10]);

arr[9]="A";
arr[8]=true;

console.log(arr);

</script>
</html>

属性

  • length 设置或返回数组中元素的数量

方法

  • forEach() 遍历数组中的每个有值的元素,并调用一次传入的函数
  • push() 将新元素添加到数组的末尾,并返回新的长度
  • splice() 从数组中删除元素
var arr=[1,2,3,4];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

 var arr=[1,2,3,4];
 arr[10]=50;
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

console.log("-------------------------------");


//forEach:遍历数组中有值的元素
arr.forEach(function(e){
    console.log(e);
})

for循环遍历数组中所有元素,而forEach遍历有值的元素

//forEach:遍历数组中有值的元素
arr.forEach(function(e){
    console.log(e);
})
//ES6 箭头函数:(...)=>(...)   简化函数定义
arr.forEach((e)=>{
    console.log(e);
})
//push:添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);

//splice:删除元素
arr.splice(2,2);//删除索引位2开始,2个元素
console.log(arr);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-函数</title>
</head>
<body>
    
</body>
<script>

 //定义数组
 //var arr=new Array(1,2,3,4);
//var arr=[1,2,3,4];

// console.log(arr[0]);
// console.log(arr[1]);

//特点:长度可变、类型可变
// var arr=[1,2,3,4];
// arr[10]=50;

// console.log(arr[8]);
// console.log(arr[9]);
// console.log(arr[10]);

// arr[9]="A";
// arr[8]=true;

// console.log(arr);

 var arr=[1,2,3,4];
 arr[10]=50;
// for (let i = 0; i < arr.length; i++) {
//     console.log(arr[i]);
// }

// console.log("-------------------------------");


// //forEach:遍历数组中有值的元素
// arr.forEach(function(e){
//     console.log(e);
// })
// //ES6 箭头函数:(...)=>(...)   简化函数定义
// arr.forEach((e)=>{
//     console.log(e);
// })

//push:添加元素到数组末尾
// arr.push(7,8,9);
// console.log(arr);

//splice:删除元素
arr.splice(2,2);//删除索引位2开始,2个元素
console.log(arr);

</script>
</html>

String字符串

定义

方法一:var 变量名=new String("...");

方法二:var 变量名="...";

属性

  • length 字符串的长度

方法

  • charAt() 返回在指定位置的字符
  • indexOf() 检索字符串
  • trim() 去除字符串两边的空格
  • substring() 提取字符串中两个指定的索引之间的字符
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-对象</title>
    </head>
    <body>
        
    </body>
    <script>
    
    //创建字符串对象
    //var str=new String("hello string");
    var str=" hello string  ";
    
    console.log(str);
    
    //length
    console.log(str.length);
    
    //charAt
    console.log(str.charAt(4));
    
    //indexOf
    console.log(str.indexOf("lo"));
    
    //trim
    var s=str.trim();
    console.log(s);
    
    //substring(start,end)----------开始索引,结束索引(含头不含尾)
    console.log(s.substring(0,5));
    
    </script>
    </html>

JavaScript自定义对象

定义格式:

var 对象名={

属性名1:属性值1,

属性名2:属性值2,

函数名称:function(形参列表){}

};

var user ={
name:"Tom",
age:20,
gender:"male",
eat:function(){
alert("用膳");
}
};

调用格式

对象名.属性名;

console.log(user.name);

对象名.函数名();

user.eat();

JSON

JavaScript Object Notation ,JavaScript对象标记法

JSON是通过JavaScript对象标记法书写的文本,由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输

与自定义对象类似,但属性名用双引号

value 的数据类型

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true或 false)
  • 数组(在方括号中)
  • 对象(在花括号中)
  • null

定义

var 变量名='{"key1":value1,"key2":value2}';

var userStr='{"name":"jerry","age":18,"addr":["北京","上海","西安"]}';

JSON字符串转为JS对象

var jsObject =JSON.parse(useStr);

JS对象转为JSON字符串

var jsonStr=JSON.stringify(jsObject);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    
</body>
<script>

//自定义对象
// var user ={
// name:"Tom",
// age:20,
// gender:"male",
// // eat:function(){
// // alert("用膳");
// // }

// //也可简化写为以下形式
// eat(){
// alert("用膳");
// }

// };

// alert(user.name);
// user.eat();

//定义JSON
var jsonstr='{"name":"tom","age":18,"addr":["北京","上海","西安"]}';
alert(jsonstr.name);

//json字符串--js对象
var obj=JSON.parse(jsonstr);
alert(obj.name);

//js对象--json字符串
alert(JSON.stringify(obj));

</script>
</html>

BOM

概念:Browser Object Model 浏览器对象模型,允许JavaScript与浏览器的各个组成部分封装为对象

组成

  • Window:浏览器窗口对象
  • Navigator:浏览器对象
  • Screen:屏幕对象
  • History:历史浏览对象
  • Location:地址栏对象

Window

介绍:浏览器窗口对象。
获取:直接使用window,其中window.可以省略。 window.alert("Hello Window"); alert("Hello Window");
属性

  • history:对History对象的只读引用。
  • location:用于窗口或框架的Location对象。
  • navigator:对Navigator对象的只读引用。

方法

  • alert():显示带有一段消息和一个确认按钮的警告框。
  • confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
  • setlnterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
  • setTimeout():在指定的毫秒数后调用函数或计算表达式。

Location

介绍:地址栏对象

获取:使用window.Location获取,其中window.可省略

window.Location.属性

Location.属性

属性

  • href:设置或返回完整的URL
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    
</body>
<script>
// //获取
// window.alert("hello BOM");
// alert("hello BOM");

// //方法
// //confirm--对话框--确认:true 取消:false
// var flag=confirm("您确认删除该记录吗?");
// alert(flag);

// //定时器-setInterval--周期性的执行某一个函数
// var i=0;
// setInterval(function(){
//     i++
//     console.log("定时器执行了"+i+"次");
    
// },2000);//2秒

// //定时器-setTimeout--延迟指定时间执行一次
// setTimeout(function(){
//     alert("js");
// },3000);//3秒

//location
alert(location.href);

location.href="https://www.itcast.cn";
//更改域名,并跳转到更改后

</script>
</html>

DOM

概念:Document Object Model 文档对象模型

将标记语言的各个组成部分封装为对应的对象

  • Document:整个文档对象
  • Element:元素对象
  • Attribute:属性对象
  • Text:文本对象
  • Comment:注释对象

JavaScript通过DOM,就能够对HTML进行操作

  • 改变HTML元素的内容
  • 改变HTML元素的样式(CSS)
  • 对HTML DOM事件作出反应
  • 添加和删除HTML元素

演示案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <div style="font-size: 30px; text-align: center;" id="tbl">课程表</div>
    <table width="800px" border="1" cellspacing="0" align="center">
        <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>分数</th>
        <th>评语</th>
        </tr>
        <tr align="center" class="data">
        <td>001</td>
        <td>张三</td>
        <td>90</td>
        <td>很优秀</td>
        </tr>
        <tr align="center" class="data">
        <td>002</td>
        <td>李四</td>
        <td>92</td>
        <td>优秀</td>
        </tr>
        <tr align="center" class="data">
        <td>003</td>
        <td>王五</td>
        <td>83</td>
        <td>很努力,不错</td>
        </tr>
        <tr align="center" class="data">
        <td>004</td>
        <td>赵六</td>
            <td>98</td>
            <td>666</td>
            </tr>
            </table>
            <br>
            <div style="text-align: center;">
            <input id="bl" type="button" value="改变标题内容"onclick="fn1() ">
            <input id="b2"type="button"value="改变标题颜色"onclick="fn2()">
            <input id="b3" type="button"value="删除最后一个"onclick="fn3()">
        </div>  
</body>
<script>
    function fnl(){
document.getElementById('tb1').innerHTML="学员成绩表";
    }

function fn2(){
document.getElementById('tbl').style="font-size: 30px; text-align: center; color: red;"
}

function fn3(){
var trs = document.getElementsByClassName ('data') ;
trs[trs.length-1].remove () ;
}

</script>

</html>

DOM是W3C(万维网联盟)的标准,定义了访问HTML和XMLT
1. Core DOM-所有文档类型的标准模型

  • Document:整个文档对象
  • Element:元素对象
  • Attribute:属性对象
  • Text:文本对象
  • Comment:注释对象

2. XML DOM-XML文档的标准模型
3. HTML DOM-HTML文档的标准模型

  • Image: <img>
  • Button : <input type='button'>

HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。Document对象中提供了以下获取Element元素对象的函数:
1. 根据id属性值获取,返回单个Element对象

var h1 = document.getElementById('h1');

2. 根据标签名称获取,返回Element对象数组

var divs = document.getElementsByTagName('div');

3. 根据name属性值获取,返回Element对象数组

var hobbys = document.getElementsByName('hobby');

4.根据class属性值获取,返回Element对象数组

var clss = document.getElementsByClassName('cls');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <img id="h1" src="./图像/1.jpg"> <br><br> 

    <div class="cls">教育</div> <br>
    <div class="cls">程序员</div> <br> 

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
   
    
</body>
<script>
    // //1.获取Element元素
    // //1.1 获取元素-根据ID获取
    // var img=document.getElementById('h1');
    // alert(img);

    // //1.2 获取元素-根据标签获取
    // var divs=document.getElementsByTagName('div');
    // for (let i = 0; i < divs.length; i++) {
    //    alert(divs[i]);
        
    // }

    // //1.3 获取元素-根据name属性获取
    // var ins=document.getElementsByName('hobby');
    // for (let i = 0; i < ins.length; i++) {
    //    alert(ins[i]);
        
    // }
    // //1.4 获取元素-根据class属性获取
    // var dis =document.getElementsByClassName('cls');
    // for (let i = 0; i < dis.length; i++) {
    //    alert(dis[i]);
        
    // }


    //2.查询参考手册,属性,方法
    var dis =document.getElementsByClassName('cls');
    var div1=dis[0];

    div1.innerHTML="666";

</script>

</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <img id="h1" src="./图像/1.jpg" width="20%"> <br><br> 

    <div class="cls">教育</div> <br>
    <div class="cls">程序员</div> <br> 

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
   
    
</body>

</html>

生成:

根据以下要求,更改

1.改变图片
2.将所有div标签的内容后面加上:very good(红色字体)
3.使所有的复选框呈现选中状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <img id="h1" src="./图像/1.jpg" width="20%"> <br><br> 

    <div class="cls">教育</div> <br>
    <div class="cls">程序员</div> <br> 

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
   
    
</body>
<script>
 //1.改变图片:src属性值   获取元素对象-查文档改变属性
 var img=document.getElementById('h1');
 img.src="./图像/2.jpg"

 //2.将所有div标签的内容后面加上:very good(红色字体)--<font color='red'></font>
 var divs=document.getElementsByTagName('div');
 for (let i = 0; i < divs.length; i++) {
    const div = divs[i];
    div.innerHTML+="<font color='red'>very good</font>";
    
 }
 //3.使所有的复选框呈现选中状态
 var ins=document.getElementsByName('hobby');
 for (let i = 0; i < ins.length; i++) {
    const check= ins[i];
    check.checked=true;
    
 }

</script>

</html>

得到

事件监听

事件:HTML事件是发生在HTML元素上的“事情”。

比如

  • 按钮被点击
  • 鼠标移动到元素上
  • 按下键盘按键

事件监听:JavaScript可以在事件被侦测到时 执行代码。

事件绑定

方式一:通过HTML标签中的事件属性进行绑定

方式二:通过DOM元素属性进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件</title>
</head>
<body>
    <!-- 方式一:通过HTML标签中的事件属性进行绑定 -->
   <input type="button" id="btn1" value="事件绑定1" onclick="on()">
   <!-- 方式二:通过DOM元素属性进行绑定 -->
   <input type="button" id="btn2" value="事件绑定2">
    
</body>
<script>
 function on(){
    alert("按钮1被点击了");
 }
 document.getElementById('btn2').onclick=function(){
    alert("按钮2被点击了");
 }
</script>

</html>

常见事件

  • onclick 鼠标单击事件
  • onblyr 元素失去焦点
  • onfocus 元素获得焦点
  • onload 某个页面或图像被完成加载
  • onsubmit 当表单提交时触发该事件
  • onkeydown 某个键盘的键被按下
  • onmouseover 鼠标被移到某元素之上
  • onmouseout 鼠标从某元素移开
     
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件</title>
</head>
<body>
   <body onl oad="load()">
      <form action="" style="text-align: center;" onsubmit="subfn()">
      <input type="text"name="username" onblur="bfn()" onfocus="ffn()"onkeydown="kfn() ">

      <input id="bl" type="submit" value="提交">

      <input id="b1" type="button" value="单击事件"onclick="fnl()">
      </form>

      <br><br><br>

      <table width="800px" border="1" cellspacing="0" align="center" onm ouseover=over onm ouseout="out()">
         <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>分数</th>
      <th>评语</th>
      </tr>
      <tr align="center">
      <td>001</td>
      <td>张三</td>
      <td>90</td>
      <td>很优秀</td>
      </tr>
      <tr align="center">
      <td>002</td>
      <td>李四</td> 
      <td>92</td>
      <td>很优秀</td>
      </tr>
      </table>
      
</body>
<script>
   //onload:页面、元素加载完成后触发
   function load(){
      console.log("页面加载完成");
      
   }

   //onclick:鼠标点击事件
   function fn1() {
      console.log("被点击了");
      
   }

   //onblur:失去焦点事件
   function bfn(){
      console.log("失去焦点");
      
   }

   //onfocus:元素获得焦点
   function ffn(){
      console.log("获得焦点");
      
   }

   //onkeydown:某个键盘的键被按下
   function kfn(){
      console.log("键盘被按下了");
      
   }

   //onmouseover:鼠标移动到元素之上
   function over(){
      console.log("鼠标移入了");
      
   }

   //onmouseout:鼠标移出元素
   function out(){
      console.log("鼠标移出了");
      
   }

   //onsubmit:提交表单事件
   function subfn(){
      alert("表单被提交了");
      
   }
 
</script>

</html>

标签:Web,arr,console,log,--,JavaScript,alert,对象,var
From: https://blog.csdn.net/2301_77946674/article/details/140905222

相关文章

  • navicat-mysql重置密码
    目录navicat-mysql重置密码1.Mysql8.0以下2.navicatformysql出现如下问题1.问题描述2.查看用户信息3.问题原因4.解决问题navicat-mysql重置密码1.Mysql8.0以下搜索命令提示符,以管理员身份进入。输入scquerymysql找到Mysql服务名称,然后输入netsotpmysql80(这个是sc......
  • 科大讯飞p30 5G版和p30对比 评测
    存储容量不同:科大讯飞p305G版为6+128GB,支持TF卡拓展至1TB;p30则配备6GB+256GB,基础存储更大。后置摄像头不同:科大讯飞p305G版和p30前摄都为800万像素,p305G版的后置摄像头为1300万像素,高于p30256GB版的500万像素,拍摄清晰度更高。扬声器和麦克风不同:科大讯飞AI学习机p30配备2......
  • 基于 ubuntu base 构建 rootfs
    下载ubuntu-base基础包https://mirrors.ustc.edu.cn/ubuntu-cdimage/ubuntu-base/releases/20.04.5/release/解压到目标镜像分区tarzxpfxxx.tar.gzcpaptsource.list到etc/apt/source.listechohostname>/etc/hostnameechonameserverip>......
  • 科大讯飞P30、小度K16、优学派U59区别 2024最具性价比学习机推荐
    科大讯飞AI学习机P30是一款为小学到高中学生设计的全能型学习平板。它配备了6GB的运行内存和256GB的存储空间,能够轻松运行各种学习应用和存储大量学习资料。11英寸的大屏幕采用护眼设计,能够有效减少蓝光辐射,保护学生视力。P30覆盖了从小学到高中的全科目课程,配合科大讯飞的AI技术,......
  • 科大讯飞学习机c10s和p30怎么选
    科大讯飞学习机P30和C10两者区别主要在硬件配置方面;软件的核心功能差别不大,都搭载了星火大模型、精准学、及1对1英语口语陪练等。硬件上:1、科大讯飞学习机P30屏幕更大些,是10.95英寸屏幕(近11英寸大小),科大讯飞学习机C10是10.1英寸2、科大讯飞学习机P30定配的是二代作答笔(白色),科大......
  • vim常用命令
    命令模式命令效果$移动光标到行尾^移动光标到行首第一个非空白字符0移动光标到行首yy复制一行内容(命令前加数字表示从当前行开始复制几行)p粘贴内容(命令前加数字表示在当前行的下一行粘贴几次)dd删除一行内容(命令前加数字表示从当前行开始删除......
  • 分享一个大佬写的界面跳转
    这是Prism框架开发者写的一个demo,我觉得有趣,就发出来让大家看看<StackPanel><StackPanelOrientation="Horizontal"><Buttonx:Name="AnimationButton"Click="AnimationButton_Click"Content="Animation"Background=&qu......
  • 链表part02
    今天是8月3日,学习了链表的第二部分。交换链表两个节点,考察对next的操作和tmp的灵活运用。删除链表的倒数第N个节点,双指针减少遍历次数。链表相交,移动链表尾对齐,其实就是动长链表的指针。环形链表,记住方法。4.24交换链表两个节点题目:给你一个链表,两两交换其中相邻的节点,并......
  • Qt-pyqt6与QTDesginers的相互使用技巧
    1.先在QTDesignersTools设计器中画好框架,再保存为.ui文件导出2.再pycharm中创建一个main.py文件用来加载和使用这个.ui文件,通用的代码如下:main.pyfromPyQt6.QtGuiimportQIntValidator,QIconfromPyQt6.QtWidgetsimportQApplication,QLabel,QListWidgetItemfrom......
  • Go中使用Zap日志库与Lumberjack日志切割
    Go中使用Zap日志库与Lumberjack日志切割Go中使用Zap日志库与Lumberjack日志切割原创 何泽丰 ProgrammerHe  2024年06月11日20:15 广东 听全文Go中使用Zap日志库与Lumberjack日志切割概述在项目中使用日志记录有助于快速定位和修复问题,能帮助我们监控系统健康状......