【JavaScript】JavaScript编程
<h2 id="javascript-编程">JavaScript 编程</h2><h3 id="1javascript---基本语法数据类型运算符表达式流程控制">1).JavaScript - 基本语法、数据类型、运算符表达式、流程控制</h3>
<pre><code>目的：实现网页动态效果、用输入数据的格式校验，减轻服务器(Tomcat DB)校验数据的压力
介绍：①基于浏览器运行的面相对象的编程语言
②弱类型编程语言.[变量类型，引用类型只有一个 var。例如：var a = 1;]
（1）JavaScript基本语法
①javascript可以书写在*.html网页中。【浏览器运行javascript】
②代码基本格式：<script> JavaScript代码 </script> （一般放在head标签内、和body标签的底部）
③运行：
a. 浏览器打开网页，解析运行
b. 运行方式: 解释型语言，直接浏览器解释执行
c. 运行顺序： 自上而下解析，运行的
④浏览器输出：
a. 控制台输出:console.log("字符串")`
b. 网页中输出内容: document.write("字符串")
c. 提示框的方式展示: window.alert("字符串")
（2）数据类型+变量
①数据类型:
number 数字 例如：1、 1.2
string 字符串类型 例如："字符串" 或 '字符串'
boolean 布尔类型 例如：truefalse
object 对象类型
②变量:
定义变量: var 变量名;
赋值： 变量名 = 值;
定义变量赋值: var a = 10;
③特殊值：
undefined 未定义 场景：定义了变量，没有赋值。
NaN 非数 场景：将非数字的内容，强行当做数字使用。
null 空值 场景：var a = null; //清空变量。
（3）运算符表达式
①运算符:+ - * / % 、> < >= <= == && || 、 === (全等,不单比较内容还比较类型)，支持位运算符(例如：>>)
注意: 10/3 结果 3.333333
3 == "3" 结果 true
3.0 == “3” 结果 true（主要取决于浏览器对浮点数存储的字面值）
3 === “3” 结果 false
8 >> 2 结果 2 (效率高)
②三元运算符
boolean表达式?值1:值2
（4）流程控制
if () {}
If () {} else {}
if () {} else if () {} else {}
switch - case
while ( ){循环代码}
do - while
for (初始化; 条件 ; 步长) {循环体}
注意:
条件判断： if('1'==1) true
if(1) true
if(0) false
if(“abc”) true 字符串长度不为0
if(“”) false
if(undifiend/NaN/null) false
</code></pre>
<h3 id="2javascript---函数内置函数自定义函数">2).JavaScript - 函数(内置函数、自定义函数)</h3>
<pre><code>概念： 一组具有特定”功能”的代码
（1）内置函数
parseInt(值); 将参数的值转化为整数
typeof(值); 获得值的数据类型。
isNaN(值); 判断值是不是非数，不关系数据类型【是数字false 不是数字 true】
（2）自定义函数
函数定义：
①定义方式1：
function 函数名(参数名1,参数名2) {
函数体
(return 值;) }
②定义方式2 :[匿名函数]
var 函数名 = function(形参) {函数体}
③定义方式3：构造方法定义函数
var 变量名/函数名 = new Function("a","b","return a+b"); //函数
函数调用：
①函数名(参数)
②函数名()
（3）函数特点：
①形参只需要写形参名，不写形参的var。例如：function f(a, b){}
②函数声明，不需要明确返回值类型
③函数也是一个值[数据]，function类型 （重要）
定义：var 函数名 = function(参数1，参数2){函数体} //此”变量”的类型为function类型
④函数调用的时候，函数传入参数个数，语法上不限制
说明：如果不传，使用时会是undefined；若果传少于参数个数，自动依次赋值，后面的为undefined
如果传入的参数的个数多与参数表的参数个数，只匹配前面的；
注意：函数体内有一个内置局部变量arguments，保存了所有参入方法的参数，⑥
⑤JavaScript函数，没有重载。此特性可依据:
function f() {} ----> var f = function(){};
function f(a, b) {} ----> var f = function(){a, b};
⑥函数内部，有一个局部变量，arguments 保存函数调用的时候，传入的实际参数。
</code></pre>
<h3 id="3javascript---mathdatestring数组">3).JavaScript - Math、Date、String、数组</h3>
<pre><code>JavaScript对象
（1）Math：数学函数
属性: Math.属性名; 例如：Math.PI 圆周率
方法： Math.方法名(); 例如：Math.sqrt(x);//对x求平方根
Math.random();//随机生成一个0~1的数字
（2）Date：日期
①创建日期：
var d = new Date(); 获得浏览器所在电脑的当前系统时间。
var d = new Date("1999-9-9"); 构造一个指定的日期时间
②方法：
getFullYear(); 获得4位年份
getMonth(); 获得月份 1月~12月份对应的0~11
getDate(); 获得日期
getDay(); 0 (星期日)~6 (星期六)
（3）String：字符串
①获得字符串：var a = "zzzzz";
②属性：例如length 字符串的长度
③方法：例如charAt(i); 获得i下标的字符
（4）数组[重要]
①创建数组：
var as = [];
var as = ;
数组赋值：数组变量名[下标] = 值;
访问数组中的值: 数组变量[下标]
②属性:
length //数组的长度;
③JavaScript数组特点
a. 声明数组[];
b. 数组长度可变;
c. 数组中未赋值的下标上的值：undefined
d. 同一个数组中，元素类型不受限制
④方法:
sort(); 将数组中的内容，按照字符串的方式排序
指定sort排序规则:
方式：按照如下规则排序，会将每两个比较元素，传给内部的函数a,b，通过返回值决定排序的顺序
sort(function(a,b){
return a-b; //返回值 1 -1 0
});
⑤遍历数组
for(var I = 0; I < 数组名.length; i++) {
数组名; //通过下标取值
}
倒着遍历：
for(var I = 数组名.length - 1; I >= 0; i--) {
console.log(数组名); //控制台打印
}
4).JavaScript - 面向对象
没有类概念，没对象的模板，所有不能new对象
①创建JavaScript对象
方式1：var p = {};
方式2：var p = { "属性名":值,"属性名":值 };
例如：var person = {
"id" : "10001",
"函数名" : function(){} //成员方法
“对象名” : { //方法属性为一个对象类型
“属性名” : 值 …
};
};
②给对象添加属性:
对象.属性名 = 值;
③访问对象的属性：
对象.属性名
对象["属性名"]
④调用对象的方法
对象.函数属性名();
⑤this关键字
var person = {
"name" : "zhi",
"方法名":function(){
console.log(this.name);//this----代表当前person对象
}
}
⑥遍历对象中的所有属性
语法: for-each
for( (var)vin 对象 ) {
//v是当前被遍历到的属性名, 是String类型，例如：”name"、"id"
//获得属性值: 对象 , 因为-->对象.”name”不能表示属性
}
</code></pre>
<h3 id="5javascript---事件">5).JavaScript - 事件</h3>
<pre><code>事件驱动编程
（1）常见的事件
① 鼠标相关
onclick 单击事件
ondblclick 双击事件
onmouseover 鼠标移入
onmouseout 鼠标移出
onmousemove 鼠标移动
onmousedown 鼠标按下
onmouseup 鼠标松开
② body相关事件
onKeyDown 键盘按键按下
onKeyUp 键盘按键抬起
onload = fun//页面加载完毕触发[重要]
onunload 窗口离开时触发（刷新，返回，前进，主页...）
onscroll 页面滚动 [应用: ]
onresize 缩放页面
③ form表单控件相关事件[最重要]
onblur 当前元素失去焦点 <input>标签
onchange 当前元素失去焦点，并且值改变时 <input>标签
onfocus 当前元素获得焦点时 <input>标签
onsubmit 表单提交时 <form>标签
（2）事件注意事项
① 事件监听器绑定的时间函数内，有一个局部变量 event
事件对象event:
event.target ---- 事件源(标签)
event.keyCode ----按下了哪个按键
event.type ---- 事件名称("click","dblclick")
② HTML默认事件效果
禁用超链接默认事件:
<a href="http://www.baidu.com" onclick="return false">百度一下</a>
禁用form默认事件。
<form onsubmit="return false" > </form>
③ 事件冒泡：
事件触发会从子标签，冒泡方式，逐步触发父标签的事件动作
如果防止事件冒泡:
谷歌/FF 浏览器: event.stopPropagation();//停止事件冒泡
IE: event.cancleBubble = true;//取消事件冒泡
</code></pre>
<h3 id="6javascript---dom编程开发规范重要基于编程的事件绑定">6).JavaScript - DOM编程、开发规范[重要]、基于编程的事件绑定</h3>
<pre><code>（1）DOM编程概要
概念：D(document 网页)O(Object)M(Model)
一个HTML标签对应的一个浏览器内部的 DOM对象
浏览器加载HTML标签机制:
标签和dom对象对应关系：
（2）DOM操作
访问DOM对象
获得DOM对象:
①根据标签的id获得dom对象： var xx_dom = document.getElementById("标签的id");
②根据标签名获得标签对象： var xx_doms = document.getElementsByTagName("标签名");//返回数组
③根据标签的class名字获得标签对象: var xx_doms = document.getElementsByClassName("class值");
原则：①父标签拥有查找子标签的权限 : 标签(document).getElementsxxxxx();
②建议查找标签的dom对象，尽可能用父标签，进行精确查找。
补充：通过事件函数传递标签dom对象 ---> 可以使用this关键字代替当前的标签的dom对象
访问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对象常见的操作方法
① 创建DOM对象：var xx_dom = document.createElement("标签名");
② 将dom对象，添加在某个标签的内部
把tr标签的dom对象，添加在tbody内部
tbody(亲爹)父标签dom对象.appendChild(子标签dom对象); //最后一个孩子位置
② 删除: 本标签dom对象.remove();//将本dom对象从网页中删除，消失。
④ 常用的dom遍历的属性
dom对象.parentNode 访问Dom对象的亲爹(直接父标签)
dom对象.nextSibling 直接弟弟标签(可能有空白节点)
dom对象.previosSibling 直接哥哥标签(可能有空白节点)
dom对象.childNodes dom对象的所有儿子标签dom对象。(包含空白部分)
（3）开发规范[重点]
①变量定义规范(函数定义规范)
将逻辑相关的多个js函数定义在一个对象中
var userTable = {
"addUser":function(){},
"removeUser":function(){}
}
调用: userTable.addUser()
②基于编程事件绑定
获得标签标签绑定事件代码，放在网页加载完毕之后再运行body 的onload
事件绑定[重点]：
a. 基于标签的事件绑定
<标签 onclick="事件函数()"></标签>
b. 基于编程的事件绑定
标签+事件监听器+事件函数
① 先获得dom对象。
var dom = document.getElementById("");
② 使用dom的事件监听器属性绑定事件函数
dom.onclick = function(){
// this 代表当前事件源对象dom对象。
alert("dom被点击了情况下，执行了");
}
（4）基于编程的事件绑定
① 绑定事件：dom对象.onclick = function(){函数事件触发执行}
②在事件函数内，禁用默认事件(超链接，表单)
dom对象.onclick = function(){
return false; //禁用默认事件
}
③基于编程绑定 网页加载后运行的代码
window.onload = function(){
网页加载完毕之后。//给标签绑定事件
}
</code></pre>
<h3 id="7javascript---正则表达式">7).JavaScript - 正则表达式</h3>
<pre><code>作用：
通过表达式验证输入的内容是否符合一定的规则(数字，小数，yyyy-MM-dd，手机号，邮箱)
正则表达式.test("判断的字符串");//true 或者false
语法： /正则表达式规则/.test(字符串)
用法：
例1： var email = "huanghao@qq.com";
① 判断email中是否包含@符号： /[@]/.test(email) //true
② 判断email中是否包含 "@qq.com"：console.log(/@qq.com/.test(email));//true
例2： var age = "999";/
判断age中是否是数字：/^\d{3}$/.test(age); //true
例3： var birth = "199-9-9";
判断birth字符串中是否是日期格式：/^\d{4}-\d{1,2}-\d{1,2}$/.test(birth);
例4： var price = "123.23";
判断是否为小数：/^-?\d+\.\d+$/.test(price); // ‘\.’为转义的点
例5： var mobile = "15533349688";// 1
判断是否为手机号：/^1(3|5|6|7|8|9)\d{9}$/.test(mobile);
例6： /^[\u4e00-\u9fa5]$/.test(…)
判断是否包含一个汉字
参考文档：
查找某个范围内的字符
| | 查找方括号之间的任何一个字符 |
| | 查找任何从 0 至 9 的一个数字 |
| | 查找任何从小写 a 到小写 z 的一个字符 |
| | 查找任何从大写 A 到大写 Z 的一个字符 |
| | 查找任何从大写 A 到小写 z 的字符 |
| [^adgk] | 查找给定集合外的任何一个字符 |
|(red\|blue\|green) | 查找任何指定的一个选项 |
| | 一个数字或者字母(大小写) |
| [\u4e00-\u9fa5] | 匹配包含任意一个汉字 |
| | a-d 或者 m-z |
元字符
| \w | 查找单词字符，等价于 |
| \W | 查找非单词字符。 |
| \d | 查找数字，等价于 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
量词+边界
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 个 n 的序列的字符串。|
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
</code></pre>
<h3 id="8javascript---bom编程">8).JavaScript - BOM编程</h3>
<pre><code>BOM：B(browser) O(Object) M(Model) 浏览器对象模型。是将浏览器窗口的所有元素映射对象
例如：
窗口 window 注：window中的属性的访问可以不写window
浏览器历史记录 window.history
地址栏 window.location
作用：通过javascriot代码操作浏览器的行为(刷新，弹框，警告框，对话框，确认框，定时器，地址栏跳转，窗的打开和关闭...)
（1）window相关
window的常见属性：
alert
history
location
document
①提示框：window.alert("提示文字");
②确认框：var r = window.confirm("提示确认的文字");
返回值: true 用户点击确定
false 用户点击取消
③对话框:var r = window.prompt("提示文字");
返回值：用户输入的内容。
④周期定时器：window.setInterval(周期性调用的函数，间隔时间毫秒);
⑤延迟定时器：window.setTimeout(延迟调用的函数,相隔多少时间之后运行);
⑥窗口的打开和关闭：
window.close();//关闭当前窗口【有的浏览不让关】
window.open("地址");//打开新的窗口，地址栏显示。
（2）history相关
操作网页前进，后退，刷新：
history.go(1|0|-1);前进刷新后退
（3）location相关
地址栏地址：location.href = "uri"; //给个地址, 并完成跳转。
总结：请求服务器资源方式
①手动浏览器地址栏
②超链接
③form表单的action
④location.href =
⑥img src=""
</code></pre><br><br>
来源：https://www.cnblogs.com/jwnming/p/13634936.html
頁:
[1]