前端笔记——JavaScript
一、什么是JavaScript？
概念：JavaScript是运行在浏览器端的'脚本语言'，JavaScript是浏览器解释执行的
作用：JavaScript主要解决的是前端与用户交互的问题，包括'使用交互'与'数据交互'。
意义：负责 '页面行为'：部分动画效果、页面与用户的交互、页面功能；
二、嵌入页面的三种方式
1、行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
2、页面script标签嵌入
<script type="text/javascript">
alert('ok！');
</script>
3、外部引入——开发一般采用此方式
<script type="text/javascript" src="js/index.js"></script>
三、获取元素的方法
- 方法一
使用内置对象document上的 getElementById 方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量;
避免获取元素失败的方法：
法一：将javascript放到页面最下边；
法二：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行；（实际开发常用此方法）
- demo
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>
- 方法二
使用内置对象document上的 getElementsByTagName 方法来获取页面上的某一种标签;
获取的是一个 选择集 ，不是数组，但是可以用 下标的方式 操作选择集里面的标签元素;
- demo
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
// aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li
alert(aLi.length);
aLi[0].style.backgroundColor = 'gold';
}
</script>
....
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
四、常用内置对象
document
document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址(需要服务器环境)
location
window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值
Math
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
五、调试程序的方法
1、alert——以弹框的方式输出
2、console.log——在浏览器的控制台输出
3、document.title——在标签页的头部输出
六、操作元素属性
- 流程
获取元素
读取属性
写属性
- 属性的写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
- 操作属性的二种方法
*① 通过“.” 操作
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.XXX" id="link1">XXX</a>
- ②通过“[ ]”操作
<script type="text/javascript">
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 读取属性
var sVal1 = oInput1.value;
var sVal2 = oInput2.value;
// 写(设置)属性
// oA.style.val1 = val2; 没反应
oA.style[sVal1] = sVal2;
}
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.XXX" id="link1">XXX </a>
特别地——innerHTML
功能：innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML = '<a href="http://www.XXX">XXX<a/>';
}
</script>
......
<div id="div1">这是一个div元素</div>
七、基础知识点
① 变量
- 定义变量需要用关键字 'var'
- 同时定义多个变量可以用","隔开，公用一个‘var’关键字
demo
var iNum = 123;
var sTr = 'asd';
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var iNum = 45,sTr='qwe',sCount='68';
变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null;
1种复合类型：object
变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格：——业界常用命名习惯
对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck
② 函数
- 函数定义与执行
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
</script>
- 变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript">
fnAlert(); // 弹出 hello！
alert(iNum); // 弹出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
- 提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。
<!--行间事件调用函数 -->
<script type="text/javascript">
function fnAlert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = fnAlert;
function fnAlert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">
- 函数传参
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
- 函数'return'关键字
函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
③ 条件语句
- 运算符
1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
- if else
var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
sTr = '大于';
}
else
{
sTr = '小于';
}
alert(sTr);
- 多重if else语句
var iNow = 1;
if(iNow==1)
{
... ;
}
else if(iNow==2)
{
... ;
}
else
{
... ;
}
- switch语句
多重if else语句可以换成性能更高的switch语句
var iNow = 1;
switch (iNow){
case 1:
...;
break;
case 2:
...;
break;
default:
...;
}
④ 循环语句
- for循环
for(var i=0;i<len;i++)
{
......
}
- while循环
var i=0;
while(i<8){
......
i++;
}
⑤ 数组及操作方法
- 定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];
- 操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
5、unshift()和 shift() 从数组前面增加成员或删除成员
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4
6、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
7、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
8、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
- 多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
⑥ 字符串处理方法
1、字符串合并操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //弹出36
alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 弹出12abc
2、parseInt() 将数字字符串转化为整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(sNum03) //弹出数字12 将字符串小数转化为数字整数
3、parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
4、split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");
alert(aRr); //弹出['2017','4','2']
alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
5、charAt() 获取字符串中的某一个字符
var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #
6、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2
7、substring() 截取字符串
用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl
8、toUpperCase() 字符串转大写
var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF
9、toLowerCase() 字符串转小写
var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //弹出abcdef
字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);
⑦ 类型转换
1、直接转换 parseInt() 与 parseFloat()
2、隐式转换 “==” 和 “-”
if('3'==3)
{
alert('相等');
}
// 弹出'相等'
alert('10'-3); // 弹出7
3、NaN 和 isNaN
alert( parseInt('123abc') ); // 弹出123
alert( parseInt('abc123') ); // 弹出NaN
⑧ 封闭函数
- 一般定义的函数和执行函数：
function myalert(){
alert('hello!');
};
myalert();
- 封闭函数：
(function myalert(){
alert('hello!');
})();
封闭函数的好处 :
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函 数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全;
⑨ 匿名函数
- 匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function myalert(){
alert('hello!');
}()
