JavaScript编程学习
<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>
一级字号的标题
这是一个段落
<!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>
我的第一段 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>

点击灯泡就可以打开或关闭这盏灯
</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>
我的第一段 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>
JavaScript 能够直接写入 HTML 输出流中:
这是一个标题
这是一个段落。
这是一个段落45。
您只能在 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>
我的 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>
我的 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 循环的语法:
{
被执行的代码块
}
语句 1 (代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
实例
<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;
}
var x=””,i=0;
for (i=0;i<10;i++){
if (i==3){
continue;
}
x=x + “该数字为 ” + i + “<br>”;
}
document.getElementById(“demo”).innerHTML=x;
}
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>