1.用法:
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
alert('hello word')
</script>
<button onclick="click_me()">click me</button>
<p id="demo"></p>
</html>
<script>
function click_me(){
document.getElementById('demo').innerHTML="第一个点击事件"
}
</script>
2.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
window.alert(123);
document.getElementById('demo').innerHTML = 'hello word';
document.write(Date())
a = 5;
b = 6;
c = a + b;
console.log(c)
</script>
</body>
</html>
3.注释
单行注释以 // 开头。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p id="title"></p>
<script>
//这是标题
document.getElementById("title").innerHTML = "hello word"
/*
这是多行注释
*/
</script>
</body>
</html>
4.数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
//字符串
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
//数字
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
var y=123e5; // 12300000
var z=123e-5; // 0.00123
//布尔
var x=true;
var y=false;
//数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
var cars=["Saab","Volvo","BMW"];
//对象
var person={firstname:"John", lastname:"Doe", id:5566};
//Undefined 和 Null
cars=null;
person=null;
</script>
</body>
</html>
5.对象
对象是拥有属性和方法的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue",name:function name(){},};
a = person.name;
console.log(a)
</script>
</body>
</html>