这是原笔记的追加转写。 —— 2019.12.24

JS 是一门面向对象的语言,用来处理网页的一些事件。

引入

通过内联或外部引入 JS 代码:

<script type="text/javascript">
	alert("hello");
</script>

<script src="myScript.js"></script>

变量声明和类型

变量,弱类型直接 var:

var a = 123; //number
var a1 = 3.1415926;
var a2 = "js"; //string
var a3 = 'k';
var a4 = true; //boolean
var a5 = new Date(); //object

// null & undefind

alert(typeof a); //输出数据类型
  • js 可以放在页面的任意位置
  • 变量名大小写敏感
  • 实际上没有字符和字符串的区分
  • 同名变量以最新声明为准
  • null 用来区分默认的 undefind,好习惯:声明 & 赋值
  • 变量强转:alert(typeof Number(a));,失败返回 NaNBoolean()非0的都是 true

运算符

  • 算术运算符还是 + - * / %+ 对数字做加法,对字符串做连接,默认就会尝试强转为数字
  • 逻辑运算符 ! & && | ||
  • 关系运算符,注意一下 ===== 就可以了,前者会自动 Number 转型判断,后者不会
  • 自增运算符注意一下 ++aa++ 的区别就行了

逻辑结构

和c一样一样的。。

  • if(){} else if(){} else{}
  • switch (){case "a": ... break; default: ... break;}
  • for(){}while(){}do{} while()

然后多一个写网页的语句:document.write(1 + "\*" + j + "=" + i\*j);

数组

声明:

var arr = new Array();
var arr2 = new Array(5);
var arr3 = [1,2,3,4,5];

数组的第一个元素是数组:

var arr = new Array([5,6]);

js 的数组可以存任意类型的数据,而且是没有下标限制的,相对 Java 来说挺爽。。

var arr = [];
arr[0] = 2;
arr[1] = "abc";
arr[2] = true;
arr[3] = new Date;
arr[10] = "haha";

alert(arr);
alert(arr[10]);

length 属性,甚至可以直接赋它的值(如果小于原数组长度,截取前面,丢弃后面)。
应该说是一个很灵活的语言,但也因为灵活,导致的一点不严谨吧,不过挺喜欢的。

var arr = [];
arr[10] = "abc";
alert(arr.length);

arr.length = 100;
alert(arr.length);

遍历(for和它的语法糖):

var arr = [1,"abc",3,"c",5];
alert(arr);

for(var i=0;i<arr.length;i++){
	alert(arr[i]);
}

for(var i in arr){
	alert(arr[i]);
}

数组常用操作

concat() 连接数组,长度为元素的总和:

var arr=[1,"abc","张三","12"];
var b=["今天","适合"];
var c="js";
var d=arr.concat(b,c,c);
alert(d);
alert(d.length);

join() 以指定间隔符将数组转换为字符串:

var b=arr.join("-");

pop() 移除数组的最后一个元素并返回它:

var ele=arr.pop();

push() 向数组追加元素,并返回数组的新长度:

var ln=arr.push("xxx");
var ln2=arr.push(["xxx","xxx2"]);
  • 如果追加的也是一个数组,整体作为一个角标存在(二维数组)

splice() 删除指定位置的元素,并返回已移除的元素:

var arr2=arr.splice(1,3);

其他:

reverse()	返回一个元素顺序反转的 Array 对象
shift()	移除数组的第一个元素并返回它
unshift() 将元素插入数组开头并返回该数组
sort()	对数组进行适当排序

函数

使用函数封装代码,JS 的函数声明和执行一体,函数也是对象。

function test1(a1,a2){
	...
	return "xxx";
}

var test2 = new Function("a1","a2","alert('xxx')");
var test3 = function(a1,a2){}
  • 注意一下形参和实参的区别
  • 传参的时候,因为有默认值,所以形参可以不赋值,但实参是要依次输入的
  • 默认的返回值是 undefined,相当于声明一个变量没有赋值

执行一下(执行符):

alert(test1); //打印函数体,其实就是作为一个变量存在
alert(test1()); //真正意义上的执行

函数作为实参传递:

function testobj(a){
	alert(a());
}

var testParam = function(){
	alert("xxx");
}

testobj(testParam);

自定义类和对象

类实际上是一种结构体的样子:

function Person(name,age){
	this.name = name;
	this.age = age;
	this.test = function(a){
		alert(a);
	}
}

var p1 = new Person("张三",32);
alert(p1.name);

类的继承—— prototype 指定类的公共属性:

Person.prototype.test = function(){alert("嘿嘿")};

对象用来存储整体数据:

var obj = {};
var obj = new Object();

obj.name = "张三";
obj.age = 23;
obj.test = function(){
	alert("xxx");
}

常用函数和对象

String 对象:

toUpperCase()	//大写转换
toLowerCase()	//小写转换

substr(0,1)	//从0开始截取1长度的字符串
substring(0,1)	//从0截到1位置前的字符串(含头不含尾)

indexOf()	//返回指定字符第一次出现的位置
lastIndexOf()	//返回指定字符最后出现的位置

Date 对象:

var d = new Date;

alert(d.getYear());	//1900年起至今的年份数
alert(d.getFullYear());	//当前年份

alert(d.getMonth()+1); //当前月份(从0开始数,需要+1)
alert(d.getDate()); //当前日期
alert(d.getDay()); //当前星期(星期日是0)

alert(d.getHours()); //当前小时数
alert(d.getMinutes()); //当前分钟数
alert(d.getSeconds()); //当前秒数
  • 这里获取的是客户端的时间,所以不能作为系统功能校验

Math 对象:

Math.random()	//[0,1)的随机数
Math.floor()	//向上取整
Math.ceil()	//向下取整
Math.round()	//四舍五入

Global 对象:

eval("var a=123;")	//将字符串转换为 js 代码执行,可实现远程变更代码
isNaN()	//强转后:true-不是数字,false-是数字
parseInt()	//解析字符串,并返回一个整数(会自动转换进制)
parseFloat()	//同上,返回一个浮点数(若第一个字符不是数字,会返回 NaN)

JS 事件机制

onclick=""	//单击
ondblclick=""	//双击

onmouseover=""	//鼠标悬浮
onmousemove=""	//鼠标移动
onmouseout=""	//鼠标移出

onkeyup=""	//键盘弹起
onkeydown=""	//键盘按下

onfocus=""	//获取焦点
onblur=""	//失去焦点

onload=""	//页面加载成功
onchange=""	//值被改变
  • JS 事件只有在当前 HTML 元素上有效
  • 一个 HTML 元素可以绑定多个事件
  • 事件重合时会被同时触发
  • 事件触发后,如果有函数的返回值是 false,并返回给了事件,HTML 标签本身的功能会被阻断(比如超链接跳转)

超链接调用 JS 函数:

<a href="javascript:testHref();"></a>

Window 对象

BOM 用来规范不同浏览器对 JS 的支持,其通过 window 对象具体实现,并可以有不同的展现形式。

window.alert("");	//警告框
window.confirm("");	//确认框,确定返回 true,取消返回 false
window.prompt("");	//输入框,确定返回输入文本,取消返回 null,默认是空

//定时执行,返回其 id
id = window.setTimeout(function(){
	alert("xxx");
},3000);

//间隔执行,返回其 id
id = window.setInterval(function(){
	alert("xxx");
},3000);

//停止计时器
window.clearTimeout(id);
window.clearInterval(id);
  • window. 可以省略,这些相当于浏览器自带的库

关于子页面:

window.open('son.html','newwindow','height=800,width=600');	//打开,可以有更多的配置参数
window.close();	//关闭

window.opener.testFather();	//调用父页面的 testFather()

其他常用属性:

window.location.href="https://sogou.com";	//跳转资源
window.location.reload();	//重新加载资源

window.history.forward();	//前进
window.history.back();	//后退
window.history.go(-2);	//跳转到指定记录,0为刷新

window.screen.width;	//获取屏幕宽度
window.screen.height;	//获取屏幕高度
window.navigator.userAgent;	//获取UA

Document 对象

Document 对象用来对 HTML 元素进行操作:

window.document.getElementById();
window.document.getElementByName();
window.document.getElementByTagName();
window.document.getElementByClassName();
  • 使用先于创建,document 操作的是浏览器封装好的对象,对内存直接操作(?)

间接操作:

var childs = showdiv.childNodes;
var parent = showdiv.parentNodes;
var preEle = showdiv.previousSibing;
var nextEle = showdiv.nextSibing;

操作元素的属性:

[元素对象名].[属性名]	//返回元素属性值
[元素对象名].[属性名] = [属性值]	//修改属性值

[元素对象名].getAttribute("[自定义属性名]")	//获取自定义属性
[元素对象名].setAttribute("[自定义属性名]","[属性值]")	//修改自定义属性
  • 尽量不要修改 name 和 id 的值
  • 自定义属性使用函数访问,对于不存在的属性会作为 undefind 存在
  • getAttribute() 对于固有属性获取的是它的默认值

操作元素的内容:

div.innerHTML();	//返回当前对象的所有内容
div.innerTEXT();	//返回当前对象的所有文本内容(不包括HTML标签)

div.innerHTML()+"xxx";	//追加

操作元素的样式:

showdiv.style.backGroundColor = "#fff";	//增加&修改属性
showdiv.style.border = "";	//删除属性
  • JS 实际上把 CSS 也转换为对象来使用了
  • 样式的追加实际上是以内联样式的优先级把原属性覆盖了

操作元素的 class:

div.className;	//获取
div.className = "xxx";	//添加、修改
div.className = "";	//删除

操作元素的文档结构:

div.innerHTML = div.innerHTML+"xxx";	//增加节点
div.innerHTML = "";	//删除节点


//使用 removeChild 删除子节点
<div><input type='button' value='删除' onclick='delInp(this)'/></div>

function delInp(btn){
	var showdiv = document.getElementById("showdiv");
	var cdiv = btn.parentNode;
	showdiv.removeChild(cdiv);
}

//追加 input 元素对象并放到 showdiv 里去
var inp = document.createElement("input");
inp.type = "file";
showdiv.appendChild(inp);

btn.onclick = function(){
	showdiv.removeChild(inp);
}
  • 实际上完全可以用 js 来布局页面

JS 操作 form 表单

文字表单:

var fm = document.getElementById("fm");	//获取 form 对象
var frm = document.frm;	//使用 name 来获取

fm.element;	//获取 form 下所有表单元素对象的集合
fm.submit();	//提交表单
fm.reset();	//重置表单
fm.action = "http://baidu.com/s";	//动态改变表单提交的位置
fm.method = ""	//动态改变提交方式

readonly="readonly"	//数据只读,可以提交
disabled="disabled"	//不可进行任何操作,数据无法提交

多选框:

//获取多选元素数组
var favs = document.getElementByName("fav");

//遍历 checked(全选)
for(var i=0;i<favs.length;i++){
	favs[i].checked = true;
}

下拉框:

sel.value;
sel.options;

闭包

闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰,即形成一个不销毁的栈环境。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3