JavaScript

JavaScript介绍

　　JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互, JavaScript是浏览器解释执行的。
　　JavaScript不分前后端，因为后端人员大多需要自学而且大部分后端人员对于JavaScript较前端人员更好

前端三大块
　　1. HTML ;页面结构
　　2. CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
　　3. 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>

条件语句

通过条件来控制程序的走向,就需要用到条件语句，
条件运算符：==、===、>、>=、<、<=、!=、&(而且)、||(或者)、!(否)

if else

var iNun01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
    sTr=‘大于’;
}
else
{
    sTr=小于;
}
alert(sTr);

　　说明：==默认会将符号两边的变量进行转换成同一类型，再进行比较。这个叫隐式转换
　　弊端：判断不够严谨会给判断带来困扰
　　改进：一般使用===进行判断

获取元素方法

　　可以使用内置对象document上的getElementByld方法来获取页面上设置了id属性的元素,获取到的是一个htmI对象,然后将它赋值给一个变量比如:

<script type="text/javascript">
var oDiv = document.getElementById("div1");
</script>
...
<div id="div1">这是个div元素</div>

　　上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:

第一种方法:将javascript放到页面最下边

<div id="div1">这是一个div元素</div>
....
<script type=" text/javascript">
var oDiv = document.getElementById("div1');
</script>

第二种方法:将获取方法添加到head标签里

<head>       
    <script>
        // 当整个页面加载完之后，在执行大括号里的代码
        window.onload = function(){
            var oDiv = document.getElementById('div01');
        }
    </script>
</head>
<body>
    <div id="div01">这是一个div元素</div>
</body>

操作元素属性

　　获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。

　　操作元素属性

　　var 变量 = 元素.属性名 读取属性
　　元素.属性名 = 新属性值 改写属性

　　属性名在js中的写法
　　1、html的属性和js里面属性写法一样
　　2、”class”属性写成”className”
　　3、”tyle”属性里面的属性,有横杠的改成驼峰式I比如: font-size” ,改成style.fontSize”

变量、数据类型及基本语法规范

　　JavaScript是一种弱类型语言I javascript的变量类型由它的值来决定。定义变量需要用关键字’var’

var iNum = 123;
var sTr = 'asd';
//同时定义多个变量可以用" ,"隔开，公用一个‘var'关键字
var iNum = 45,sTr='qwe' ,sCount = '68';

　　变量类型
　　五种基本数据类型:
　　1、number数字类型
　　2、string 字符串类型
　　3、boolean布尔类型true或false
　　4、undefined undefined类型,变量声明未初始化，它的值就是undefined
　　5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为ull,在页面上获取不到对象，返回的值就是null

变量、函数、属性、函数参数命名规范

　　1、区分大小写
　　2、第一个字符必须是字母,下划线(_)或者美元符号($)
　　3、其他字符可以是字母、下划线、美元符或数字

　　匈牙利命名风格:

　　对象o Object比如: oDiv
　　数组a Array比如: altems
　　字符率s String比如; sUserName
　　整数i Integer 比如: iltemCount
　　布尔值b Boolean比如: bisComplete
　　浮点数f Float比如; fPrice
　　函数fn Function比如: fnHandler
　　正则表达式re RegExp比如; reEmailCheck

函数

　　函数就是重复执行的代码片

　　函数定义与执行

<script type="text/javascript">
    //函数定义
    function fnAlert(){
        alert("hello!'); 
    }
    //函数执行
    fnAlert(); 
</script>

　　变量与函数预解析

　　JavaSrip解析过程分为两个阶段,先是编译阶段I然后执行阶段,在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前,将它赋值为undefined。

函数’return’关键字

　　函数中’retum’失键字的作用:
　　1、返回函数中的值或者对象
　　2、结束函数的运行

<script type="text/javascript">
    function fnAdd(iNum01,iNum02){
        var iRs = iNum01 + iNum02;
        return iRS;
        alert("here!');
    }
    var iCount = fnAdd(3,4);
    alert(iCount); //弹出7
</script>

数组及操作方法

　　数组就是一组数据的集合, javascript中,数组里面的数据可以是不同类型的

　　定义数组的方法

//对象的实例创建
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、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[e][1]); //弹出2; 

字符串处理方法

　　1、字符串合并操作:”+”

var iNum01 = 12;
var iNum02 = 24;
var sNum03 . '12';
var sTr = 'abc';
alert(iNum01+ilNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);  //弹出12abc

　　2、parsent() 将数字符串转化为整数

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01slNum02);  //弹出1224
alert(arselnt(sINum01)+parseInt(sNum02))  //弹出36
alert(parseInt(sNum3)  //弹出数字12 将字符串小数转化为数字整数

　　3、parseFloat()将数字字符串转化为小数

var sUum03 = '12.32'
alert(parseFloat(sNumO3));  //弹出 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

字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.spit('').reverse().join(''); 
alert(str2);

调试程序的方法

　　输出变量和对象的方法;
　　1、alert
　　2、console.log
　　3、 document.title

断点调式

　　通过chrome浏览器调试工具的sources窗口I可以对外链的js文件进行断点调试

变量作用域

　　变量作用域指的是变量的作用范围↑javascript中的变量分为全局变量和局部变量。

　　1、全局变量:在函数之外定义的变量,为整个页面公用↑函数内部外部都可以访问。
　　2、局部变量:在函数内部定义的变量,只能在定义该变量的函数内部访问,外部无法访问。

封闭函数

　　封闭函数是javascript中匿名函数的另外一种写法, 创建一个开始就执行而不用命名的函数。
　　一般定义的函数和执行函数:

function myalert(){
    alert( 'hello!');
};
myalert();

　　封闭函数:

(function(){
alert('hello!');
})();

定时器

　　定时器在javascript中的作用
　　1、定时调用函数
　　2、制作动画

　　定时器类型及语法

/*
定时器:
setTimeout只执行一次的定时器
clearTimeout关团只执行一次的定时器
setInterval反 复执行的定时器
clearInterval关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert("调试内容");
}
//创建只执行一次的定时器
// 第一个参数是函数名，第二个参数是时间间隔，单位是毫秒
var oTimer = setTimeout(fnMyalert,2000);

// 关闭只执行一次的的定时器
 clearTimeout(oTimer);

//  创建反复执行的定时器
var oTimer01 = setTimeout(fnMyalert,2000);

// 关闭
clearTimeout(oTimer01);

事件属性及匿名函数

　　事件属性
　　元素上除了有样式，id等属性外,还有事件属性,常用的事件属性有鼠标点击事件属性(onclick) ,鼠标移入事件属生(mouseover),鼠下移出事件属性(mouseout),将函数名称赋值给元素事件属性，可以将事件和函数失联起来。

<script type-"text/javascript">
window.onload = function(){
    var oBtn = document. getE lementById('btn1');

    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
}
</script>