JavaScript
1 JavaScript简介
基于对象（非面向对象）
1.1 JavaScript概述
一个完整的JS实现由一下3部门组成，核心（ECMAScript）、文档对象模型（Document Objrct Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。
DOM树：文档对象，JS操作DOM
1.2 JS Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript引入方式</title>
<script type="text/javascript">
alert("JS Hello World");//弹窗输出
//文档对象
document.write("learn javascript now")//页面输出
</script>
</head>
<body>
</body>
</html>
1.3 JavaScript基础语法
JavaScript 引入方式
内部；外部；
JavaScript 注释
单行： // ；
多行： /* */ ；
JavaScript 变量
JavaScript 是弱类型语言，统一用var 来定义变量；
JavaScript基本数据类型
数值类型；
字符串类型；
布尔类型；
Undefined(表示变量不含有值)；
Null(置空变量)）；
JavaScript运算符
1，算术运算符；
2，赋值运算符；
3，比较运算符；
4，逻辑运算符；
5，三目运算符；
6，字符串连接“+”
JavaScript选择与循环
1，if...else 语句；
2，switch 语句；
3，for 循环语句；
4，while/do..while 语句；
JavaScript函数
function fun1() {
// body...
alert("第一个函数");
}
fun1();
注意区分Break和Continue
2 JavaScript操作DOM节点
2.1 JavaScript 处理DOM 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript处理DOM事件</title>
<script type="text/javascript">
function fuck(){
alert("点我干嘛？");
}
</script>
</head>
<body>
<input type="button" value="点我一下" onclick="fuck()"/>
</body>
</html>
2.2 JavaScript 操作DOM 节点
1，JavaScript 修改DOM 节点
2，JavaScript 添加DOM 节点
3，JavaScript 删除DOM 节点
function modifyDOM1(){
document.getElementById('text1').value="这里输入ID";
document.getElementById('pwd1').value="这里输入密码";
}
function modifyDOM2() {
document.getElementById("sp1").innerHTML="用户名";
document.getElementById("sp2").innerHTML="密码";
}
<script type="text/javascript">
function addDOM1() {
/* 创建p标签，里面加入内容 */
var p=document.createElement("p");
var nodeText=document.createTextNode("文本框前面的文字内容");
p.appendChild(nodeText);
/* 找到父节点，插入DOM */
var parent=document.getElementById("parent");
var child=document.getElementById("child");
parent.insertBefore(p,child);
}
function addDOM2() {
/* 在后面插入节点 */
var h4=document.createElement("h4");
var nodeText=document.createTextNode("游戏新闻");
h4.appendChild(nodeText);
var parent=document.getElementById("parent");
parent.appendChild(h4);
}
</script>
appendChild()函数作用
（1）向双标签内部添加内容
（2）父节点下的子节点后面添加DOM
function removeDOM() {
/* 获取父节点 */
var parent=document.getElementById("parent");
var child=document.getElementById("child");
/* 父节点remove */
parent.removeChild(child);
}
2.3 JavaScript修改DOM 节点CSS 样式
document.getElementById("boy").style.color="red";
3 JavaScript对象
3.1 JavaScript对象定义
1，JavaScript 对象定义
2，JavaScript 动态的添加属性和方法
3，JavaScript 动态的删除属性和方法
4，JavaScript 对象构造方法
var p=new Object();
p.name="Java and Oracle"; // 动态的添加属性
p.func=speak; // 动态的添加方法
//delete 属性、方法
//赋值为undefined
function person(name,age){
this.name2=name;
this.age2=age;
}
3.2 JavaScript字符串对象
1，字符串对象实例化方法
2，字符串length 属性
3，字符串indexOf 方法使用indexOf() 来定位字符串中某一个指定的字符首次出现的位置
4，字符串replace()方法使用replace() 方法在字符串中用某些字符替换另一些字符
var s1="直接定义字符串";
var s2=new String("使用new关键字定义字符串");
3.3 JavaScript日期对象
1，日期对象实例化
2，getTime()方法，返回1970 年1 月1 日至今的毫秒数。
3，getFullYear() 从Date 对象以四位数字返回年份。
4，getMonth() 从Date 对象返回月份(0 ~ 11)。
5，getDate() 从Date 对象返回一个月中的某一天(1 ~ 31)。
6，getHours() 返回Date 对象的小时(0 ~ 23)。
7，getMinutes() 返回Date 对象的分钟(0 ~ 59)。
8，getSeconds() 返回Date 对象的秒数(0 ~ 59)。
9，getDay() 从Date 对象返回一周中的某一天(0 ~ 6)。
var date=new Date();
3.4 JavaScript数组
1，数组的声明；
2，数组的遍历；
3，数组元素排序sort()方法；
4，数组元素组合成字符串join()方法；
5，合并数组元素concat()方法；
6，颠倒数组元素reverse()方法；
var arr=new Array(); var arr2=new Array(3);
4 JavaScript常用函数
4.1 JavaScript 全局函数
全局函数不属于任何一个内置对象。
JS 包含以下7 个全局函数，用于一些常用的功能：escape(),eval(),isNan(),isFinite(),parseFloat(),paaseInt(),unescape();
Eval()方法：执行代码；
<script type="text/javascript">
var str="1+2+3";
alert(eval(str));
</script>
4.2 window对象常用方法及事件
alert();弹出消息框confirm() prompt()
window.alert("太简单了，整理啥？");
window.confirm("简单到爆炸");
window.prompt("观察prompt、基本不会使用，呵呵");
setTimeout()；执行一次
setinterval()；执行多次
open();打开窗口
window.onload 发生在文档全部下载完毕的时候。（HTML onload事件）
window.onresize 发生在窗口大小发生变化的时候。（了解）
function tuan() {
alert("xxxxx");
}
window.setTimeout("tuan()",3000);
var n=1;
function q() {
document.write("xxxxx");
n++;
}
window.setInterval("q()",1000);
window.open(); 打开窗口
window. onload(); 发生在文档全部下载完毕的时候
<script type="text/javascript">
window.onload=function(argument) {
alert("window对象提供的加载完成");
};
function loadInfo(argument) {
alert("HTML提供的加载完成");
}
</script>
暂时先到这里
浙公网安备 33010602011771号