Introduction to JavaScript
JavaScript is the most popular scripting language on the Internet. This language can be used for HTML and the web, and can be widely used on servers, PCs, laptops, tablets, smartphones and other devices.
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.
JavaScript: Write directly to the HTML output stream
Example
<!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>Click the "Run Example" button to view the online example
 | ##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: Reacting to Events
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>Click "Run" Example" button to view online examples
alert() function is not commonly used in JavaScript, but it is very convenient for code testing. 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.
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>Click the "Run Instance" button to view the online instance
You will often see document.getElementById("some id"). This method is defined in the HTML DOM.
DOM (DocumentObject Model) (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 image
This example will dynamically change the source (src) of HTML <image>:
Example
<!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>Click the "Run Example" button to view the online example
JavaScript can change most attributes of any HTML element. And not just pictures.
JavaScript: Change HTML style
Changing the style of HTML elements is a variant of changing HTML attributes.
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>Click the "Run Instance" button to view the online instance
JavaScript: Validate input
JavaScript is often used to validate user input.
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>Click the "Run Instance" button to view the online instance
Do you know?
| JavaScript and Java are two completely different languages, both in concept and design.
Java (invented by Sun) is a more complex programming language.
ECMA-262 is the official name of the JavaScript standard.
JavaScript was invented by Brendan Eich. It appeared in Netscape in 1995 (the browser is no longer being updated) and was adopted by ECMA (a standards association) in 1997. |
|---|
