网站超级外链,wordpress 第三方支付,简易app,wordpress电子商城JavaScript学习 数组学习数组定义数组使用和遍历 js函数快速入门函数定义方式方式1: function关键字定义函数方式2: 将函数赋给变量 js函数注意事项和细节js函数练习 js自定义对象方式1: Object形式方式2: {}形式 事件基本介绍事件分类onload加载完成事件onclick单击事件onblur… JavaScript学习 数组学习数组定义数组使用和遍历 js函数快速入门函数定义方式方式1: function关键字定义函数方式2: 将函数赋给变量 js函数注意事项和细节js函数练习 js自定义对象方式1: Object形式方式2: {}形式 事件基本介绍事件分类onload加载完成事件onclick单击事件onblur失去焦点事件onchange内容发生改变事件onsubmit表单提交事件表单作业 ⬅️ 上一篇: JavaWeb系列三: JavaScript学习 上 欢迎来到 JavaWeb系列三: JavaScript学习 下
在本篇文章中我们将继续深入学习 JavaScript探索更多高级特性和实用功能。通过进一步学习 JavaScript您可以更加灵活地实现网页的动态效果和交互功能。 本篇需要用到的项目: javascript-demo项目 数组学习
数组定义
1.应用实例, 创建array_define.html, 演示js数组定义使用的4种方式.
!DOCTYPE html
html langen
headmeta charsetUTF-8title数组定义/titlescript typetext/javascript//数组定义的第一种方式var car [奔驰, 100, 奥迪, true, 宝马, 300.24];console.log(car, car);console.log(car[0], car[0]);//表示访问car数组的第一个元素, 0代表索引, 索引从0开始//数组定义的第二种方式var car [];//空数组(但是在java中要指定大小)//添加元素car[0] 奔驰;car[1] 宝马;car[2] 奥迪;console.log(car, car);console.log(car[1], car[1]);console.log(car[2], car[2]);console.log(car[10], car[10]);//访问第11个元素, 如果该元素不存在, 返回undefined//数组定义的第三种方式var car new Array(奔驰, 宝马, 比亚迪);console.log(car, car);//数组定义的第四种方式var car new Array();console.log(typeof car);//objectcar[0] 奔驰;car[1] 宝马;console.log(car, car);car[1] 比亚迪;//相当于数组替换car[2] 奥迪;//相当于数组扩容car[7] 红旗;//扩容, 如果跳过了中间的下标索引, 进行扩容, 那么中间未定义的值为undefinedconsole.log(car[3], car[3]);//undefinedconsole.log(car, car);//car Array(8) [ 奔驰, 比亚迪, 奥迪, 4 empty slots, 红旗 ]/script
/head
body/body
/html数组使用和遍历
1.应用实例 创建traversal-array.html, 演示js的数组遍历
!DOCTYPE html
html langen
headmeta charsetUTF-8title数组遍历(traversal)和使用/titlescript typetext/javascriptvar car [奔驰, 60000.00, 宝马, true, 奥迪, null];//数组遍历console.log(数组car的长度, car.length);//6for (var i 0; i car.length; i) {console.log(car[ i ] car[i]);//log()方法会自动换行}/script
/head
body/body
/htmljs函数快速入门
一句话: 函数是由事件驱动的, 或者当它被调用时, 执行的可重复使用的代码块.
需求: 演示js函数的基本使用
应用案例 创建 simple_function.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs函数入门/titlescript typetext/javascript//定义一个简单的函数//如果不去调用函数, 那么该函数是不会被执行的//在js中如果要执行函数, 有两种方式, 1.主动调用hi(); 2.事件触发function hi() {console.log(hello, 你好);}hi();/script
/head
body
!--这里表示给这个button绑定了一个onclick事件当用户点击了该button, 就会触发hi()函数
--
button onclickhi()点击这里, 触发函数/button
/body
/html函数定义方式
方式1: function关键字定义函数
1.基本语法 function 函数名(形参列表) { 函数体 return 表达式 } //调用 函数名(参数列表);
2.应用实例 创建 1.function-use.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs函数定义方式一/titlescript typetext/javascript//1.定义没有返回值的函数function f1() {console.log(f2() 被调用...)}f1();//2.定义有形参的函数//这里的形参不需要指定类型, name的数据类型是由实参决定的function f2(name) {console.log(typeof name);//number, object, null, stringconsole.log(f2() 被调用..., name);}f2();//3.定义有形参和返回值的函数, 不需要指定返回类型, 返回类型由返回的数据决定//js函数的调用机制和java一样function f3(n1, n2) {return n1 n2;}console.log(f3(10, 20)结果, f3(10, 20));/script
/head
body/body
/html方式2: 将函数赋给变量
1.基本语法 var 函数名 function(形参列表) { 函数体 return 表达式 } //调用 函数名(实参列表);
2.应用实例 2.function-use.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs函数使用方式二/titlescript typetext/javascriptvar f1 function () {console.log(f1函数被调用...);}console.log(typeof f1);//functionf1();//调用函数var f2 f1;f2();var f3 function (name) {console.log(f3(name), name)}f3(赵志伟);var f4 function (n1, n2) {return n1 n2;}console.log(f4(1, 2)结果, f4(1, 2));/script
/head
body/body
/htmljs函数注意事项和细节
1.js中, 函数的重载会覆盖掉上一次的定义.
2.函数的arguments隐形参数(作用于在function函数内).
(1)隐形参数: 在function函数中不需要定义, 可以直接来获取所有参数的变量.
(2)js中的隐形参数特别像java的可变参数一样, 操作类似数组.
3.应用实例 创建function-detail.html
!DOCTYPE html
html langen
headmeta charsetUTF-8title函数使用注意事项和细节/titlescript typetext/javascript//1.js中函数的重载会覆盖掉上一次的定义//解读//(1)js中函数的重载会覆盖掉上一次的定义//(2)当你调用f1()时, 其实调用的是f1(name)这个方法//(3)调用f1(name)时, 如果你没有传入实参, 那么这个name就是undefinedfunction f1() {console.log(f1())}function f1(name) {console.log(f1(name), name)}f1();//2.函数的arguments隐形参数(作用域在function函数内)//(1)隐形参数: 在function函数中不需要定义, 可以直接用来获取所有参数的变量.function f2() {//(2)遍历: 函数的arguments 隐形参数//(3)注意 arguments 是数组//(4)提示: 如果我们希望通过console.log输出对象的数组, 使用逗号连接, 而不是console.log(arguments);//可以console.log(arguments, arguments);//可以console.log(arguments arguments);//这里不能使用连接//(5)可以把arguments参数当作数组来使用for (var i 0; i arguments.length; i) {console.log(arguments[i]);}}f2(1, 2.5, me);//3.小细节//(1)如果我们的函数有形参, 在传入实参的时候, 仍然按照顺序匹配//(2)如果匹配上, 就赋给它, 如果没有匹配上, 也无所谓//(3)最后仍然会把所有的实参, 赋给 arguments//(4)如果形参个数大于了实参个数, 则该形参的值为 undefinedfunction f3(n) {console.log(n, n);//100console.log(arguments, arguments);//arguments Arguments { 0: 100, 1: 200, 2: 300, … }}f3(100, 200, 300);/script
/head
body/body
/htmljs函数练习
1.需求: 编写一个函数, 用于计算所有参数相加的和并返回, 如果实参不是number, 就过滤掉.
2.提示: 使用typeof(变量)来判断参数类型
3.应用实例 创建function-exercise.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs函数练习/titlescript typetext/javascriptfunction getSum() {var sum 0;//变量初始化for (var i 0; i arguments.length; i) {console.log(arguments[i], arguments[i], typeof (arguments[i]));}for (var i 0; i arguments.length; i) {if (typeof (arguments[i]) number) {sum arguments[i];}}return sum;}var sum getSum(房子, 10000, 车子, 30000, 电脑, 5000);console.log(sum, sum);/script
/head
body/body
/htmljs自定义对象 方式1: Object形式 1.对象的定义 var 对象名 new Object();//对象实例(空对象) 对象名.属性名 值;//定义一个属性 对象名.函数名 function() {}//定义一个函数 2.对象访问 对象名.属性 对象名.函数名() 3.应用实例 创建1.object_difine.html !DOCTYPE html
html langen
headmeta charsetUTF-8title自定义对象方式一/titlescript typetext/javascript//自定义对象方式一//person是一个空对象, 没有自定义的函数和属性var person new Object();//built-inconsole.log(person类型, typeof person);//object//增加一个属性person.name 赵志伟;//增加一个属性ageperson.age 23;//增加一个函数person.hi function () {//这里的this就是当前的personconsole.log(person信息 , this.name, this.age);};//访问属性console.log(person.name, person.name);//访问方法person.hi();//小细节: 如果没有定义某个属性, 直接使用, 就会出现, 变量提升(专业术语), 显示undefinedconsole.log(person.address, person.address);//undefined//方法不能提升console.log(person.say, person.say());/script
/head
body/body
/html方式2: {}形式 1.对象的定义 var 对象名 { 属性名: 值,//定义属性 属性名: 值,//定义属性 注意有,号 函数名: function() {}//定义函数 } 2.对象访问 对象名属性 对象名.函数名() 3.应用实例 创建2.function_define.html !DOCTYPE html
html langen
headmeta charsetUTF-8title自定义对象方法二/titlescript typetext/javascript//演示自定义对象方法二var person {name: 赵志伟,//多个属性之间用,隔开age: 23,hi: function () {console.log(person信息, this.name, this.age);},sum: function (n1, n2) {return n1 n2;}};//使用console.log(person, person);console.log(person.name, person.name , person.age, person.age);person.hi();console.log(person.sum(10,20), person.sum(10, 20));/script
/head
body/body
/html事件 基本介绍 1.事件是电脑输入设备与页面进行交互的响应. 2.事件通常与函数配合使用, 这样就可以通过发生的事件来驱动函数执行. 3.js事件文档地址: https://www.w3school.com.cn/js/js_events.asp 4.事件一览表 事件分类 1.事件的注册(绑定) 事件注册(绑定),当事件响应(触发)后要浏览器执行哪些操作代码,叫做事件注册或事件绑定; 2.静态注册事件 通过html标签的事件属性直接赋予事件响应后的代码,这种方式叫做静态注册; 3.动态注册事件(dom) 通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 function () {} 这种形式叫做动态注册 4.动态注册事件步骤 (1)获取标签对象dom对象; (2dom对象.事件名 function() {} onload加载完成事件 1.onload: 某个页面或图像被完成加载. 2.应用实例 创建 onload.html !DOCTYPE html
html langen
headmeta charsetUTF-8title加载完成事件/titlescript typetext/javascript//定义一个函数function hi() {console.log(静态注册 通过onload事件);}//1.在js中, 将页面窗口映射成window的dom对象//2.window对象有很多函数和属性, 以供程序员使用//3.window.onload 表示页面被加载完毕//4.后面的 function() {} 表示页面加载完毕后要执行的函数/代码window.onload function () {console.log(动态注册 onload事件);};/script
/head
!--静态注册--
!--body οnlοadhi()--
body
页面加载
/body
/htmlonclick单击事件 1.onclick: 鼠标点击某个对象 2.应用实例 创建onclick.html !DOCTYPE html
html langen
headmeta charsetUTF-8titleonclick 单击事件/titlescript typetext/javascriptfunction hi() {console.log(点击了hi()按钮);}//当页面加载完毕后, 我们再进行动态绑定//基本概念和机制一定要清楚window.onload function () {//动态注册 onclick事件//1.得到 idbtn01 的button标签对应的dom对象//2.通过dom对象动态地绑定onclick事件//3.通过document的getElementById()获取对应的dom对象var btn01 document.getElementById(btn01);btn01.onclick function () {console.log(点击了btn01按钮);}}/script
/head
body
!--静态注册 onclick事件--
button onclickhi()hi()按钮-静态注册/buttonbr/
button idbtn01hi()按钮-动态注册/button
/body
/htmlonblur失去焦点事件 1.onblur: 元素失去焦点 2.应用实例 创建onblur.html !DOCTYPE html
html langen
headmeta charsetUTF-8titleonblur 失去焦点事件/titlescript typetext/javascript//动态注册(绑定)//onload 加载完成事件 window表示当前窗口的dom对象//表示当前窗口加载完成后window.onload function () {var btn01 document.getElementById(btn01);btn01.onblur function () {this.value this.value.toUpperCase()}}function hi() {var btn02 document.getElementById(btn02);btn02.value btn02.value.toUpperCase();}/script
/head
body
输入英文单词(动态注册):
input typetext idbtn01/br/
输入英文单词(静态注册):
input typetext idbtn02 onblurhi()
/body
/htmlonchange内容发生改变事件 1.onchange: 域的内容被改变 2.应用实例 创建onchange.html !DOCTYPE html
html langen
headmeta charsetUTF-8title内容发生改变事件/titlescript typetext/javascriptfunction salLevel() {console.log(工资变化了);}window.onload function () {var mySports document.getElementById(mySports);mySports.onchange function () {console.log(你喜欢的运动变了);}}/script
/head
body
你当前的工资水平(静态注册):
select onchangesalLevel()option selected--工资范围--/optionoptionunder 10k/optionoption10k to 30k/optionoptionupper 30k/option
/selectbr/
你当前擅长的运动(动态注册):
select idmySportsoption selected--运动类型--/optionoption篮球/optionoption足球/optionoption乒乓球/option
/select
/body
/htmlonsubmit表单提交事件 1.需求: 注册按钮被点击, 提交表单. 如果用户名或密码为空, 不能提交表单. 2.应用实例 创建onsubmit.html !DOCTYPE html
html langen
headmeta charsetUTF-8titleonsubmit 表单提交事件/titlescript typetext/javascriptfunction register() {var username document.getElementById(username);var password document.getElementById(password);if (username.value || password.value ) {alert(用户名或密码为空, 不能提交表单(静态注册).);return false;}}//等页面window加载完成, 调用function函数window.onload function () {var registerForm document.getElementById(registerForm);registerForm.onsubmit function () {var address document.getElementById(address);var email document.getElementById(email);if (address.value || email.value ) {alert(地址或邮件为空, 不能提交表单(动态注册).);return false;}}}/script
/head
body
h1用户(静态)注册/h1
form actiononblur.html onsubmitreturn register()username:input typetext nameusername idusername/br/br/password:input typepassword namepassword idpassword/br/br/input typesubmit value静态注册
/form
h1用户(动态)注册/h1
form actiononblur.html idregisterFormaddress:input typetext nameaddress idaddress/br/br/email:input typetext nameemail idemail/br/br/input typesubmit value动态注册
/form
/body
/html表单作业 1.obsubmit: 注册按钮被点击, 提交表单, 要求如下 2.应用实例 创建 onsubmit-作业.html !DOCTYPE html
html langen
headmeta charsetUTF-8title表单作业/titlescript typetext/javascriptwindow.onload function () {var registerForm document.getElementById(registerForm);registerForm.onsubmit function () {var username document.getElementById(username);var password document.getElementById(password);var confirm document.getElementById(confirm);var email document.getElementById(email);var usernameReg /^\w{4,6}$/;if (!usernameReg.test(username.value)) {alert(用户名长度不对, 请重新输入);return false;}var passwordReg /^\w{6}$/;if (!passwordReg.test(password.value)) {alert(密码长度不对, 请重新输入);return false;}if (password.value ! confirm.value) {alert(两次密码不一致, 请重新输入);return false;}var emailReg /^\w\w\.\w$/;if (!emailReg.test(email.value)) {alert(邮件格式不对, 请重新输入);return false;}}}/script
/head
body
h1用户(动态)注册/h1
form actiononblur.html idregisterForm用户名:input typetext nameusername idusername/长度(4-6)br/密码:input typepassword namepassword idpassword/长度(6)br/确认:input typepassword nameconfirm idconfirm/长度(6)br/邮件:input typetext nameemail idemail/满足基本格式br/input typesubmit value动态注册/
/form
/body
/html
