JavaScript 对大小写是敏感的。
JavaScript 语句用分号(;)分隔。
单行注释以 // 开头。多行注释以 /* 开始,以 */ 结尾。
1、JavaScript用法
JavaScript脚本放置在HTML页面的<body>或<head>部分都可。
(1)在HTML 中插入JavaScript
如需在HTML 中插入JavaScript,必须将JavaScript脚本放在<script> 与</script> 标签之间。
<script>
JavaScript脚本
</script>
(2)外部的JavaScript
外部 JavaScript 文件的文件扩展名是 .js。
外部 JavaScript 文件不能使用 <script> 标签,直接写 javascript 代码。
如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件。
<p id="changeInfo">JavaScript函数</p>
<!--myFunction 保存在名为 "myScript.js" 的外部文件中。-->
<button type="button" onclick="myFunction()">点击这里</button>
<script src="myScript.js"></script>
<!--myScript.js文件-->
function myFunction()
{
document.getElementById("changeInfo").innerHTML="Hello JavaScript!";
}
2、JavaScript输出
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
<!--直接写入HTML输出流-->
<script>
document.write("<h1>这是一个标题!</h1>");
</script>
<!--onclick事件-->
<button type="button" onclick="alert('欢迎!')">点我!</button>
<!--改变HTML内容-->
<!--document.getElementById("id");这个方法是HTML DOM中定义的。-->
<!--document.getElementById("id");使用 "id" 属性来访问某个HTML元素,并通过innerHTML来修改该元素的HTML内容。-->
<p id="info">
JavaScript能改变HTML元素的内容。
</p>
<script>
function changeInfo()
{
res=document.getElementById("info"); // 找到元素
res.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="changeInfo()">点击这里</button>
<!--改变HTML样式-->
<p id="style">
JavaScript能改变HTML元素的样式。
</p>
<script>
function changeStyle()
{
res=document.getElementById("style") // 找到元素
res.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="changeStyle()">点击这里</button>
<!--弹出警告框来显示数据-->
<script>
window.alert(11);
</script>
<!--console.log();写到浏览器的控制台-->
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
3、JavaScript字面量、变量
JavaScript中,常量称为字面量。
字面量是一个恒定的值,变量通常是可变的。
JavaScript 使用关键字 var 来声明变量,变量可存放值(比如 x=5)、表达式(比如 z=x+y)、字符串/文本值 (name="Black")等。
变量存放文本值时,应该用双引号或单引号。变量存放数值时,不要使用引号。如果使用引号包围数值,该值会被作为文本来处理。
变量用等号来赋值,变量可以通过变量名访问。
<!--数字字面量-->
<p id="number"></p>
<script>
<!--123e5就是123乘以10的5次方(12300000)-->
document.getElementById("number").innerHTML = 123e5;
</script>
<!--字符串字面量-->
<p id="string"></p>
<script>
<!--可以使用单引号或双引号-->
document.getElementById("string").innerHTML = 'John Doe';
</script>
<!--表达式字面量-->
<p id="express"></p>
<script>
<!--50-->
document.getElementById("express").innerHTML = 5 * 10;
</script>
<!--数组字面量-->
[40, 100, 1, 5, 25, 10]
<!--对象字面量 -->
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
<!--函数字面量-->
function myFunction(a, b) { return a * b;}
<!--变量-->
<p id="test"></p>
<script>
var num;
num= 6;
document.getElementById("test").innerHTML = num;
</script>
4、JavaScript数据类型
值类型:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(表示独一无二的值)。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
当您声明新变量时,可以使用关键词 "new" 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
字符串可以使用单引号或双引号:
var x = "John";
数字可以带小数点,也可以不带。极大或极小的数字可以通过科学(指数)计数法来书写。
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
var y=123e5; // 12300000
var z=123e-5; // 0.00123
布尔(逻辑)只能有两个值:true 或 false。
数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
var cars=new Array("Saab","Volvo","BMW");
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"John", lastname:"Doe", id:5566};
空格和折行无关紧要。声明可横跨多行:
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null;
注意 undefined 和 null 都是小写,并且二者都会输出 undefined。
var x,y; if(x == null){ document.write(x); } if(y == undefined){ document.write(y); }
toString() 方法可以把数值转换为字符串。
parseInt() 和 parseFloat() 方法可以把字符串转换为数值。
5、JavaScript操作符
<!--算术运算符-->
<p id="sum"></p>
<script>
document.getElementById("sum").innerHTML = (5 + 6) * 10; <!--110-->
</script>
<!--赋值运算符-->
<p id="test"></p>
<script>
var x, y, z;
x = 5;
y = 6;
z = (x + y) * 10;
document.getElementById("test").innerHTML = z; <!--110-->
</script>
6、JavaScript函数
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}