编程入门java基础和项目04小有成就

是JaaScit应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中Web页面进行某些类型的交互时，就发生了。可能是用户在某些内容上的点击、鼠标经过某个特定元素或下键盘上的某些按键。还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。通过使用JavaScript，你可以特定的发生，并规定让某些发生以对这些做出 ；处理：扣分罚款 当我们用户在页面中进行的点击动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为名称，即：clck、msemve、lad等都是名称，对应具体的执行代码处理，响应某个的函数。1123456789<!--onload<body<scripttype="text/javascript">functionloadWindow(){}JavaScript可以处理的类型为：鼠标、键盘、HTMLWindow属性:针对window对象触发的（应用 Form:由HTML表单内的动作触发的（应用到几乎所有HTML元素，但最常用在form元中Keyboard:键Mouse:由鼠标或类似用户动作触发 :由媒介（比 、图像和音频）触发 （适用于所有HTML元素，但常见于媒

<audio>、<embed> 、

以 <!DOCTYPE3<metacharset="utf-8"<styledivwidth:height:background:margin-top: <body<buttontype="button"onclick="clickFunc();">点击</button><br/> 用户名：<inputid="user_id"type="text"onblur="blurFunc();"onfocus="focusFunc();"onkeydown="keydownFunc();"onkeyup="keyupFunc();"/><span<br <select <divonclick="clickFunc();"onmouseover="moverFunc();"<scriptfunctionloadFunc() //onloadwindow.onload=function() //onclickfunctionclickFunc() //onblurfunctionblurFunc() .geementById('user_span').innerTML='用户名不能为空 //onkeydownfunctionkeydownFunc()//m是if(77==event.keyCode)//onfocusfunctionfocusFunc() ementById('user_span').innerTML='用户名为4~10} ementById('user_span').innerTML='不 ，息无效}}//onkeyupfunctionkeyupFunc(){if(77==event.keyCode)ementById('user_id').value}}//onchangefunctionchangeFunc()TML=' }//onmouseover：鼠标移动到某个元素上functionmoverFunc(){ ementById('user_span').innerTML='鼠标已移动至}//onmouseout：鼠标从某个元素上离开functionmoutFunc(){ ementById('user_span').innerTML=}就是用户或浏览器自身执行的某种动作。例如clck、lad和mever都是的名字，而响应某个的函数就叫做处理程序（或侦）。处理程序的名字以n”开头，因此k的处理程序就是onclick，为指定处理程序的方式有好几种某个元素支持的每种，都可以用一个与相应处理程序同名的HTL特性来指定。这个特的值应该是能够执行的JaaScit代码： <inputtype="button"value="Pressme"onclick="alert('thanks');"这样做有一些缺点，例如耦合度过高，还可能存在时差问题（载到，此时处理函数是单独写的一段s代码），而且在不同的浏览器上可能会有不同的效果。通过JaaSci指定处理程序的传统方式，就是将一个函数赋值给一个处理程序属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的，每个元素都有自己的处理程序属性，这些属性通常全都小写，例如oclick，然后将这种属性的值设为一个函数，就可以指定处理程序了。例如：1123456789<!DOCTYPE<metacharset="UTF-<styletype="text/css">div{width:300px;height:200px;background:gray;margin-top:100px;}<buttonid="myBtn">按钮<span<divid="dv">我是一个<scriptvarbtnbtn.onclick=function(){alert('youclickabutton');}//onclickfunctionclickFunc()}//onmouseoverfunctionmoverFunc()TML='鼠标已移动至}//onmouseoutfunctionmoutFunc() ementById('user_span').innerTML=}DOMvardvdv.onclick=clickFunc;dv.onmouseout=moutFunc;11234btn.onclick=null;dv.onclick=null;dv.onmouseout=DOM：ObjectModel文档对象模要实现页面的动态交互效果，BOM操作远远不够，需要操作html才是。如何操作html，就是DOM。简单的说，DOM提供了用程序动态控制html接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM处于javascript的地位上。每个载入浏览器的HTML文档都会成 对象使我们可以从中HTML页面中的所有元素进行 对象是Window对象的一部分，可通过HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构<a>、<div、o<!----1123456789<!DOCTYPE<metacharset="utf-8"<!--点击 跳<a--当HTML文档在被解析为一颗DO树以后，里面的每一个节点都可以看做是一个一个的对象，我们成为DO创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合使用，就能让我们的页面在特定时机、特定的下执行特定的变换。注意：操作dom必须等节点初始化完毕后，才能执行。处理方式两种把script调用移到html末尾即可使用onload来处理JS，等待html加载完毕再加载onload里的JS1123456789window.onload=function()//<!DOCTYPE<metacharset="UTF-<!--注意script块的位置<scripttype="text/javascript">window.onload=function()vardvdv.innerTML="我是一个}<div根据名获取==dom对象数组根据样式名获取==dom对象数组<!DOCTYPE<metacharset="UTF-<!--根据idclass获取元素<pid="p1"class="ptext">这是一个段落<span>文本<pid="p2"class="ptext">这又是一个段落</p><!--根据name名称获取元素--<inputtype="checkbox"name="hobby"value="游泳"/><inputtype="checkbox"name="hobby"value="篮球"/><inputtype="text"value="我是一个输入框"/><!--href="javascript:void(0);"伪协议，表示不执行跳转，而执行指定的--<ahref="javascript:void(0);"onclick="testById();">根据id获取元素<ahref="javascript:void(0);"onclick="testByName();">根据name获取元素<ahref="javascript:void(0);"onclick="testByTagName();">根名称获取元<a<ahref="javascript:void(0);"onclick="testByClass();">根据class<script//根据idfunctiontestById()varp console.log(p.innerTML);//表示获取元素开始和结束之间的html结 console.log(p.innerText);//表示获取之间的普通文 //根据namefunctiontestByName()//varhobby=.ge//for(vari=0;i<hobby.length;i++) //根据名称获取元functiontestByTagName()//varinputArr=.ge // for(vari=0;i<inputArr.length;i++) //判断是否是text if("text"==inputArr[i].type) //判断是否是checkbox }elseif("checkbox"==inputArr[i].type) // if(inputArr[i].checked) //根据classfunctiontestByClass()//varptext=.geconsole.log(ptext[0].innerptext[0].innerTML+="，这是一段新的文本 说明 下几种方式创建新节点。1123456789<!DOCTYPE<metacharset="utf-8"<buttononclick="addP();">添加段落<div<scriptfunctionaddP()式//根据id获取元素varcontainer//创建pvarp//vartxt//p//div元素添加p元素////向pp.innerTML="以后的你会感谢现在努力的你//将p节点追加到container//将字符串类型的 varstr="<p>以后的你会感谢现在努力的你3</p>";container.innerTML=str;}1123456789<!DOCTYPE<metacharset="utf-8"<buttononclick="addImg();"><div<script//functionaddImg()//创建imgvarimg//式//设置img元素的srcimg.src="htimg.style.width='500px';////setAttribute()//设置img元素的srcimg.setAttribute('src',img.setAttribute("style","width:500px;height://获取divvarcontainer //将img元素节点追加到div////将字符串类型的 container.innerTML= /img/bd_logo1.png' 1123456789<!DOCTYPE<metacharset="utf-8"<buttononclick="addTxt();">添加文本框<div<script//functionaddTxt()//创建inputvartxt//式txt.type="text";txt.value="添加成功";//txt.type=//txt.value=//txt.setAttribute('type',,//获取divvarcontainer //将input节点追加到div////将字符串类型的 container.innerTML="<inputtype='password'}<!DOCTYPE3<metacharset="utf-8"8<buttononclick="addOptions()">添加选项<select<optionvalue="0">---请选择---<optionvalue="1">南山南<optionvalue="2">喜欢你<script//functionaddOptions()//第//varoption option.value=option.text="需要人陪//varsel ////varoption option.value=option.text="光年之外//varsel // // // varsel // sel.innerTML+="<optionvalue='5'>风的季节 方法|<!DOCTYPE3<metacharset="utf-8"8<buttontype="button"id="btn">测试按钮</button><div<input<input<inputid="inp"<scriptvardv= //childNodesfunctionget_childNodes()console.log(dv.childNodes[1]);//获取到 //firstChildfunctionget_firstChild() //lastChildfunctionget_lastChild() previousSiblingfunctionget_previousSibling()varinp }//nextSiblingfunctionget_nextSibling()varinp}//parentNodefunctionget_parentNode()varinp}varbtnbtn.onclick=get_childNodes;//DOM方法|123456789<!DOCTYPE<metacharset="utf-8"<div<spanid="cxy">程序猿<ahref="javascript:void(0)"onclick="delNode();">删除<scriptfunctiondelNode()//vardvvarcxy ////varcxy}方法|设置或者返回元素的1123456789<!DOCTYPE<metacharset="utf-8"<buttontype="button"id="btn">测试按钮</button><br<inputtype="text"value="加油，胜利就在眼前"id="txt"class="test"<br：<inputtype="radio"checked="true" "value="1"><inputtype="radio" "value="0"><br <imgsrc="img/timg.jpg"id="sxtimg"title="sxt"/><scriptvartxt=.gevar=.geementsByName("varsxtimg=.geementById("sxtimg");//functiongetValue()// //functiongetAttr()varid=varvalue=varclazz= //functiongetChecked()console.log(.checked);//指定选项是否被选 // functionsetAttr() sxtimg.style.disy='none';//隐 txt.setAttribute("value","success");// txt.setAttribute("aaa","000000");// console.log(txt.getAttribute("aaa"));// //functiondelAttr() varbtn=.gebtn.onclick= QQ空间表单验证，利用JavaScript实现模拟QQ<!DOCTYPE<metacharset="utf-8"<!--设置网页的图标<linkrel="shortcuticon"type="image/x-icon"href="img/2.ico"<!--引入外部css文件<linkrel="stylesheet"href="css/qqzone.css" 1.设置背景大小位2.左上角的.网页的 <!--q_logostart--<div<imgsrc="img/logo.png"<!--q_logoend--><!--q_bottomstart--<div<div<liclass="ul_li_<span <li<span <li <span <li <span <span <li <spanclass="span_other">其他 <div <ahref="htt target="_blank">反馈建议</a>| <a /" </a> <a /"target="_blank"></a> <a /"target="_blank"></a> <ahref="http:/ 馆</a>| <a /"target="_blank">QQ互联</a> <ahref="htt target="_blank">QQ登录</a>| <ahref="htt target="_blank">社交组件</a>| </a> intGuidelines</a> <p>Copyright©2005-2018Tencent.<a target="_blank">AllRights <p>腾讯公司 </a><ahref=" <div ;<ahref="ht <!--q_loginstart--<div<div <div <span>推荐使用<ahref="#"style="color:#3481cf;"> <divclass="q_login_tip"id="q_login_tip"style="dis <imgid="tip_img"src="img/!.bmp"/><spanid="tips_span"style="color:#ff3b30;"></span> <div<inputid="qq_inp"value="/邮箱号登录"/><br/><inputid="pwd_inp""<div<!--点击按钮触发点击事情调用指定函数<buttontype="button"onclick="form_submit()">登 <div<p><a target="_blank">target="_blank">;| ;| ;<a <!--q_loginend--<!--编写javascript部分的代码<scripttype="text/javascript"1123456789/*采用什么编码解析文件@charset"utf-backgroundbackground-sizebackground-positionfont-sizebackground-size:1366px909px;background-position:0px-135px;font-size:}/*q_logostart*q_logo.q_logoposition:absolute;top:95px;left:}/*q_logoend/*q_bottomstart.q_bottom.q_bottom_iconposition:left:bottom: *color*list-style*widthheight*text-align*position*cursor**transitioncss鼠标上移的样式0.3.q_bottom.q_bottom_iconullicolor:list-style:width:height:text-align:position:cursor: transition:all *.q_bottom.q_bottom_iconulli:hovertransform:translate(0px,- *设置指定span**设置宽度为.q_bottom.q_bottom_iconullispanposition: y:width: *设 background:background-position:-60px-top:left: .span_top:left:- *设置ipad.ul_li_ipadbackground:background-position:-60px-top:-left: .span_ipadtop:left:- *设置android.ul_li_androidbackground:background-position:-90px-top:left: .span_androidtop:left:- *设置windowsphone.ul_li_windowsphonebackground:background-position:-90px-top:-left: .span_windowstop:left:- .span_wphonetop:left:- *设置其他的图标和文.ul_li_otherbackground:background-position:-90px-top:-left: .span_othertop:left:- /*设置所有p元素的字体为白色pcolor: /*设置所有a元素的字体为白色取消下划线样式acolor:text-decoration: /*鼠标上移添加下划线样式a:hovertext-decoration: *.q_bottom.q_bottom_texttext-align:position:line-height:bottom:left: .q_bottom.q_bottom_showposition:bottom:right: /*q_bottomend*//*q_loginstart**background*border*border-radius*position.q_loginwidth:height:background:border:2pxsolidborder-radius:position:right:top: *text-align*font-size*color*padding-top内间距从顶部开始移动.q_login.q_login_titletext-align:font-size:color:padding-top: *font-size*color*text-align*padding-top内间距从顶部开始移动.q_login.q_login_entryfont-size:color:text-align:padding-top: *设置input.q_login.q_login_inputposition:top:left: *widthheight*margin-top*padding-left*border边框1px*border-radius*color*font-family*font-size.q_login.q_login_inputinputwidth:height:margin-top:padding-left:border:1pxsolidborder-radius:color:font-family:font-size: /*修改登录按钮的位置.q_login.q_login_buttonposition:bottom:left:}**text-align*border边框实线*color*font-size*cursor.q_login.q_login_buttonbuttonwidth:height:text-align:border:1pxsolidbackground:color:font-size:cursor: /*设置底部按钮找回信息的位置.q_login.q_login_bottomposition:bottom:-right: /*设置找回的字体颜色和样式.q_login.q_login_bottomp,.q_login.q_login_bottoma color: /*设置提示文字信息的位置.q_login.q_login_tipposition:top:left: /*设置提示文字!的位置#tip_imgposition:top:-left:- /*q_loginend11234//页面加载完成执行的函数生成随机数切换bodywindow.onload=function()varnum=Math.round(Math.random()*ementById("body").style="background:url(img/bg"+num".jpg);" "background-size:1366px909px;"+"background-position:0px- 7 * 1.不能为空( 长度>=5且<=11( 1.不能