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 能够直接写入 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>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</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 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</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 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</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()">点击这里</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>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</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>
Next Section