JavaScript基础
简介
目的：
- 1.实现网页动态效果
- 2.输入数据的格式校验 ，减轻服务器（Tomacat DB）校验数据的压力
介绍：
- 1.基于浏览器运行的面向对象的编程语言
- 2.弱类型编程语言（变量类型 ，引用类型只有一个 var）
var 变量名 = .....；
‘1’ == 1 true 不考虑变量类型
JavaScript基本语法
- 1.控制台输出：console.log（“字符串”）
- 2.网页中输出内容：document.write（“字符串”）
- 3.提示框：window.alert（“字符串”）
数据类型+变量
- 数据类型： number string boolean object
- 变量：var
特殊值：
- undefined 未定义 定义了变量没有赋值
- NaN 非数 将非数字的内容，强行当成数字使用
- null 空值 var a=null 清空变量使用
运算符表达式
- === 匹配内容和类型
- boolean表达式？值1：值2
条件判断
| if（“1”==1）条件成立 | |
| true | false |
| 非0 | 0 |
| 长度不为0的字符串 | '' "" |
|
undefined NaN null |
|
函数
概念：
一组具有特定（功能）的代码
内置函数：
- parseInt（值）； //将参数的值转化为整数
- typeof（值）； //获得值的数据类型
- isNan（值）； //判断值是不是非数，不关系数据类型【是数字 false 不是数字 true】
自定义函数：
函数名 函数体 函数体 参数表
语法：
- 1.function 函数名（参数列表）{函数体}
- 2.var 函数名 = function（形参）{函数体}
调用：
- 1.函数名（参数）；
- 2.函数名（）；
特点：
- 1.形参只需要写形参名，不写形参的var
- 2.函数声明，不需要明确返回值类型
- 3.函数也是一个值（数据），function类型
- 4. 函数调用的时候，函数名（参数个数，语法上不限制）
- 5.JavaScript函数，没有重载
- 6.函数内部，有一个局部变量，arguments保存函数调用的时候，传入的实际参数
JavaScript对象
Math
数学函数内置
属性：
Math.属性名
方法：
Math.方法名（）；
日期
Date日期
1.创建日期
var d = new Date（）；//获得浏览器所在电脑当前系统时间
var d = new Date（“1999-9-9”）；//构造一个指定的日期时间
2.方法
getFullYear（）；//获得4位年份
getMonth（）；//获得月份 0-11月
getDate（）；//获得日期
getDay（）；//星期0-6
数组
1.创建数组
var as = [ ];
var as = [1,2,3 ];
数组赋值 ： 数组变量名【下标】 = 值；
访问数组中的值 ： 数组变量【下标】
2.属性
length
3.数组特点
1.声明数组【】；
2.数组长度可变；
3.数组中未赋值的下标上的值：undefined
4.同一个数组中，元素类型，不受限制
4.方法
sort（）；//将数组中元素，按照字符串顺序排序
指定sort排序规则：
//比较每两个元素，传给内部函数ab，通过返回值决定排序顺序
sort（function（a，b）{
//返回值 1 -1 0
return a-b；
}）；
5.遍历数组
for（var i=0；i<数组.length；i++）{
console.log（数组【i】）；
}
对象
var person = { "id" : "100",//字符串属性 "name" : "老华",//字符串属性 "age" : 18,//数字属性 "address" : {//对象属性 "city" : "成都", }, "say" : function(){//函数类型属性 window.alert("hello"); } }; console.log(person); console.log(person.say());//1.访问对象属性 console.log(person["name"]);//2.访问对象属性
遍历对象中的所以属性
for-each
for（var v in 对象）{
//v 当前被遍历到的属性名 类型是 String “ name ” “id”
// 获得属性值： 对象[v]
}
JavaScript事件
事件驱动编程
概念：某个事件源（华哥），身上发生了特定的事件（被打了），事件监听器，出发特定代码的执行
要素：
- 事件对象：发生的事（被打）
- 事件源 ：事件发生在那个对象身上（华哥）
- 事件监听器：监听事件源身上发生特定事件，触发指定代码的运行
编程步骤
需求：点击按钮，弹框，提示“别点我”
- 1.编写标签（按钮）
- 2.事件：单机
- 3.单机事件监听器，绑定对应的代码
function test1(){ window.alert("别点我！！！！！！！！"); } <input type="button"onclick="test1()" value="华哥" />
常见的事件
| 鼠标相关 | body相关事件 | form表单控件相关事件 | |||
| onclick | 单机事件 | onKeyDown | 键盘按键按下 | onblur | 当前元素失去焦点 <input> |
| ondblclick | 双击事件 |
onKeyUp |
键盘按键抬起 | onchange | 当前元素失去焦点，并且值改变<input> |
| onmouseover | 鼠标移入 | onload | 页面加载完毕时触发 | onfocus | 当前元素获得焦点<input> |
| onmouseout | 鼠标移出 | onunload |
窗口离开时 （刷新，返回，前进，主页） |
onsubmit | 表单提交 在form标签上 |
| onmousemove | 鼠标移动 | onscroll | 页面滚动 | ||
|
onmousedown onmouseup |
鼠标按下 鼠标松开 |
onresize |
页面缩放 | ||
注意事项：
1.事件监听器绑定的时间函数内，有一个局部变量 event
- event 事件对象
- event.target 事件源（标签）
- event.keyCode 按下了那个按键 按键编码
- event.type 事件名称（“click”，“db1click”）
2.HTML默认事件效果
a：默认跳转
//禁用超链接默认事件 <a href="www.baidu.com" onclick="return false">百度一下</a>
form：默认提交数据，并且跳转
3.事件的冒泡
事件的触发会从子标签，冒泡方式，逐步触发父标签的事件
防止事件冒泡：
谷歌/ff浏览器：
event.stopPropagation();//停止事件冒泡
IE：
event.cancleBubble = true； //取消事件冒泡
DOM编程
概念：
一个HTML标签对应的一个浏览器内部的DOM对象
浏览器加载HTML标签机制：
- 1.浏览器会将HTML标签的所有标签，按照父子关系，创建出对应的DOM对象，且形成DOM树
- 2.浏览器内部的DOM对象，决定网页最终显示效果
- 3.HTML标签对应的 document对象，使用document
- 4.需要显示在网页中标签效果，必须将标签的dom对象绑定在当前document的dom树中
标签和dom对象对应关系
- 1.一个标签对应一个对象
- 2.一个标签的属性，对应浏览器内部DOM对象的属性
style属性是一个对象类型
DOM操作
1.获得dom对象
1.根据标签id获得dom对象 var xx_dom = document.getElementById("标签的id"); 2.根据标签名获得标签对象 var xx_doms = document.getElementsByTagName("标签名");//数组返回值 3.根据标签的class名字获得标签对象 var xx_doms = document.getElementsByClassName("class值"); 原则： 1.父标签拥有查找子标签的权限 父标签（document）.getEleementsxxxxx（）; 2.建议查找标签的dom对象，尽可能用父标签，进行精确查找
2.访问dom对象的属性
标签属性： dom对象.属性名 dom对象.属性名 = “”； 标签体： dom对象.innerText 标签体中间的普通文本 dom对象.innerHTML 标签体中间的所有内容（文本+标签） 样式属性： 访问类型 样式名称 js访问方式 操作文字颜色 style="color:red" dom对象.style.color 操作文字大小 style="font-size:18px" dom对象.style.fontSize 操作背景色 style="background-color:red" dom对象.style.backgroundColor 表单属性： 访问标签的输入内容 标签input的dom对象.value 下拉列表属性： select相关属性 select的dom对象.options 下拉列表中所有的选项 select的dom对象.selectedIndex 被选中的选项的下标 select的dom对象.options.length=0 清空下拉列表
DOM对象常见的操作方法
1.创建dom对象
var xx_dom = document.createElement("标签名");
2.将dom对象，添加在某个标签的内部
把tr标签的dom对象，添加在tbody内部 tbody 父标签dom对象.appendChild(子标签dom对象);//最后一个孩子位置
3.删除
本标签dom对象.remove(); //将本dom对象从网页中删除，消失
4.常用的dom遍历属性
dom对象.parentNode // 访问dom对象的亲爹 （直接父对象） dom对象.nextSibling //直接弟弟标签，可能有空白节点 dom对象.previosSibling //直接哥哥标签，可能有空白节点 dom对象.childNodes //所有儿子标签（包含空白部分）
5.正则表达式验证
作用：通过表达式验证输入的内容是否符合一定的规律（数字，小数，日期，手机号，邮箱等等）
正则表达式 ： 对象； 正则表达式.test（"判断的字符串"）;//true 或者false 语法： 正则表达式：/正则/ /正则表达式规则/.test（字符串）
BOM编程
概念：浏览器对象模型，将浏览器窗口的所有元素映射对象
属性：alert window history location document
window相关
1提示框 window4.alert("提示文字"); 2.确认框 var r = window.confirm("提示确认的文字"); 返回值 true 用户点击确定 false 用户点击取消 3.对话框 var r = window.prompt("提示文字"); 返回值 用户输入的内容 4.周期定时器 window.setInterval(周期性调用的函数，间隔时间毫秒）; 5.延迟定时器 间隔一定时间之后运行某个代码 window.setTimeout(延迟调用的函数，想个多少时间之后运行） 6.窗口的打开和关闭 window.close(); window.open("地址")
history相关
操作网页前进，刷新,后退
history.go(1|0|-1);
location相关 location.href = "url"; //给个地址，并完成跳转
请求服务器资源
- 手动浏览器地址栏
- 超链接
- form表单的action
- img src = “”
- location.href = “”
封装dom对象
/** 可以根据#ID .class 标签名 获得dom对象 $get("#td1") $get(".td") $get("td") */ function $get(selector){ //如果selector以 #开工 根据id获得 var dom = null; if(/^#/.test(selector){ dom = document.getElementById(selector.substr(1)); }else if(/^\./.test(selector){ //如果以 。 开头 获取className dom = document.getElementsByClassName(selector.substr(1)); }else{ //根据标签名获得标签 dom = document.getElementsByTagName(selector); } return dom; }
复用javascript代码
1.将js代码放在独立文件中 文件名： * .js 2.在需要使用js代码页面，引入文件 <script src = "外部js文件的路径" type = "test/javascript"></script>
基于编程的事件绑定
1.绑定事件 dom对象.onclick = function（）{函数事件触发执行} 2.在事件函数内，禁用默认事件（超链接，表单） dom对象.onclick = function{ //禁用more事件 return false; } 3.基于编程绑定 网页加载后运行的代码 window.onload = function(){ 网页加载完毕之后。//给标签绑定事件 }
