# Web js by 陳老師 ## Using ID - onclick -> get ID ```htmlmixed= <!DOCTYPE html> <html> <head> </head> <body> <p id="demo" ></p> <script> document.getElementById("demo").innerHTML="meow"; </script> </body> </html> ``` getElementById() -> get id "string" put in to ID ### CSS+JS Function ```javascript= <!DOCTYPE html> <html> <head> </head> <P id ="StyleChange">JavaScript can change the style of an HTML element</P> <body style="background-color: pink;"> <p id="demo" ></p> <script> document.getElementById("demo").innerHTML="meow"; function StyleChange(){ document.getElementById("StyleChange").style.fontSize = "25px"; document.getElementById("StyleChange").style.color = "white"; document.getElementById("StyleChange").style.background = "pink"; } </script> <button type="button" onclick="StyleChange()">ChagneStyle</button> </body> </html> ``` - Point : ID using way ### to change attributes ```javascript= ocument.getElementById("image").src = "picture.gif"; ``` --- - example ```htmlmixed= <!DOCTYPE html> <html> <head> <style> img{ width: 200px; height: 200px; } </style> </head> <P id ="StyleChange">Before we lean how to use js to hack, we must to know how to use js to develop. </P> <body style="background-color: pink;"> <p id="demo" ></p> <script> document.getElementById("demo").innerHTML="meow"; function StyleChange(){ document.getElementById("StyleChange").style.fontSize = "25px"; document.getElementById("StyleChange").style.color = "white"; document.getElementById("StyleChange").style.background = "pink"; } function Picture(img){ var img; if(img == 0){ ImgSrc="妹子1.jpg"; } else{ ImgSrc="妹子2.jpg"; } document.getElementById("girl").src=ImgSrc; } </script> <button type="button" onclick="StyleChange()">ChagneStyle</button> <img id="girl" scr="妹子1.jpg"> <button type="button" onclick="Picture(0)">small</button> <button type="button" onclick="Picture(1)">big</button> </body> </html> ``` ## Include js ```htmlmixed= <script src="<path>"></script> ``` ## Objects ```javascript= var fruit ={name:"apple", price:"500"} // if u want to call element // fruit.name (print apple) ``` ## Template literal - Using time - connect string with variable - new lines and want to keep form ```javascript= document.getElementById("assessment").innerHTML=` Age: ${girl.age1} </br> HairStyle: ${girl.hairStyle1} </br> attracive index: ${girl.powerIndex1}` ``` ` string ` variable -> ${} ## Array Attrubute ## typeof <variable> return datatype ```javascript= array=[] typeof array ``` ### Array.join("<charator>") ```javascript= const array=[1,2,3] array[10]=9 array.join(",") // it would connect by charator ,also you could try "+" ```