JavaScript 介绍
JavaScript 是运行在浏览器端的脚本语言，JavaScript 主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的。
前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
HTML 引入 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>
JS 中变量、数据类型及基本语法规范
定义变量需要用关键字 '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
6、1种复合类型：
object
变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字
JS 注释
<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1、...
2、...
*/
var sTr = 'abc123';
</script>
获取元素的方法
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量
例如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
注意！！
如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载
解决方案：
1、将javascript放到页面最下边
2、将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。(一般都用第二种方法)
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写
属性写法
1、如果能够在 HTML 页面正常看到的属性, 我们在 JS 中可以同名获取
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
读取属性:
var 变量 = 元素.属性名
改写属性:
元素.属性名 = 新属性值
innerHTML:
innerHTML 可以读取或者写入标签的文本部分
JS部分:
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML = '<a href="http://www.baidu.com">百度首页<a/>';
}
</script>
<div id="div1">这是一个div元素</div>
事件属性
标签上除了可以添加 样式, id, class等属性之外, 还可以添加事件属性
最常用的事件属性有:
- 鼠标单击事件 onclick
- 鼠标双击事件 ondblclick
- 鼠标移入事件 onmouseover
- 鼠标移除事件 onmouseout
函数
1. 函数定义与执行
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
</script>
变量 与 函数 预解析
JavaScript 解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为 undefined
举个栗子：
<script type="text/javascript">
fnAlert(); // 弹出 hello！
function fnAlert(){
alert('hello!');
}
alert(iNum); // 弹出 undefined
var iNum = 123;
</script>
2. 函数传参
Javascript 的函数中可以传递参数
<script type="text/javascript">
function fnAlert(a){
alert(a); //弹出12345
}
fnAlert(12345);
</script>
3. 函数的返回值
JavaScript 中函数使用 return 返回内容
函数中 'return' 关键字的作用：
- 返回函数中的值或者对象
- 结束函数的运行
4.匿名函数
没有名字的函数, 称为匿名函数
我们可以通过将函数名赋值给事件属性的形式, 将事件和函数关联起来，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式
举个栗子：
<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>
条件语句
1、运算符
1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(逻辑与 同真为真，一假则假)、||(逻辑或 全假为假 一真则真)、!(逻辑非 取反)
注意！！
==：只要求值相等(在比较时会转换数据类型) 如："1" == true (结果为true)
===：要求值和类型都相等 如："1" === true (结果为false)
2、条件语句表达式
使用格式一:
if (判断条件) {
// 如果条件为 true, 进入这里执行
执行的语句01
...
}
使用格式二:
if (判断条件) {
// 如果条件为 true, 进入这里执行
执行的语句01
...
} else {
// 如果条件为 false, 进入这里执行
执行的语句01
...
}
使用格式三:
if (判断条件01) {
// 如果第一个条件为 true, 进入这里执行
执行的语句01
...
} else if (判断条件02) {
// 如果第二个条件为 true, 进入这里执行
执行的语句01
...
}
数组及操作方法
数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的, 这里的数组就相当于python 中的列表
1.定义数组的方法
数组定义形式:
第一种:
var 数组名 = new Array(元素一, 元素二, 元素三...)
第二种:
var 数组名 = [元素一, 元素二, 元素三...]
2.数组常见的操作方法
1、获取数组的长度
一般我们获取数组长度使用: length
var aList = [1,2,3,4];
// 打印输出数组 aList 的长度
console.log(aList.length)
2、下标索引的使用
var aList = [1,2,3,4];
console.log(aList[0]);
3、join(分隔符)
var aList = [1, 2, 3, 4]
var newList = aList.join('-') //使用-将数组中的每个元素分隔
console.log(newList) //获取新的一个值
console.log(typeof(newList)) //这个值的类型是string '1-2-3-4'
4、push( ) 和 pop( )
从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5); //在数组最后增加一个元素
console.log(aList) //打印结果是[1,2,3,4,5]
aList.pop()；//在数组最后移除一个元素
console.log(aList) //打印结果为[1,2,3,4]
5、reverse( )
将数组反转
var aList = [3,2,1,4];
aList.reverse();//反转数组
console.log(aList) //打印结果为[4,1,2,3]
6、indexOf( )
返回数组中元素第一次出现的索引值:
如果有, 则正常返回索引值
-
如果检索的内容不存在于数组中, 则返回 -1
var aList = [1,2,3,4,1,3,4];
console.log( aList.indexOf(4) ) //第一次出现元素4的下标为3
console.log( aList.indexOf(5) ) //不存在元素5，打印结果为-1
7、splice( )
在数组中增加或删除成员（任意位置）
使用格式:
数组名.splice(index,howmany,item1,.....,itemX)
index:必需。整数（可正可负（数组中最后一个元素下标为-1），都是从指定位置向后删除），规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany:必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX:可选。向数组添加的新项目
举个栗子：
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从下标为2的开始（包含2），删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
8、多维数组
也就是列表的嵌套
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
循环
for 循环
使用格式:
for(var i=0;i<5;i++)
{
console.log(i)
}
小练习：数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i<aList.length;i++)
{
if(aList.indexOf(aList[i])==i)
{
aList2.push(aList[i]);
}
}
alert(aList2);
字符串处理方法
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、parseFloat( )
将数字字符串转化为小数
var sNum03 = '12.32'
alert( parseFloat(sNum03) ); // 弹出 12.32 将字符串小数转化为数字小数
3、parseInt( )
将 数字字符串 转化为 整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert( sNum01+sNum02 ); // 弹出1224
alert( parseInt(sNum01) + parseInt(sNum02) ) // 弹出36
alert( parseInt(sNum03) ) // 弹出数字12 将字符串小数转化为数字整数
4、split( )
把 一个字符串 分隔成 字符 组成的 数组
var sTr = '2017-4-22';
var aStr1 = sTr.split("-");
var aStr2 = sTr.split("");
var aStr3 = sTr.split();
console.log(aStr1); //['2017','4','22']
console.log(aStr2); //['2','0','1','7','-','4','-','2','2']
console.log(aStr3) //['2017-4-22']
5、indexOf()
方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果要检索的字符串值没有出现，则该方法返回 -1(和数组的indexof功能一样)
6、substring( )
截取字符串
左闭右开 [start, stop) start <= x < stop
start: 必需。一个非负的整数，规定要提取的子串的第一个字符在 字符串 中的位置。
stop: 可选。一个非负的整数，比要提取的子串的最后一个字符在 字符串 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾
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('');
//先将字符串分割成数组，然后数组反转，之后再将数组分割成字符串
console.log(str2); //结果为：890fkdslj21jfdsa
调试程序的方法
alert
console.log
document.title
document.write( )：用的很少
定时器
定时器在 javascript 中的作用
- 定时调用函数
- 制作动画
- 模拟网络延时的情况
1. 定时器的种类:
- 执行一次的定时器: setTimeout
- 执行多次的定时器: setInterval
- 关闭只执行一次的定时器: clearTimeout
- 关闭反复执行的定时器: clearInterval
定时器的使用方式:
setInterval(code（或者写func）,millisec)
举个栗子：
使方框左右移动:
CSS部分:
<style>
.box{
width:300px;
height:300px;
background:gold;
position:fixed;
left:0px;
top:100px;
}
</style>
JS部分:
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var iLeft = 0;
var iSpeed = 3;
var oTimer = setInterval(fnMove,30);
function fnMove(){
iLeft += iSpeed;
if(iLeft>600)
{
iSpeed = -3;
}
if(iLeft<0)
{
iSpeed = 3;
}
oBox.style.left = iLeft + 'px';
}
}
</script>
HTML部分:
<div class="box" id="box"></div>
变量作用域
全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问
封闭函数
封闭函数是 javascript 中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数
写法一：
(function(){
alert('hello!');
})();
写法二：
!function(){
alert('hello!');
}()
