JavaScript
JavaScript使用
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body>和 <head> 部分中。
<script>标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript：
实例：
<script>
alert("My First JavaScript");
</script>
<body> 中的 JavaScript
JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
实例：
<!DOCTYPE html>
<html>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
三种输出方式
1、弹出警告框
alert('Hello Word');
2、在浏览器页面显示
document.write（'Hello Word'）;
如果在文档已经执行完毕后执行此方法，整个HTML页面将会被覆盖
3、控制台输出
console.log('Hello word');
三种嵌入方式
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>
定义变量和数据类型
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'
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(){
return alert('hello!');
}
// 函数执行
fnAlert();
</script>
实例(有参)：
<script>
传递参数时，三者个数必须一致
function fnAlert(a,b){
return alert(a+b)
}
fnAlert(10,20)
</script>
条件语句
通过条件来控制程序的走向，就需要用到条件语句。
条件运算符
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
获取元素和点击事件
获取元素\查找id
<body>
<h1 id="app">呵呵哒</h1>
</body>
<script>
//如果找到该元素，该方法将以对象（在 oId中）的形式返回该元素
//如果找不到，则oId将包含null
var oId = document.getElementById('app')
</script>
替换HTML里面的内容
oId.innerHTML = '哈哈'
//输出结果为哈哈
通过JS修改HTML样式
//通过js修改h1标签里的样式
oId.style.color = 'pink'
//通过js修改样式和css一样，但css里的-去掉换成大写字母
oId.style.fontSize = '50px'
通过js修改class名
<body>
<h1 id="app" class='red'>呵呵哒</h1>
</body>
<script>
oId.className = 'blue'
</script>
读取属性值
<body>
<input type="text" id="txt" value="哈哈" />
</body>
<script>
var oTxt = document.getElementById('txt')
document.write(oTxt.value)
</script>
点击事件
<body>
<input type="button" id="bt" value="按钮"/>
</body>
<script>
var oBt = document.getElementById('bt')
oBt.onclick = function(){
alert('我被点击了！')
}
</script>
数组
定义数组
//对象的实例创建
var aList = new Array
操作数组中数据的方法
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、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
6、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
7、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;
批量操作数组中的数据，需要用到循环语句
以列表形式循环输出
<body>
<ul id="list">
</ul>
</body>
<script>
var oList = document.getElementById('list')
var movie = [1, 2, 3, 4, 5, 6]
for(var i = 0; i < movie.length; i++) {
oList.innerHTML += '<li><a href = "#">' + movie[i] + '</a></li>'
}
</script>
变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
// 定义全局变量
var a = 12;
function myalert()
{
// 定义局部变量
var b = 23;
alert(a);
// 修改全局变量
a++;
alert(b);
}
myalert(); // 弹出12和23
alert(a); // 弹出13
alert(b); // 出错
</script>
定时器
定时器在javascript中的作用
1、定时调用函数
2、制作动画
定时器类型
1、setTimeout 只执行一次的定时器
2、clearTimeout 关闭只执行一次的定时器
3、setInterval 反复执行的定时器
4、clearInterval 关闭反复执行的定时器
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="开启单次定时器" id="btn1" />
<input type="button" value="开启多次定时器" id="btn2" />
<input type="button" value="关闭单次定时器" id="btn3" />
<input type="button" value="关闭多次定时器" id="btn4" />
</body>
<script>
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oBtn3 = document.getElementById('btn3')
var oBtn4 = document.getElementById('btn4')
/*
* 关闭定时器要点：
* 1、在全局声明一个空变量
* 2、在当前的定时器中，以修改方式赋值
* 3、后面的函数就可以获取此变量
*/
var tnt = null;
oBtn1.onclick = function() {
//单次定时器
tnt = setTimeout(function() {
alert('炸了')
//两秒
}, 2000)
}
//多次定时器
oBtn2.onclick = function() {
tnt = setInterval(function() {
alert('炸了')
}, 2000)
}
//关闭单次定时器
oBtn3.onclick = function() {
clearTimeout(tnt)
}
//关闭多次定时器
oBtn4.onclick = function() {
clearInterval(tnt)
}
</script>
</html>
入口函数
等整个页面加载完后，再执行这个函数里面的代码
把js代码放到window.onload = function(){}之中
事件属性
元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有鼠标点击事件属性(onclick)，鼠标移入事件属性(onmouseover),鼠标移出事件属性(onmouseout),将函数名称赋值给元素事件属性，可以将事件和函数关联起来。
字符串处理方法
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、将数字字符串转为整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(parseInt(sNum03)) //弹出数字12 将字符串小数转化为数字整数
2、将数字字符串转为小数
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、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2
6、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
7、字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);
封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
封闭函数的作用 ：
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
function aa() {
alert('aa1')
}
aa()
//封闭函数写法，解决命名冲突
;
(function() {
function aa() {
alert('aa2')
}
aa()
})()
</script>
</html>
网友评论