1、JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:
使用window.alert()弹出警告框。
使用document.write()方法将内容写到HTML 文档中。
使用innerHTML写入到HTML 元素。
使用console.log()写入到浏览器的控制台。
实例:
document.getElementById("demo").innerHTML = "段落已修改。
";
document.write("<h1>这是一个标题</h1>");//write可以直接写入格式!
2、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 通过对象字面量赋值
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
3、JavaScript事件
HTML 事件可以是浏览器行为,也可以是用户行为。
以下是HTML 事件的实例:
HTML 页面完成加载。
HTML input 字段改变时。
HTML 按钮被点击。
右图是常见的事件(前面都有on)
事件有三种写法,举onclick为例:
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
<button onclick="displayDate()">现在的时间是?</button> //后面再写函数实现方式。
4、JavaScript 字符串
var carname = "Volvo XC60";
var character = carname[7]; //字符串的索引从0 开始
JavaScript本身对单引号还是双引号没有区别。
一般都用双引号,两个都存在时,再考虑。
使用内置属性length来计算字符串的长度,不是方法(函数),所以没有括号()。
字符串也可以是对象。
5、JavaScript 验证API
约束验证DOM 方法
实例:
6、JavaScript JSON
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据。
不是网页向服务端。
JSON 实例
JSON键值对都是要有引号的。
但是JavaScript对象,前面是没有引号的,后面也只有字符串才有引号。
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
使用JavaScript 内置函数JSON.parse() 将JSON字符串转换为JavaScript 对象: var obj = JSON.parse(text);
JSON.stringify() 方法用于将JavaScript 值转换为JSON字符串。
7、JavaScript函数
Arguments 对象(就是函数的参数对象)
JavaScript 函数有个内置的对象arguments 对象。
argument 对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最大的一个参数的值:
函数作为方法被调用
8、JavaScript HTML DOM
通过id 找到HTML 元素document.getElementById
通过标签名找到HTML 元素document.getElementByTagName
通过类名找到HTML 元素document.getElementsByClassName
本例查找id="main" 的元素,然后查找id="main" 元素中的所有<p> 元素:实例。
找到该元素,则该方法将以对象(在 x 中)的形式返回
(1)改变HTML 输出流
document.write(Date());
(2)改变HTML 内容
document.getElementById("p1").innerHTML="新文本!";
(3)改变HTML 属性
document.getElementById(id).attribute=新属性值
document.getElementById("image").src="landscape.jpg"; //本例改变了img元素的src属性
(4)改变HTML 样式
document.getElementById("p2").style.color="blue"; //点击后变颜色,这点常用。
9、JavaScript对象
10、JavaScript Window -浏览器对象模型
所有JavaScript 全局对象、函数以及变量均自动成为window 对象的成员。
全局变量是window 对象的属性。
全局函数是window 对象的方法。
甚至HTML DOM 的document 也是window 对象的属性之一:
与此相同:
11、JavaScript弹窗
(1)警告框window.alert()方法可以不带上window对象,直接使用alert()方法。
(2)确认框window.confirm()方法可以不带上window对象,直接使用confirm()方法。
(3)提示框window.prompt()方法可以不带上window对象,直接使用prompt()方法。
12、JavaScript计时事件
setInterval() -间隔指定的毫秒数不停地执行指定的代码。
setTimeout() -暂停指定的毫秒数后执行指定的代码。
(1)setInterval() 方法
如:setInterval(function(){alert("Hello")},3000);
(2)setTimeout() 方法
setTimeout(function(){alert("Hello")},3000);。