1.HTML/CSS/JavaScript 先睹为快 2.HTML 3.CSS 4.JavaScript

Download 1.HTML/CSS/JavaScript 先睹为快 2.HTML 3.CSS 4.JavaScript

Post on 01-Jan-2016

27 views

Category:

Documents

10 download

DESCRIPTION

. 1.HTML/CSS/JavaScript 2.HTML 3.CSS 4.JavaScript. 1.1 HTML . css JavaScript html css JavaScript html css JavaScript html - PowerPoint PPT Presentation

TRANSCRIPT

1.HTML/CSS/JavaScript2.HTML3.CSS4.JavaScript1.1 HTML cssJavaScripthtml cssJavaScripthtmlcssJavaScripthtml HTMLhtmlhtm1.2 CSS csshtml h2{ font-size:50} p{font-size:20;font-style:italic} csshtmlcsshtml 1.3 JavaScript cssJavaScripthtml h2{ font-size:50} p{font-size:20;font-style:italic} alert("JavaScript"); cssJavaScripthtmlcssJavaScripthtml 1.4 HTMLCSSJavaScriptHTMLHTML.CSSHTMLJavaScriptInternetHTMLHTMLCSSJavaScript.css.js2 HTML1:HTML2:3:list4:table5:form6:frame7:div2.1.1 HTMLHTMLHyper Text Markup Language HTMLHTMLHTML*.htm*.htmlHTML:Netscape Navigator ,Microsoft IE,Mazilla FireFox2.1.2 HTML.htm .htmlHTMLHTML FrontpageDreamweaver,2.1.3 HTML my first page This is my first homepage! 2.1.3 HTML ()HTMLHTMLmy first homepage < title> 2.1.3 HTML -head(title) 1: HTML 2.1.3 HTML -head(meta)2: 2.1.3 HTML -(head)meta3 my first page 2.1.3 HTML -bodyHTMLHTML1)bgcolorbgcolorHTMLbgcolor="#CCFFCC"2)backgroundbackgroundHTMLgif,jpgbackground=images/bg.gif"3)texttextHTMLtext=#FF6666text2.1.3 HTML -body2.2 HTML 1.2. 3.4.5.6.HTML6.7.8.2.2.1 HTML HTML HTML HTML HTML HTML HTML 2.2.2 1. ... #=RRGGBB 16 2. ... #=3. ... #=1, 2, 3, 4, 5, 6, 72.2.3.(paragraph) HTML2.2.4 2.2.5 #=left, right 2.2.6 HTMLHTML HTML 2.2.7 href,hrefURL () (Target Window) 2.2.7 http://www.sina.com/sports/index.htmlhttp://127.0.0.1:8080/digitalhome/a.jpg2.2.8 srcsrcURLsrcsrcURLwidthheight% #=left,right,top,middle,bottom2.2.8 HTML GIFGraphics Interchange Format (.GIF) 256JPEGJoint Photographic Experts Group (.JPG) 256PNGPortable Network Graphics gifjpeg48bit2.2.8 map2.2.9 ... (1) direction=##=left, right,up,down(2) behavior=# #=scroll(), slide(), alternate()(3): loop=# #=(infinite) (4): scrollamount=#(5): scrolldelay=#2.3.1 : sportsfood drink friends typetypetypedisc()circle square2.3.2 : sports drink friendstypetype1AaIiABC51start2.4.1 ..2.4.1 2.4.2 width%height%borderbgcolorbackgroundURLalign(left,center,right)2.4.3 valign top middle bottom; baseline;alignleft,center,rightcolspanrowspan2.4.4 1valign top middle bottom baseline2align(left,center,right)3height%2.4.5 2.4.5 HTML 2.4.6 1000550240150027651240 30002430250012509003400 2.5.1 formHTMLHTMLHTMLCGIASP2.5.2 textpasswordradiocheckboxselecttextareasubmitreset2.5.2 2.5.2 2.5.2 2.5.2 2.5.2 2.5.3 1.: ... actionASPJSP()methodgetpost GETPOST,2.5.3 2.: ? ** *** ?? 3.2.5.3 3.: // 4.: // name5.: 2.5.3 6.:7.:submit 8. 2.5.3 9.: ... 10. 2.5.3 2.6.1 2.6.1 2.6.2 framesetframeframe HTML 2.6.2 framset rowscolsrowscolsrowscols2.6.2 frame srcURLframebordernamenoresizescrollingyes, no, auto2.6.2 frameleft.html: , target=_self target=name target=_blank target=_parent2.7.1 HTMLword2.7.2 2.7.3 // .. //3.1 CSSCSSCascading Style Sheets().,cssCSS HTMLCSSCSS,,,. CSShtml.css3.1 CSSCSS1HTML234CSS12HTML33.2 CSScssTRP p{font-style:italic; font-weight:bold; color:limegreen} .water { color:blue }RuleSelector {property:value;property: value; ... }3.3 1()1.1 HTML--HTML1.2 HTMLCLASS1.3 IDHTMLID2()3.3 1.1HTMLh1, h2, h3, h4, h5, h6 { color: green } P{font-style:italic; font-weight:bold; color:red} HTMLHTML3.3 1.2.water { color:blue; text-align:right}p.danger { color:red; text-align:center} CSS3.3 1.3IDID#control {color:red}3.3 HTMLHTMLCSS HTMLIDIDIDIDclass IDJavaScriptid(div)3.3 2a{color:red;font-size:20}table a{color:green;font-size:25}table a:hover{color:blue}3.3 2 BODY{color:blue;background:lavender;font-family:Arial;} UL {color:red } ul a{color:green; font-size:15} 3.4 HTML1Style2Style3Link3.4 HTML1StyleSTYLESTYLE H1{color:maroon;} P{color:hotpink; font-family:Arial;}3.4 HTML2StylestyleHTMLstylestyleCSS3.4 HTML3Link3.5 3.5 JavaScriptJavaScriptJavaScriptJavaScriptJavaScript4.1.1 JavaScriptHTML,JavaScript4.1.1 JavaScriptHTML,JavaScript!1HMTLJavaScript test.js document.write("JavaScript")4.1.1 JavaScriptfunction checkPw() {fm = document.form1;if (fm.pw2.value != fm.pw1.value) { alert(""); document.form1.pw2.select();}else alert(""+fm.name.value);}4.1.1 JavaScriptdocument.bgColor="green";document.fgColor="white"function mOver(object,msg){ status = msg; object.color = "red"; object.face = ""; }function mOut(object){ status = ''; object.color = "blue"; object.face = ""; }Javapro4.1.2 JavaScriptJavaScriptNetscapeNavigator JavaScript(object-based)(Event Driven)HTMLJava JavaWebWeb,HTMLHTMLJavaHTML 4.1.3 JavaScript 1 ASCIICC++Javaweb4.1.3 JavaScript 2 4.1.3 JavaScript 3 Java, Java var a,b,c; a=123; b=abc; a=b; 4.1.3 JavaScript 4 JavaScript5JavaScriptJavaScript JavaScriptJavaScript 4.1.3 JavaScript 6JavaScriptWeb(Event)4.1.3 JavaScript JavaScriptJavaScriptJavaScript JavaScriptJavaScriptWebJavaScriptJavaScript WebJavaScript----Web4.1.4 JavaScriptWeb4.1.5 JScript :Microsoft Netscape JavaScriptJavaScriptJScript ECMAscript:JavaScriptJavaScriptVBScriptMicrosoftVBJavaScriptIEVBScript JavaScriptJavaScriptJavaScriptwebJavaScriptJavaScriptJavaScript4.1.6 JavaScript JavaJavaSUNInternet JavaOakJavaScriptNetscapeNetscape NavigatorWebLive Script4.1.6 JavaScript JavaJavaScriptObject BasedEvent DriverJavaJava 4.1.6 JavaScript JavaJavaScriptJavaJavaScriptJavaScriptWebJava4.1.6 JavaScript JavaJava: int x=1234; String s=abcd;JavaScriptvar var a,b,c; a=123; b=abc; a=b;4.1.6 JavaScript JavaJavaHTMLHTMLHTMLJava...JavaScriptHTMLHTMLHTMLJavaScript...4.1.7 JavaScriptHTMLJavaScriptJavaScript 4.1.7 JavaScriptHTML JavaScriptJavaScriptHTMLJavaScriptHTMLHTMLsrcJavaScript4.1.8 JavaScript1 JavaScriptJavaScript2 JavaScriptJavaScript4.2.1 853.14159260,1JavaScriptJavaScript truefalsenull""0undefined4.2.1 null000nullundefinedJavaScriptundefinedJavaScript4.2.2 JavaScriptJavaScript1JavaScript var up,down,left,right; // x=3;24.2.2 2.6.4.1 2.6.4.2 2.6.4.3 2.6.4.4 undefined var x; //undefined alert(i) ; // d=123; //4.2.3 1 2 3.1415926-3.1E121e122E-123 4.2.3 4 truefalse5 33 apple=["fruit","China","vitamin"] God=["Belial",,"Angel] 4.2.4 4.2.4 var x = 11; var y = 5;with (document) { write("x = 11, y = 5"); write("x + y ", x + y); write("x - y ", x - y); write("x * y ", x * y); write("x / y ", x / y); write("x % y ", x % y); write("++ x ", ++ x); write("-- y ", -- y);}4.2.4 var x = 5; //x 5var y = '5'; //y 5var z = 6; //x 6with (document) { write("x = 5, y = '5', z = 6"); write("x == y ", x == y); write("x === y ", x === y); write("x != y ", x != y); write("x !== y ", x !== y); write("x 4.2.4 var t = true;var f = false;with(document) {write("true && true ", t && t);write("true && false ", t && f);write("false && true ", f && t);write("false && false ", f && f);write("true && (1==1) ", t && (1==1));write("false && 'A' ", f && 'A');write("'A' && false ", 'A' && f);write("true && 'A' ", t && 'A');write("'A' && true ", 'A' && t);write("'A' && 'B' ", 'A' && 'B');}4.2.5 ifSwitch whiledo-whileforbreakcontinue4.2.6 functionJavaScriptfunction (1,2){return [];}JavaScriptarguments .LengthJavaScript(function)4.2.6 functionfunction checkPassword(testObject) {if (testObject.value.length < 4) { alert(""); testObject.focus(); testObject.select();}}4.2.6 functionfunction check(){if(document.forms[0].elements[0].value.length4.2.6 functioneval()parseInt()parseFloat()JavaScriptNaNNaNNot a NumberJavaScriptisNaN()true 4.2.6 functionwith (document) { write("eval('12.34*10') ", eval("12.34*10")); write("eval('12*(3+4)') ", eval("12*(3+4)")); write(" eval('12.34abc1.2')", eval("12.34abc1.2")); write(" "); write("parseInt('0x11') ", parseInt("0x11")); write("parseInt('1234') ",parseInt("1234")); write("parseInt('12abc') ", parseInt("12abc")); write("parseInt('12.34*10') ", parseInt("12.34*10")); write("parseInt('abc123') ", parseInt("abc123")); write(" "); write("parseFloat('12.34*1.2')", parseFloat("12.34*1.2")); write("parseFloat('12.34e10')", parseFloat("12.34e10")); write("parseFloat('12abc')", parseFloat("12abc")); write("parseFloat('2.1e4abc') ", parseFloat("2.1e4abc")); write("parseFloat('xyz123')", parseFloat("xyz"));}4.2.6 functionfunction add(){var sc1=document.fm.chj1.value; var sc2=document.fm.chj2.value;if(sc1=="") sc1=0; if(sc2=="") sc2=0;if(isNaN(sc1)) sc1=0; if(isNaN(sc2)) sc2=0;document.fm.chj3.value=parseInt(sc1)+parseInt(sc2);}4.3.1 JavaScriptonClickonDbClickonMouseOveronMouseOutonMouseDownonMouseUponKeyDownonKeyUponKeyPress, onKeyDown,onKeyPress4.3.1 JavaScriptHTMLonLoadonUnload onChangeonSelect onFocusonBluronSubmitonReset4.3.2 onloadonunloadfunction loadform(){alert(".....");}function unloadform(){confirm("");}4.3.3 onchangeonselect onchangeonselect4.3.4 onBluronFocusonFous,, onFousonBlur,,onBlur4.3.5 function check(){var nameDiv = document.getElementById("nameerror");var pwdDiv = document.getElementById("pwderror");var name=document.register.name.value;var pwd=document.register.pwd.value;if(name!="lkl")nameDiv.innerHTML = "";else if (pwd != "lkl"){nameDiv.innerHTML = "";pwdDiv.innerHTML = "";}else{ document.register.action="http://www.softedu.org"; document.register.submit();}}4.3.5 4.4.1 JavaScript(window) (navigator) (document)(location)URL(history) :JavaScriptDateStringMath4.4.2 DOMDOMDOMJavaScriptNetScapeDOMIEDOM4.4.3 windowwindowDOMwindowwindowstatus selfopener closedhistory navigatordocument location4.4.3 windowopen()close()alert()OKconfirm()OKCancelprompt()prompt4.4.3 windowfirst.htmlwindow.open("second.html","sec","height=150");document.write(window.closed);4.4.3 windowsecond.htmlfunction changeColor(color){window.opener.document.bgColor=color;}xy4.4.4 document(document)fgColorbgColorurlwrite() writeln() document.getElementById()document.getElementsByName()document.getElementsByTagName()4.4.4 document document.write(");var test=window.prompt(":");document.write(test+"JavaScript"); :window.prompt(", ); :document.write() document.writeln() window.alert()4.4.5 formJavaScript ...............1: document.fm1 document.fm2 document.fm3 2:forms[] forms[] 0 document.forms[0] document.forms[1] document.forms[2]4.4.5 formformnametargetactionmethodgetpostformsubmit( ) reset( ) 4.4.5 form function submits(){ document.firstForm.action="show.html"; document.firstForm.submit();}4.4.5 formelements[]myformpwdtextdocument.myform.elements[3].value document.myform.pwd.value4.4.5 formfunction checkPw() {fm = document.form1;if (fm.pw2.value != fm.pw1.value) { alert(""); }else alert(""+fm.name.value);}4.4.6 locationnavigator(navigator) (location)URLdocument.write(":"+location.hostname);document.write(":"+location.port);document.write("+:"+location.host);document.write("URL:"+location.href);document.write("");document.write(":"+navigator.appName);document.write(":"+navigator.appVersion);document.write(":"+navigator.platform);document.write("java:"+navigator.javaEnabled());4.4.7 for...in for in { ..}4.4.7 arr1=new Array("java","html/css/JavaScript","jsp/servlet","struts/hibernate/spring");//arr1=["java","html/css/JavaScript","jsp/servlet","struts/hibernate/spring"];for(i=0;i4.4.7 with with object{ ...} withobject4.4.7 var x = 5; //x 5var y = '5'; //y 5var z = 6; //x 6with (document) { write("x = 5, y = '5', z = 6"); write("x == y ", x == y); write("x === y ", x === y); write("x != y ", x != y); write("x !== y ", x !== y); write("x 4.4.7 thisthisJavaScriptJavaScriptthis4.4.7