Pengenalan kepada JavaScript
JavaScript ialah bahasa skrip yang paling popular di Internet Bahasa ini boleh digunakan untuk HTML dan web, dan boleh digunakan secara meluas pada pelayan, PC, komputer riba, tablet, telefon pintar dan peranti lain.
JavaScript ialah bahasa skrip
JavaScript ialah bahasa pengaturcaraan yang ringan.
JavaScript ialah kod pengaturcaraan yang boleh dimasukkan ke dalam halaman HTML.
JavaScript, apabila dimasukkan ke dalam halaman HTML, boleh dilaksanakan oleh semua pelayar moden.
JavaScript mudah dipelajari.
Apa yang Anda Akan Pelajari
Berikut ialah perkara utama yang akan anda pelajari dalam tutorial ini.
JavaScript: Tulis terus ke strim output HTML
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>Jalankan instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
 | 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。 |
|---|
JavaScript: Bertindak balas kepada acara
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
</body>
</html>Jalankan instance »
Klik "Run" Butang Contoh" untuk melihat contoh dalam talian
Fungsi alert() tidak biasa digunakan dalam JavaScript, tetapi ia sangat mudah untuk ujian kod. Acara
onclick hanyalah salah satu daripada banyak acara yang akan anda pelajari dalam tutorial ini.
JavaScript: Menukar kandungan HTML
Menggunakan JavaScript untuk memproses kandungan HTML ialah ciri yang sangat berkuasa.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Anda akan sering melihat document.getElementById("beberapa id"). Kaedah ini ditakrifkan dalam HTML DOM.
DOM (DocumentOobjek Model) (Model Objek Dokumen) ialah standard W3C rasmi untuk mengakses elemen HTML.
Anda akan belajar tentang HTML DOM dalam beberapa bab tutorial ini.
JavaScript: Tukar imej HTML
Contoh ini secara dinamik akan menukar sumber (src) HTML <imej>:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/upload/course/000/000/009/580432b53cb5d221.gif";
}
else
{
element.src="/upload/course/000/000/009/5804353cb2562758.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="/upload/course/000/000/009/580432b53cb5d221.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
</body>
</html>Run Example»
Klik butang "Run Example" untuk melihat contoh dalam talian
JavaScript boleh menukar kebanyakan atribut mana-mana Elemen HTML dan bukan hanya gambar.
JavaScript: Tukar gaya HTML
Tukar gaya elemen HTML, yang merupakan varian menukar atribut HTML.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
JavaScript: Sahkan input
JavaScript sering digunakan untuk mengesahkan input pengguna.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Tahukah anda?
 | JavaScript dan Java ialah dua bahasa yang sama sekali berbeza, baik dari segi konsep dan reka bentuk.
|
|---|
