被阅次数： 521

<head>
<meta charset=”utf-8″>
<title>在浏览器上显示的名称</title>
<script>
function displayDate(){
document.getElementById(“demo”).innerHTML=Date();
}实时获取日期，并显示在id为demo的段落中
</script>
</head>
<body>

<h1>一级字号的标题</h1>
<p id=“demo”>这是一个段落</p>

<button type=”button” onclick=“displayDate()”>按钮上显示日期的提示</button>

<button type=”button” onclick=“alert(‘欢迎!’)”>点我!</button>

</body>
</html>

菜鸟教程(runoob.com)

一级字号的标题

这是一个段落

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</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>

菜鸟教程(runoob.com)

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
function changeImage()
{
element=document.getElementById(‘myimage’)
if (element.src.match(“bulbon”))
{
element.src=”/images/pic_bulboff.gif”;
}
else
{
element.src=”/images/pic_bulbon.gif”;
}
}
</script>
<img id=”myimage” onclick=”changeImage()” src=”/images/pic_bulboff.gif” width=”100″ height=”180″>
<p>点击灯泡就可以打开或关闭这盏灯</p>

</body>
</html>

菜鸟教程(runoob.com)

点击灯泡就可以打开或关闭这盏灯

</head>
<body>

<h1>我的第一段 JavaScript</h1>
<p id=”demo3″>
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction3()
{
x=document.getElementById(“demo3”) // 找到元素
x.style.color=”#ff0000″; // 改变样式
}
</script>
<button type=”button” onclick=”myFunction3()”>点击这里</button>

</body>
</html>

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</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>

菜鸟教程(runoob.com)

我的第一段 JavaScript

请输入数字。如果输入值不是数字，浏览器会弹出提示框。

JavaScript简介

<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write(“<h1>这是一个标题</h1>”);
document.write(“<p>这是一个段落。</p>”);

document.write(“<p>这是一个段落”+4+5+”。</p>”);
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

菜鸟教程(runoob.com)

JavaScript 能够直接写入 HTML 输出流中：

您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

</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>

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的内容。

JavaScript 用法

<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction(){
document.getElementById(“demo”).innerHTML=”我的第一个 JavaScript 函数”;
}
</script>
</head>
<body>

<h1>我的 Web 页面</h1>
<p id=”demo”>一个段落。</p>
<button type=”button” onclick=”myFunction()”>点击这里</button>

</body>
</html>

菜鸟教程(runoob.com)

我的 Web 页面

一个段落。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的 Web 页面</h1>
<p id=”demo”>一个段落。</p>
<button type=”button” onclick=”myFunction()”>点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 “myScript.js” 的外部文件中。</p>
<script src=”myScript.js”></script>

</body>
</html>

菜鸟教程(runoob.com)

我的 Web 页面

一个段落。

注释：myFunction9 保存在名为 “myScript.js” 的外部文件中。

输出

<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>

</body>

<script>
document.getElementById(“demo”).innerHTML = “段落已修改。”;
</script>

<body>

<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>

</body>

<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick=“myFunction()”>点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台
  • <script>
    document.getElementById(“demo”).innerHTML = 123e5;
    </script>
  • <script>
    document.getElementById(“demo”).innerHTML = ‘John Doe’;
    </script>
  • <script>
    document.getElementById(“demo”).innerHTML = 5 * 10;
    </script>

<script>
var length;
length = 6;
document.getElementById(“demo”).innerHTML = length;
</script>

<script>
document.getElementById(“demo”).innerHTML = (5 + 6) * 10;
</script>

<script>
var x, y, z;
x = 5;
y = 6;
z = (x + y) * 10;
document.getElementById(“demo”).innerHTML = z;
</script>

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = “Johnson”;                         // String 通过字符串字面量赋值
var cars = [“Saab”, “Volvo”, “BMW”];              // Array  通过数组字面量赋值
var person = {firstName:”John”, lastName:”Doe”};  // Object 通过对象字面量赋值

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

JavaScript 语句

<p id=”demo”>一个段落。</p>
<div id=”myDIV”>一个 DIV。</div>
<script>
document.getElementById(“demo”).innerHTML=”你好 Dolly”;
document.getElementById(“myDIV”).innerHTML=”你最近怎么样?”;
</script>

<script>
// 输出标题：
document.getElementById(“myH1″).innerHTML=”Welcome to my Homepage”;
// 输出段落：
document.getElementById(“myP”).innerHTML=”This is my first paragraph.”;
</script>

<script>
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById(“myH1″).innerHTML=”欢迎来到菜鸟教程”;
document.getElementById(“myP”).innerHTML=”这是一个段落。”;
</script>

<script>
var pi=3.14;
var name=”Bill Gates”;
var answer=’Yes I am!’;
document.write(pi + “<br>”);
document.write(name + “<br>”);
document.write(answer + “<br>”);
</script>

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)

<script>
var carname1=”Volvo XC60″;
var carname2=’Volvo XC60′;
var answer1=’It\’s alright’;
var answer2=”He is called \”Johnny\””;
var answer3=’He is called “Johnny”‘;
document.write(carname1 + “<br>”)
document.write(carname2 + “<br>”)
document.write(answer1 + “<br>”)
document.write(answer2 + “<br>”)
document.write(answer3 + “<br>”)
</script>

var person={
firstname : “John”,
lastname  : “Doe”,
id        :  5566
};

<script>
var person;
var car=”Volvo”;
document.write(person + “<br>”);
document.write(car + “<br>”);
var car=null
document.write(car + “<br>”);
</script>

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

<script>
var person = {
firstName: “John”,
lastName : “Doe”,
id : 5566
};
document.getElementById(“demo”).innerHTML =
person[“firstName”] + ” ” + person[“lastName”];
</script>

<script>
var person = {
firstName: “John”,
lastName : “Doe”,
id : 5566,
fullName : function()
{
return this.firstName + ” ” + this.lastName;
}
};
document.getElementById(“demo”).innerHTML = person.fullName();
</script>

JavaScript 函数

<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick=”myFunction(‘Harry Potter’,’Wizard’)”>点击这里</button>
<script>
function myFunction(name,job){
alert(“Welcome ” + name + “, the ” + job);
}
</script>

</body>

JavaScript 作用域

JavaScript 事件

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

<body>

<button onclick=”this.innerHTML=Date()”>现在的时间是?</button>

</body>

<body>

<button onclick=”getElementById(‘demo’).innerHTML=Date()”>现在的时间是?</button>
<p id=”demo”></p>

</body>

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 …

可以使用多种方法来执行 JavaScript 事件代码：

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 …

<script>
var x = “John”; // x是一个字符串
var y = new String(“John”); // y是一个对象
document.getElementById(“demo”).innerHTML =typeof x + ” ” + typeof y;
</script>

JavaScript 运算符

avaScript 比较 和 逻辑运算符

<body>

<p>点击按钮检测年龄。</p>
年龄:<input id=”age” value=”18″ />
<p>是否达到投票年龄?</p>
<button onclick=”myFunction()”>点击按钮</button>
<p id=”demo”></p>
<script>
function myFunction()
{
var age,voteable;
age=document.getElementById(“age”).value;
voteable=(age<18)?”年龄太小”:”年龄已达到”;
document.getElementById(“demo”).innerHTML=voteable;
}
</script>

</body>

JavaScript if…Else 语句

  • if 语句 – 只有当指定条件为 true 时，使用该语句来执行代码
  • if…else 语句 – 当条件为 true 时执行代码，当条件为 false 时执行其他代码
  • if…else if….else 语句– 使用该语句来选择多个代码块之一来执行
  • switch 语句 – 使用该语句来选择多个代码块之一来执行

<body>

<p>如果时间早于 20:00，会获得问候 “Good day”。</p>
<button onclick=”myFunction()”>点击这里</button>
<p id=”demo”></p>
<script>
function myFunction(){
var x=””;
var time=new Date().getHours();
if (time>20){
x=”Good night”;
}
document.getElementById(“demo”).innerHTML=x;
}
</script>

</body>

var d=new Date().getDay();
switch (d){
case 0:x=”今天是星期日”;
break;
case 1:x=”今天是星期一”;

<script>
cars=[“BMW”,”Volvo”,”Saab”,”Ford”];
for (var i=0;i<cars.length;i++){
document.write(cars[i]+”<br>”);
}
</script>

不同类型的循环

JavaScript 支持不同类型的循环：

  • for – 循环代码块一定的次数
  • for/in – 循环遍历对象的属性
  • while – 当指定的条件为 true 时循环指定的代码块
  • do/while – 同样当指定的条件为 true 时循环指定的代码块

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

实例

for (var i=0; i<5; i++) { x=x + “该数字为 “ + i + “<br>“; }
<script>
function myFunction(){
var x=””;
for (var i=0;i<5;i++){
x=x + “该数字为 ” + i + “<br>”;
}
document.getElementById(“demo”).innerHTML=x;
}
function myFunction(){
var x;
var txt=””;
var person={fname:”Bill”,lname:”Gates”,age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById(“demo”).innerHTML=txt;
}
while (i<5){
x=x + “该数字为 ” + i + “<br>”;
i++;
}
do{
x=x + “该数字为 ” + i + “<br>”;
i++;
}
while (i<5)
function myFunction(){
var x=””,i=0;
for (i=0;i<10;i++){
if (i==3){
break;
}
x=x + “该数字为 ” + i + “<br>”;
}
document.getElementById(“demo”).innerHTML=x;
}
function myFunction(){
var x=””,i=0;
for (i=0;i<10;i++){
if (i==3){
continue;
}
x=x + “该数字为 ” + i + “<br>”;
}
document.getElementById(“demo”).innerHTML=x;
}
cars=[“BMW”,”Volvo”,”Saab”,”Ford”];
list:{
document.write(cars[0] + “<br>”);
document.write(cars[1] + “<br>”);
document.write(cars[2] + “<br>”);
break list;
document.write(cars[3] + “<br>”);
document.write(cars[4] + “<br>”);
document.write(cars[5] + “<br>”);
}

typeof “John”                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:‘John’, age:34} // 返回 object

JavaScript 数据类型

在 JavaScript 中有 6 种不同的数据类型：

  • string
  • number
  • boolean
  • object
  • function
  • symbol

3 种对象类型：

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型：

  • null
  • undefined

document.getElementById(“demo”).innerHTML =
“john”.constructor + “<br>” +
(3.14).constructor + “<br>” +
false.constructor + “<br>” +
[1,2,3,4].constructor + “<br>” +
{name:’john’, age:34}.constructor + “<br>” +
new Date().constructor + “<br>” +
function () {}.constructor;

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“demo”).innerHTML = isArray(fruits);
function isArray(myArray) {
return myArray.constructor.toString().indexOf(“Array”) > -1;
}

var x = 123;
document.getElementById(“demo”).innerHTML =
String(x) + “<br>” +
String(123) + “<br>” +
String(100 + 23);

<input id=”numb”>

<button type=”button” onclick=”myFunction()”>提交</button>

<p id=”demo”></p>

<script>
function myFunction() {
var x, text;

// 获取 id=”numb” 的值
x = document.getElementById(“numb”).value;

// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = “输入错误”;
} else {
text = “输入正确”;
}
document.getElementById(“demo”).innerHTML = text;
}
</script>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

You cannot copy content of this page