一.简介
1.1 联系与区别
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
1.2 用法
HTML中的脚本必须位于
<script></script>标签之间；脚本可被放置在HTML页面的
<body>和<head>部分中；
二.输出
2.1显示数据
window.alert()–弹出警告框document.write()–将内容写到HTML文档中innerHTML–写入到HTML元素中console.log()–写入到浏览器的控制台注意：如果在文档已经加载完后执行
docunment.write()会覆盖整个文档内容
document.write(Date());
window.alert(5 + 6);
document.getElementById("demo").innerHTML="xxxxx";
console.log(c);三.语法
3.1 字面量
- 一般固定值称为字面量；(数字字面量、字符串字面量、表达式字面量、数组字面量、对象字面量、函数字面量)
3.2 变量
- 变量用于存储数据值；
- js使用关键字
var来定义变量，使用等号来为变量赋值； - 变量必须以字母开头；
- 未使用值来声明的变量。其值实际上是undefined;
var carname="Volvo"; var carname;执行之后，变量carname的值依然是”Volve”;
3.2语法
- 语句用分号来分割；
- 对字母大小写敏感；
- js会忽略多余的空格；
- 使用
\换行；
3.3数据类型
1.数据类型
在js中有5种不同的数据类型
- 字符串（String）;–使用索引访问每个字符(carname[2]);字符串长度（carname.length）
- 数字（Number）;
- 布尔（Boolean）；
- 对象（Object）；–访问对象属性（person.lastName;person[“lastName”]）
- 函数（function）
2种不包含任何之的数据类型
- 空（Null）；
- 未定义（Undefined）；
3种对象类型
- 对象（Object）；
- Date
- 数组（Array）；
2.检测数据类型(typeof)
typeof [1,2.3]//返回object- `var person=null;typeof person`` //返回object
var person=undefined;typeof person//返回undefined
**3.类型转换
- 转换为字符串
(123).toString();String(123) - 转换为数字
Number("12.114");
3.4 作用域
- 函数体内定义：
var name="xxxx"为局部变量；name="xxxx"-全局变量；(生命周期：函数执行完毕后销毁) - 函数体外定义：为全局变量；(生命周期：页面关闭后销毁)
3.5 循环
- for–循环代码块一定的数量
- for/in–循环遍历对象的属性–
for(x in person) - while–当指定条件为true时循环代码块
- do/while–同上
四.函数
4.1 函数参数
- 函数显式参数在函数定义时列出；
- 函数隐式参数在函数调用时传递给函数真正的值；
- js函数定义时显式参数灭有指定数据类型。
- js函数对隐式参数没有进行类型检测
- js函数对隐式参数的个数没有进行检测；(若没有提供，则是undefined;)
4.2 Arguments对象
argument对象包含了函数调用的参数数组
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
var i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}4.3 作为函数方法调用函数
两个预定义的函数方法：call()和apply();两个方法可用于调用函数，两个方法的第一个参数必须是对象本身
区别：call()是作为参数传入；apply()是作为一个数组传入
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2);
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);
五.DOM
//改变HTML的内容
document.getElementById("p1").innerHTML="新文本!";
//改变HTML的属性
document.getElementById("image").src="landscape.jpg";
//改变HTML的样式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
添加事件的三种方式
//第一种
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
//第二种
/*
可以向元素中添加多个事件句柄，不会覆盖
*/
document.getElementById("myBtn").addEventListener("click", displayDate);
element.removeEventListener("mousemove", myFunction);
//第三种
<input type="text" id="fname" onchange="upperCase()">六.BOM(Browser Object Model )-浏览器对象模型
-Window
/*
确定浏览器窗口的尺寸
*/
window.innerHeight //浏览器窗口的内部高度(包括滚动条)
window.innerWidth //浏览器窗口的内部宽度(包括滚动条)
window.open() //打开新窗口
window.close() //关闭当前窗口
window.moveTo() //移动当前窗口
window.resizeTo() //调整当前窗口的尺寸-Window Screen
window.screen 对象包含有关用户屏幕的信息
screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度-Window Location
window.location对象用于获取当前页面的地址（URL），并把浏览器重定向到新的页面
window.locatin;
location.href; --返回整个URL
location.hostname; --返回web主机的域名
location.pathname;--返回当前页面的路径和文件名
location.port; --返回web主机的端口
location.protocol; --返回所使用的web协议-Window History
window.history对象包含浏览器的历史
history.back();
history.forword();-弹窗
1.警告框
window.alert("你好，我是一个警告框！"); –window可省略
2.确认框
window.confirm("按下按钮") –window可省略
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}3.提示框
window.prompt("请输入你的名字"，"Harry Patter") –window可省略
-计时事件
js一个设定的时间间隔之后来执行代码，我们称之为计时事件
1.setInterval()与clearInterval()
setInterval()-间隔指定的毫秒数不停地执行指定的代码；clearInterval()-用于停止setInterval()方法执行的函数代码；
实例：显示当前时间
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}2.setTimeout()与clearTimeout()enen enene
setTimeout() - 在指定的毫秒数后执行指定代码。
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
