1 . 需要的工具 ?
您可以下載 Notepad++ 來編寫。
2 . Html vs JavaScript vs jQuery 關係?
一) JavaScript 最主要讓您的網頁更活，不會死板板的
二) 通常一個JavaScript Function 會對應一個 Html 的原件
三) JQuery 是以 JavaScript 為基底
四) JQuery 可以看成工具包 ( 效果、事件...等 ) 都已經寫在裡面
三) Script可放在html任何位置內， 但Head 和 body 不要間斷，都是可以使用的。
但一般常用於Head 或 Body 內
3 . 如何開始 ?
一) 開啟 Notepad++
二) 將以下的程式碼貼在編輯區域內
三) 儲存檔案的副檔名為 : XXX.html
四) 點擊生成的檔案即可觀看成果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>熱身</title>
</head>
<body>
<p id="p1">大家好</p>
<script type="text/javascript">
document.write("hello");
document.getElementById("p1").style.color="red";
</script>
</body>
</html>
<script type="text/javascript"> document.write("hello"); </script> | hello |
<p id="p1">大家好</p> <script type="text/javascript"> document.getElement("p1").style.color="red"; </script> | 大家好 |
| script.js document.write("hello"); Main.html <script src="script.js"> </script> | hello |
| <script type="text/javascript"> var a = "hello"; document.write(a); </script> | hello |
| <script type="text/javascript"> function aaa(){ var a = "hello"; document.write(a); } </script> | |
| <script type="text/javascript"> function aaa(){ var a = "hello"; alert(a); } </script> | 跳出提醒視窗( hello ) |
| <script type="text/javascript"> function aaa(){ var a = confirm("你是帥哥嗎?"); if(a == true){ document.write("真的 !!!"); } else{ document.write("要有自信!!!"); } } </script> <input name="button" type="button" onClick="rec()" value="請點我" /> | 點擊後會觸發aaa對話視窗 會有Yes、No選項 |
| <script type="text/javascript"> function rec(){ var score = prompt("請輸入您的成績 :",60) ; if(score>=90) { document.write("棒!"); } else if(score>=75) { document.write("不錯!"); } else if(score>=60) { document.write("要加油!"); } else { document.write("要努力了!"); } } </script> <input name="button" type="button" onClick="rec()" value="點擊我!" /> | 輸入參數視窗( 60 是預設參數 ) |
| <script type="text/javascript"> function openWindow(){ window.open('http://www.yahoo.com.tw'); } </script> | 開啟新的頁面 |
| <script type="text/javascript"> window.open('http://www.yahoo.com.tw','_blank', 'width=500,height=500,menubar=no,toolbar=no, status=no,scrollbars=yes') </script> 空格一 : URL 空格二 : 開啟視窗的型態 _top : 當前頁面 _blank : 新視窗 _selft : 在同頁面開啟新視窗 空格三 : toolbar(Yes | No) : 工具列是否顯示 scrollbars(Yes | No) : 是否使用滾動卷軸 resizeable(Yes | No ) : 使用者是否可以調整視窗 location(Yes | No ) : 是否顯示網址 menubar(Yes | No) : 是否顯示目錄 status(Yes | No ) : 是否顯示狀態列 left(pixels) : 距離左邊距離 top(pixels) : 距離上方距離 | 開啟新的頁面 附帶條件 |
| <script type="text/javascript"> var mywin=window.open("http://www.yahoo.com.tw"); mywin.close(); </script> | 關閉視窗 |
| document.getElementById("id"); <p id="s">JavaScript</p> <script type="text/javascript"> var str= document.getElementById("s"); </script> | 藉由ID獲取相關元素 |
| Object.innerHTML( 大小寫有區分 ) <h2 id="s">javascript</H2> <script type="text/javascript"> var str= document.getElementById("s").innerHTML; document.write("Output : "+str.innerHTML+"<br>"); </script> | 用來存/取HTML裡的元素 Output : javascript |
| Object.style.property <p id="pcon">Hello World!</p> <script> var mychar = document.getElementById("pcon"); mychar.style.color="red"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue"; </script> | 更改HTML樣式 |
<style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style> <script type="text/javascript"> function add(){ var p1 = document.getElementById("p1"); p1.className = "one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className = "two"; } </script> |
您好
你也好
|
| <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> <title>javascript</title> <style type="text/css"> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid 1px; padding:5px;} p{ line-height:18px; text-indent:2em;} </style> </head> <body> <h2 id="con">JavaScript课程</H2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p> <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <!--当点击相应按钮，执行相应操作，为按钮添加相应事件--> <input type="button" value="改变颜色" onClick="changeColor()"> <input type="button" value="改变宽高" onClick="changeWidthHigh()"> <input type="button" value="隐藏内容" onClick="changeDisplay()"> <input type="button" value="显示内容" onClick="changeDisplayBlock()"> <input type="button" value="取消设置" onClick="changeReset()"> </form> <script type="text/javascript"> //定义"改变颜色"的函数 function changeColor(){ var color = document.getElementById("txt"); color.style.color = "blue"; } //定义"改变宽高"的函数 function changeWidthHigh(){ var color = document.getElementById("txt"); color.style.width = "200px"; color.style.height = "200px"; } //定义"隐藏内容"的函数 function changeDisplayNone(){ var color = document.getElementById("txt"); color.style.display = "none"; } //定义"显示内容"的函数 function changeDisplayBlock(){ var color = document.getElementById("txt"); color.style.display = "block"; } //定义"取消设置"的函数 function changReset(){ var color = document.getElementById("txt"); color.removeAttribute("style"); } </script> </body> </html> | 這是在練習DEMO所留下來 |
| var a=document.getElementById("txt1").value; document.getElementById("fruit").value=d; | 取得文字框內容 對元件設定參數 |
| 4 | 5 |
| 1 | 2 |
| 4 | 5 |
參考資料 : 重新介紹 JavaScript
