1、JavaScript：直接写入 HTML 输出流
<script type="text/javascript">
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>")
</script>
2、JavaScript：对事件的反应
<button type="button" onclick="alert('欢迎！')">点击</button>
3、JavaScript：改变 HTML 内容
<P id="demo">
this is a demo
</P>
<script type="text/javascript">
function myFunction()
{
x=document.getElementById("demo");
x.innerHTML="hello js";
}
</script>
<button type="button" onclick="myFunction()">点击</button>
4、JavaScript：改变 HTML 图像
<script type="text/javascript">
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>
5、JavaScript：改变 HTML 样式
<script type="text/javascript">
function myFunction()
{
x=document.getElementById("demo")
x.style.color="#ff0000";
}
</script>
<p id="demo">this is a demo</p>
<button type="button" onclick="myFunction()">点击</button>
6、JavaScript：验证输入
<script type="text/javascript">
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<p>请输入数字</p>
<input type="text" id="demo" name="">
<button type="button" onclick="myFunction()">点击</button>
一、JavaScript输出
JavaScript 显示数据
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
1、使用 window.alert()
<script type="text/javascript">
window.alert(5+5);
</script>
2、操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<p id="demo">我的段落</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML="段落已经修改";
</script>
3、
<script type="text/javascript">
document.write(Date());
</script>
4、如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
<p>我的段落</p>
<button onclick="myFunction()">点击</button>
<script type="text/javascript">
function myFunction()
{
document.write(Date());
}
</script>
5、
<script type="text/javascript">
a=6;
b=6;
c=a+b;
console.log(c);
</script>
二、JavaScript 语法
1、JavaScript 字面量
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 123e5;
</script>
<script>
document.getElementById("demo").innerHTML = 'asu';
</script>
<script>
document.getElementById("demo").innerHTML = 2*10;
</script>
2、JavaScript 变量
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值。
<p id="demo"></p>
<script type="text/javascript">
var length;
length=6;
document.getElementById("demo").innerHTML=length;
</script>
3、以下是 JavaScript 中最重要的保留字（按字母顺序）：
4、JavaScript 数据类型
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 通过对象字面量赋值
5、JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。
<p id="a"></p>
<div id="b"></div>
<script type="text/javascript">
document.getElementById("a").innerHTML="hello";
document.getElementById("b").innerHTML="你好";
</script>
6、JavaScript 可以分批地组合起来。代码块以左花括号开始，以右花括号结束。代码块的作用是一并地执行语句序列。
<p id="a">你好世界</p>
<div id="b">你好吗</div>
<button type="button" onclick="myFunction()">点击</button>
<script type="text/javascript">
function myFunction(){
document.getElementById("a").innerHTML="hello world"; document.getElementById("b").innerHTML="how are you";
}
</script>
7、JavaScript 语句标识符
三、JavaScript 变量
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var y=5;
var x=y+2;
var demop=document.getElementById("demo")
demop.innerHTML="x="+x;
}
</script>
四、JavaScript 数据类型
1、字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
<script type="text/javascript">
var carname1="Volve XC60";
var carname2='Volve XC60';
var answer1="it's alright";
var answer2="he is called'John'";
var answer3='he is called "John"';
document.write(carname1+"<br>");
document.write(carname2+"<br>");
document.write(answer1+"<br>");
document.write(answer2+"<br>");
document.write(answer3+"<br>");
</script>
<script type="text/javascript">
var x1=34.00;
var x2=34;
var y=123e5;
var z=123e-5;
document.write(x1+"<br>")
document.write(x2+"<br>")
document.write(y+"<br>")
document.write(z+"<br>")
</script>
<script type="text/javascript">
var i;
var cars =new Array();
cars[0]="saab";
cars[1]="volvo";
cars[2]="BMW";
for(i=0;i<cars.length;i++)
{
document.write(cars[i]+"<br>");
}
</script>
<script type="text/javascript">
var person=
{
firstname:"John",
lastname:"Doe",
id:5566
};
document.write(person.lastname+"<br>");
document.write(person["lastname"]+"<br>");
</script>
<script>
var person;
var car="Volvo";
document.write(person + "<br>");
document.write(car + "<br>");
var car=null
document.write(car + "<br>");
</script>
五、JavaScript 对象
<p id="demo"></p>
<script type="text/javascript">
var person ={
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
document.getElementById("demo").innerHTML=person.firstName+"现在"+person.age+"岁";
</script>
