江苏住房建设厅网站,福州网站制作系统,泸州大浪科技做网站,wordpress小程序美化目录
一、JavaScript和html代码的结合方式 二、javascript和java的区别
1、变量 2、运算
3、数组#xff08;重点#xff09;
4、函数
5、重载 6、隐形参数arguments
7、js中的自定义对象 三、js中的事件
四、DOM模型 五、正则表达式 一、JavaScript和html代码的结合方…目录
一、JavaScript和html代码的结合方式 二、javascript和java的区别
1、变量 2、运算
3、数组重点
4、函数
5、重载 6、隐形参数arguments
7、js中的自定义对象 三、js中的事件
四、DOM模型 五、正则表达式 一、JavaScript和html代码的结合方式
1、第一种 在head标签或body标签中使用script标签来书写JavaScript代码 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript//alert是JavaScript语言提供的一个警告框函数//它可以接收任意类型的参数这个参数就是警告框的提示信息alert(hello javascript!);/script
/head
body/body
/html
效果如下 2、第二种 使用script标签引入单独的JavaScript代码文件 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--1、现在需要使用script引入外部的js文件来执行src属性专门用来引入js文件路径可以是相对路径也可以是绝对路径2、script标签可以用来定义js代码也可以用来引入js文件但是两个功能只能二选一不能同时用--script typetext/javascript src1.js/script
/head
body/body
/html 效果如下 二、javascript和java的区别
1、变量 javascript是弱变量赋的值是什么类型变量就是什么类型java是强变量只有一个类型身份 变量的类型javascript和java的变量的区别如何定义javascript的变量
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptvar i;i12;alert(typeof(i));//返回变量的数据类型numberiabc;alert(typeof(i));//string/script
/head
body/body
/html
效果如下 2、运算
1关系运算
javascript “”等于做简单的字面值的比较全等于做字面值的比较并比较数据类型 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptvar a12;var b12;alert(ab);//truealert(ab);//false/script
/head
body/body
/html
结果如下 2逻辑运算 1在javascript中所有的变量都可以作为一个boolean类型的变量去使用 0, null, undefined, 空串都认为是false 2 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptvar aabc;var btrue;var cnull;var dfalse;alert(ab);//truealert(ad);//falsealert(ac);//nullalert(d||c);//nullalert(a||d);//abcalert(a||c);//abc/script
/head
body/body
/html
3、数组重点
在javascript中数组会自动扩容不存在数组溢出现象
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptvar arr[true,1];arr[2]abc;alert(arr.length);//3/script
/head
body/body
/html
4、函数
1第一种定义方式使用function关键字 function 函数名形参列表{ 函数体 } !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptfunction fun(){alert(无参函数fun()被调用了)}function fun2(a,b){alert(有参函数fun2()被调用aabb);}//定义带有返回值的函数function sum(num1,num2){var resultnum1num2;return result;}alert(sum(100,50));//150/script
/head
body/body
/html 2第二种定义方式 var 函数名function形参列表{ 函数体 } !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptvar funfunction(){alert(无参函数);}var fun2function(a,b){alert(有参函数aa,bb);}var fun3function(num1,num2){return num1num2;}alert(fun3(100,200));//300/script
/head
body/body
/html
5、重载
在java中函数允许重载但在js中函数的重载会直接覆盖掉上一次的定义
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptfunction fun(){alert(无参函数fun());}function fun(a,b){alert(有参函数fun(a,b));}fun();/script
/head
body/body
/html
效果如下 6、隐形参数arguments !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptfunction fun(){alert(arguments.length);//查看参数个数for(var i0;iarguments.length;i){alert(arguments[i]);}alert(无参函数fun())}fun(1,ad,true);//需求要求编写一个函数用于计算所有参数相加的和并返回function sum(){var result0;for(var i0;iarguments.length;i){if(typeof(arguments[i]number)){resultarguments[i];}}return result;}alert(sum(1,2,3,4,5,6,7,8,9));//45alert(sum(1,2,3,4,abc,6,7,8,9));//10abc6789/script
/head
body/body
/html
7、js中的自定义对象
1Object形式的自定义对象 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptvar objnew Object();//对象实例obj.name华仔;//定义属性obj.age18;obj.funfunction(){//定义函数alert(姓名this.name年龄this.age);}obj.fun();/script
/head
body/body
/html
效果如下 2{}花括号形式的自定义对象 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptvar obj{name:安欣,age:18,fun:function(){alert(姓名this.name年龄this.age);}}alert(obj.name);obj.fun();/script
/head
body/body
/html 三、js中的事件
1、定义事件是电脑输入设备与页面进行交互的响应
2、 3、 事件注册绑定 1定义告知浏览器当事件响应后要执行哪些操作代码叫事件注册或事件绑定 2分类 1静态注册事件通过html标签的事件属性直接赋于事件响应后的代码 2动态注册事件先通过js代码得到标签的dom对象然后再通过 dom对象.事件名function(){} 这种形式赋于事件响应后的代码 1onload事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript//onload事件的方法function onloadFun(){alert(静态注册onload事件);}//onload事件动态注册是固定写法window.onloadfunction(){alert(动态注册的onload事件);}/script
/head
body/body
/html 效果如下 2 onclick事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptfunction onclickFun(){alert(静态注册onclick事件)}//动态注册onclick事件/*document是javascript语言提供的一个对象文档get 获取Element 元素就是标签By 通过Id id属性getElementById 通过id属性获取标签对象*/window.onloadfunction(){var btnObjdocument.getElementById(btn01);alert(btnObj);btnObj.onclickfunction(){alert(动态注册的onclick事件);}}/script
/head
bodybutton onclickonclickFun();按钮1/buttonbutton idbtn01按钮2/button
/body
/html 效果如下 3onblur事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript//静态注册失去焦点事件function onblurFun(){//console是控制台对象是由javascript语言提供专门用来向浏览器的控制器打印输出用于测试使用//log()是打印的方法console.log(静态注册失去焦点事件);}//动态注册onblur事件window.onloadfunction(){var passwordObjdocument.getElementById(password);passwordObj.onblurfunction(){console.log(动态注册失去焦点事件);}}/script
/head
body用户名input typetext onbluronblurFun();br/密码input typetextbr/
/body
/html
4onchange内容发生改变事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptfunction onchangeFun(){alert(男神已改变);}window.onloadfunction(){//1、获取标签对象var selObjdocument.getElementById(sel01);//2、通过标签对象.事件名function(){}selObj.onchangefunction(){alert(神剧已改变);}}/script
/head
body请选择你心中的男神!--静态注册onchange事件--select onchangeonchangeFun();option--男神--/optionoption安欣/optionoption高启强/option/select请选择你心中的白月光电视剧!--动态注册onchange事件--select idsel01option--神剧--/optionoption恶魔少爷别吻我/optionoption重启/optionoption狂飙/option/select
/body
/html 效果如下
5onsubmit事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptfunction onsubmitFun(){//要验证所有表单项是否合法有一个不合法的就阻止表单提交alert(静态注册表单提交事件---发现不合法);return false;}window.onloadfunction(){//1、获取标签对象var formObjdocument.getElementById(form01)//2、通过标签对象.事件名function(){}formObj.onsubmitfunction(){alert(动态注册表单提交事件---发现不合法);return false; }}/script
/head
body!--return false可以阻止表单提交--form actionhttp://localhost:8080 methodget onsubmitreturn onsubmitFun()input typesubmit value静态注册//formform actionhttp://localhost:8080 idform01input typesubmit value动态注册//form
/body
/html
四、DOM模型
即把文档中的标签、属性、文本转换成为对象来管理
1、Document的内存结构 2、Document对象的理解 3、Document对象的方法 因为查询范围越小越好干活少所以优先级不同 1 document.getElementById();
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript/** 需求当用户点击了较验按钮要获取输出框中的内容然后验证其是否合法* 验证的规则必须由字母、数字、下划线组成并且长度是5-12位* */function onclickFun(){//当我们要操作一个标签时一定要先获取这个标签对象var usernameObjdocument.getElementById(username);//alert(usernameObj);//[object HTMLInputElement]它就是dom对象var usernameTextusernameObj.value;//如何验证字符串符合某个规则需要使用正则表达式var patt/^\w{5,12}$/;/** test()方法用于测试某个字符串是不是匹配我的规则* 匹配就返回true不匹配就返回false* */var usernameSpanObjdocument.getElementById(usernameSpan);//innerHTML表示起始标签和结束标签中的内容//innerHTML这个属性可读、可写//usernameSpanObj.innerHTML高启强真帅;if(patt.test(usernameText)){usernameSpanObj.innerHTML用户名合法;}else{usernameSpanObj.innerHTML用户名不合法;}}/script
/head
body用户名input typetext idusername valuegqq/span idusernameSpan stylecolor:red;/spanbutton onclickonclickFun()较验/button
/body
/html
效果如下 2document.getElementsByName();
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript//全选function checkALl(){//document.getElementsByName(); 是根据指定的name属性查询返回多个标签对象集合//这个集合的操作跟数组一样//集合中每个元素都是dom对象//这个集合中的元素顺序是他们在html页面中从上到下的顺序var hobbies document.getElementsByName(hobby);//checked表示复选框的选中状态选中是true反之是false此属性可读、可写for(var i0;ihobbies.length;i){hobbies[i].checkedtrue;}}//全不选function checkNo(){var hobbies document.getElementsByName(hobby);for(var i0;ihobbies.length;i){hobbies[i].checkedfalse;}}//反选function checkReverse(){var hobbies document.getElementsByName(hobby);for(var i0;ihobbies.length;i){if(hobbies[i].checked){hobbies[i].checkedfalse;}else{hobbies[i].checkedtrue;}}}/script
/head
body兴趣爱好input typecheckbox namehobby valuecppCinput typecheckbox namehobby valuejavaJavainput typecheckbox namehobby valuejsJavaScriptbr/button onclickcheckALl()全选/buttonbutton onclickcheckNo()全不选/buttonbutton onclickcheckReverse()反选/button
/body
/html
效果如下 3document.getElementsByTagName();
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript//全选function checkALl(){//此方法大致跟document.getElementsByName()相似var inputs document.getElementsByTagName(input);for(var i0;iinputs.length;i){inputs[i].checkedtrue;}}//全不选function checkNo(){var inputs document.getElementsByName(hobby);for(var i0;iinputs.length;i){inputs[i].checkedfalse;}}//反选function checkReverse(){var inputs document.getElementsByName(hobby);for(var i0;iinputs.length;i){if(inputs[i].checked){inputs[i].checkedfalse;}else{inputs[i].checkedtrue;}}}/script
/head
body
兴趣爱好
input typecheckbox valuecppC
input typecheckbox valuejavaJava
input typecheckbox valuejsJavaScript
br/
button onclickcheckALl()全选/button
button onclickcheckNo()全不选/button
button onclickcheckReverse()反选/button
/body
/html 4、节点的常用属性和方法
*节点就是标签对象
1属性 2方法 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascriptwindow.onloadfunction() {//因为下面要用 document.body.appendChild()但html是从上到下读语句的所以读到这时body为空会报错只能先加载出页面用window.onloadfunction(){}包住再读标签//需要使用js代码来创建html标签并显示在页面上//标签内容div高启强真帅/divvar divObj document.createElement(div);divObj.innerHTML 高启强真帅;//还在内存中document.body.appendChild(divObj);//添加子元素}/script
/head
body/body
/html 效果如下 五、正则表达式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript//表示要求字符串中是否包含字母e//第一种写法//var pattnew RegExp(e);//第二种写法常用var patt/e/;var strabcd;alert(patt.test(str));/script
/head
body/body
/html
w3school里有详细的资料
