Introduction to JavaScript
JavaScript Introduction
JavaScript is the most popular scripting language on the Internet. This language can be used for HTML and web, and can be widely used on servers, PCs, laptops, and tablets. and devices such as smartphones.
JavaScript is a scripting language
JavaScript is a lightweight programming language.
JavaScript is programming code that can be inserted into HTML pages.
JavaScript, when inserted into an HTML page, can be executed by all modern browsers.
JavaScript is easy to learn.
What you will learn
Here are the main things you will learn in this tutorial.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
JavaScript 能夠直接寫(xiě)入 HTML 輸出流中：
</p>
<script>
document.write("<h1>This is a title</h1>");
document.write("<p>This is a paragraph</p>");
</script>
<p>
您只能在 HTML 輸出流中使用 <strong>document.write</strong>。
如果您在文檔已加載后使用它（比如在函數(shù)中），會(huì)覆蓋整個(gè)文檔。
</p>
</body>
</html>Warm reminder: You can only use document.write in HTML output. If you use this method after the document is loaded, the entire document will be overwritten.
JavaScript: Reaction to events:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>JavaScript</h1>
<p>
JavaScript 能夠?qū)κ录鞒龇磻?yīng)。比如對(duì)按鈕的點(diǎn)擊：
</p>
<button type="button" onclick="alert('歡迎!')">點(diǎn)我!</button>
</body>
</html>Warm reminder: The alert() function is not commonly used in JavaScript, but it is useful for code Testing is very convenient. The
onclick event is just one of many events you'll learn about in this tutorial.
JavaScript: Changing HTML content
Using JavaScript to process HTML content is a very powerful feature.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>JavaScript</h1>
<p id="demo">
JavaScript 能改變 HTML 元素的內(nèi)容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改變內(nèi)容
}
</script>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
</body>
</html>You will often see document.getElementById("some id"). This method is defined in the HTML DOM.
DOM (Document Object Model) is the official W3C standard for accessing HTML elements.
You will learn about the HTML DOM in several chapters of this tutorial.
JavaScript: Change HTML style
Changing the style of HTML elements is a variant of changing HTML attributes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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()">點(diǎn)擊這里</button>
</body>
</html>JavaScript: Validating Input
JavaScript is often used to validate user input.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>請(qǐng)輸入數(shù)字。如果輸入值不是數(shù)字，瀏覽器會(huì)彈出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是數(shù)字");
}
}
</script>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
</body>
</html>
