JAVASCRIPT

JavaScript介绍

JavaScript是运行在浏览器端的脚本语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览器解释执行的,前端脚本语言还是Jscript(微软,ID独有),ActionScript(Adoble公司,需要插件)等

 

前端三大块

  1. HTML:页面结构
  2. CSS:页面表现:元素大小,颜色,位置,隐藏或显示,部分动画效果
  3. JavaScript:页面行为:部分动画效果,页面与用户的交互,页面功能

 

JavaScript嵌入页面的方式

  1. 行间事件(主要用于事件)
<input type="button" name="" οnclick="alert('ok!');" value="点击我!">
  1. 页面script标签嵌入(内嵌JS)

<script type="text/javascript">
        alert("ok!”);
    </script>

  1. 外部引入
<!-- JavaScript嵌入页面的方式第三种----外部引入(外嵌JS)-->

<script type="text/javascript" src="js/hello.js"></script>

 

 

变量

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

  Var isNum = 123;

  Var sTr = ”asdf”

  //同时定义多个变量可以使用“,”隔开,公用一个“var”关键字

  Var isNum = 45,sTr=”hello world”,sCount=’68’;

 

变量类型:

5种年基本数据类型:

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

1种复合类型

Object

 

Javascript语句与注释

  1. 一条JavaScript语句应该以“;”结尾
  2. JavaScript注释

单行注释: //

多行注释: /*    */

 

 

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

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

 

匈牙利命名风格:

对象o Object 比如:oDiv

数组 a Array  比如:altems

字符串s String 比如:sUserName

整数i Integer 比如:iItemCount

布尔值 b Boolean 比如:bIsComlpete

浮点数 f Float 比如:fPrice

函数 fn Function 比如:fnHandler

正则表达式 re RegExp 比如:reEmailCheck

 

 

获取元素方法一

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

<script type="text/javascript">
    var odi = document.getElementById("div1")
</
script>

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

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

..........

<div id=”div1”>这是第一个div元素</div>

.......

<script type="text/javascript">
    var odi = document.getElementById("div1")
</
script>

</body>

第二种方法:将JavaScript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完成后才执行,就不会出错了。

<script type="text/javascript">

window.onload = function(){
          var odi = document.getElementById("div1")

}
</
script>

.......

 

 

操作元素属性

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

 

操作属性的方法

  1. “.”操作
  2. “[]”操作

 

属性写法

  1. html的属性和js里面属性写法一样
  2. “class”属性写成“className”
  3. “style”属性里面的属性,有横杆的改写驼峰式,比如:“font-size”,改写成“style.fontSize”

 

通过“.”操作属性

<script type="text/javascript">

    window.onload = function(){

        //通过ID名获取元素赋值给oDiv变量

        var oDiv = document.getElementById("div1")

        var oa = document.getElementById("link")

        //读取属性

        var sId = oDiv.id

        alert(sId)

        //改变元素的属性(写属性)

        oDiv.style.color = "red"

        oDiv.style.fontSize = "20px"

        oa.href = "http://www.baidu.com"

        oa.title = "这是跳转到百度的网址"



        var oa2 = document.getElementById("div2")

        oa2.className = "box2"



    }

通过“[]”操作属性

<script type="text/javascript">

    window.onload = function(){

        //通过ID名获取元素赋值给oDiv变量

        var oDiv = document.getElementById("div1")

        var sMystyle = "color"

        var sValue = "red"

        /* 属性用变量来替代的话需要用【】来操作 */

        oDiv.style[sMystyle] = sValue

    }

</script>

 

innerHTML

innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">

    window.onload = function(){

        //通过ID名获取元素赋值给oDiv变量

        var oDiv = document.getElementById("div1")

        //读取元素里面的内容

        var text = oDiv.innerHTML;

        alert(text)

        //改写元素里面的内容

        //oDiv.innerHTML = "修改一个元素"

        oDiv.innerHTML = "<a href='http://www.itcast.cn'>传智播客</a>"

        

    }

</script>
<body>

    <div id="div1">这是一个元素</div>

</body>
 

函数

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

<head>

    <meta charset="UTF-8">

    <title>JS函数</title>

    <script type="text/javascript">

        function fnMyalert(){

            alert("hello world!")

        }



        function fnChange(){

            var oDiv = document.getElementById("div1")

            oDiv.style.color = "red"

            oDiv.style.fontSize = "20px"

        }



    </script>

</head>

<body>

    <div id="div1" οnclick="fnMyalert()">这是一个div元素</div>

    <input type="button" name="" value="改变div" οnclick="fnChange()">

</body>
 
 
<head>

    <meta charset="UTF-8">

    <title>JS函数</title>

    <script type="text/javascript">

        function fnMyalert(){

            alert("hello world!")

        }



        function fnChange(){

            var oDiv = document.getElementById("div1")

            oDiv.style.color = "red"

            oDiv.style.fontSize = "20px"

        }



    </script>

</head>

<body>

    <div id="div1" οnclick="fnMyalert()">这是一个div元素</div>

    <input type="button" name="" value="改变div" οnclick="fnChange()">

</body>
 
 

匿名函数

定义函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

<head>

    <meta charset="UTF-8">

    <title>JS函数</title>

    <script type="text/javascript">

        window.onload = function(){

             var oBtn = document.getElementById("btn01");

             oBtn.onclick = function(){

                 var oDiv = document.getElementById("div1")

                 oDiv.style.color = "red"

                 oDiv.style.fontSize = "20px"

             };

        }

    </script>

</head>

<body>

    <div id="div1">这是一个div元素</div>

    <input id = "btn01" type="button" name="" value="改变div">

</body>

 

 

变量与函数预解析

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

 

<script type="text/javascript">

    //预解析会把变量的声明提前

    alert(iNum);//弹出undefined

    alert(iNum01);//系统会崩溃或出错,因为iNum01没有定义,也没有声明

    var iNum = 12;



</script>

 

 

<script type="text/javascript">

    //预解析会让函数的声明和定义提前,正常用它

    myalert();

    function myalert(){

        alert("hello world!");

    }

</script>

 

函数传参

<script type="text/javascript">

    function fnMyalert(a){

        alert(a);

    }

    fnMyalert("hello world!")

    fnMyalert(12)

</script>

 

<script type="text/javascript">

    window.onload = function(){

        function fnChangestyle(myStyle,val){

            var oDiv = document.getElementById("div01")

            oDiv.style[myStyle] = val;

        }

        fnChangestyle('fontSize','30px');

        fnChangestyle('color','red');

        fnChangestyle('backgroundColor','pink');

    }

</script>

 

函数return关键字

函数中‘return’关键字的作用

  1. 返回函数执行的结果
  2. 结束函数的运行
  3. 阻止默认行为
<script type="text/javascript">

    function fnAdd(a,b){

        var c = a + b

        return c ;

    }

    var isResult = fnAdd(2,5);

    alert(isResult)

</script>

 

 

条件语句

通过条件来控制程序的走向,就需要用到条件语句

运算符

  1. 算术运算符:+(加),-(减),*(乘),/(除),%(求余)
  2. 赋值运算: =,+=,-=,*=,/=,%=,++(自增1)
  3. 条件运算符:==,===(先比较两边的类型,然后在比较值),>,>=,<,<=,!=,&&(而且),||(或者),!(否)

If  else

<script type="text/javascript">

    var iNum01 = 2;

    var sNum01 = '2';

    if(iNum01 === sNum01){

        alert("相等");

    }else{

        alert("不相等");

    }



    if(3!=4){

        alert("true");

    }else{

        alert("false");

    }



    if(!4>3){

        alert("大于");

    }else{

        alert("非大于");

    }



    if(4>3 && 5>2){

        alert("满足");

    }else{

        alert("不满足");

    }



    if(4>3 || 5<2){

        alert("部分满足");

    }else{

        alert("全部不满足");

    }

</script>

 

Switch语句

多重if else语句可以换成性能更高的switch语句

<head>

    <meta charset="UTF-8">

    <title>网页换肤</title>

    <link id ="link01" type="text/css" rel="stylesheet" href="css/skin01.css">

    <script type="text/javascript">

        window.onload = function(){

            var iWeek = 3;

         var oBody = document.getElementById('body01');

            switch (iWeek){

                case 1:

                    oBody.style.backgroundColor = 'gold';

                    break;

                case 2:

                   oBody.style.backgroundColor = 'pink';

                    break;

                case 3:

                   oBody.style.backgroundColor = 'green';

                    break;

                case 4:

                   oBody.style.backgroundColor = 'yellowgreen';

                    break;

                case 5:

                   oBody.style.backgroundColor = 'lightblue';

                    break;

                case 6:

                   oBody.style.backgroundColor = 'lightgreen';

                    break;

                default :

                    break;

            }

        }



    </script>



</head>

<body id="body01">



</body>

 

数组及操作方法

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

定义数组的方法

<script type="text/javascript">

    //对象的实例创建

    var aList01 = new Array(1,2,3,4);

    //直接创建(通常使用这个方法来创建数组)

    var aList02 = [1,2,3,4,5];

</script>

 

操作数组中数据的方法

  1. 获取数组的长度:aList.length;
   <script type="text/javascript">

    var aList02 = [1,2,3,4,5];

    //通过length获取数组的长度

    alert(aList02.length);

   </script>
  1. 用下标操作数组的某个数量:aList[0];
  2. Join()将数组成员通过一个分隔符合并成字符串
<script type="text/javascript">
var aList02 = [1,2,3,4,5];
var sTr = aList02.join(“-”);
alert(sTr);//弹出1-2-3-4-5
    </script>

 

  1. Push()和pop()从数组最后增加成员或删除成员
<script type="text/javascript">
var aList02 = [1,2,3,4,5];
//Push()和pop()从数组最后增加成员或删除成员

    aList02.push('b');

    alert(aList02);

    aList02.pop()

    alert(aList02);

</script>
  1. Unshift()和shift()从数组前面增加成员或删除成员
<script type="text/javascript">
      var aList02 = [1,2,3,4,5];
      aList02.unshift('b')

      alert(aList02)

      aList02.shift()

      alert(aList02);

</script>

 

  1. reverse()将数组反转
<script type="text/javascript">
      var aList02 = [1,2,3,4,5];
      aList02.reserve()

      alert(aList02);

</script>
  1. indexof()返回数组中元素第一次出现的索引值
<script type="text/javascript">
        var  aList03=['a','b','c','a','b','c']

alert(aList03.indexOf('b'))
</script>

 

  1. splice()在数组中增加或删除成员

第一个参数是开始的位置,第二个参数是从起始位置删除多少个成员,第三个之后(包括第三个)的是要增加的成员的值

<script type="text/javascript">
            var  aList03=['a','b','c','d','a','b','c'];

      // aList03.splice(1,0,'e') ;//从第2个开始不删除,在1的位置增加一个e

     // alert(aList03);//'a','e','b','c','d','a','b','c'

     aList03.splice(1,2,'f','g');//从第2个开始删除b,c,在1的位置增加一个f,g

     alert(aList03);// a,f,g,d,a,b,c
</script>
 
多维数组
多维数组指的是数组的成员也是数组的数组
          <script type="text/javascript">

              var aList = [[1,2,3],['a','b','c','d'],[4,5,6],[6,7,8]];

              alert(aList.length)//4

              alert(aList[0].length)//3

              alert(aList[0][1]);//2

           </script>
 
循环
批量操作数组中的数据,需要使用到循环语句
循环语句
程序中进行有规律的重复性操作,需要使用到循环语句
For循环
     <script type="text/javascript">

       for(var i=0;i<len;i++){

          .....

       }

     </script>
 
<script type="text/javascript">

    var aList =[1,2,3,4,5,6];

    var iLen = aList.length;

    for(var i=0;i<iLen;i++){

        alert(aList[i]);

    }

</script>
 
While 循环
<script type="text/javascript">

    var i =0;
While(i<0){
i++;
}

</script>
 
数组去重

<script type="text/javascript">
    var aList = [1,2,3,2,3,4,6,7,8,5,9,3,2,1,8,5,4,5,6];
   
var aList2 =[];
   
for(var i=0;i<aList.length;i++){
       
if(aList.indexOf(aList[i])==i){
           
aList2.push(aList[i]);
        }
    }
   
alert(aList2);
</
script

 
 
获取元素方法二
可以使用内置对象document上的getElementByTagName方法来获取页面上的某一标签,获取的是一个选择集,不是数组,但可以用下标的方式操作选择集里面的标签元素

<script type="text/javascript">
    window.onload = function(){
       
//通过标签名称获取li元素,生成一个选择集,赋值给aLi
        /*
        var aLi = document.getElementsByTagName("li");
        var iLen  = aLi.length;
        //读取选择集内元素的个数
        //alert(aLi.length);
        //同时给所有的li加背景色
        for(var i=0;i<iLen;i++){
            //设置背景色
            aLi[i].style.background = "gold";

        }*/
        //给指定li加背景色
       
var oUl = document.getElementById("list1");
       
var aList oUl.getElementsByTagName("li");
       
var iLen = aList.length
       
alert(aList.length)
        
for(var i=0;i<iLen;i++) {
            
if(i%2 == 0){
               
aList[i].style.background = "gold";
             }
         }
    }

</
script>

 
 

Javascript组成

  1. ECMAscript JavaScript的语法(变量,函数,循环语句等语法)
  2. DOM文档对象模型 操作html和css的方法
  3. BOM浏览器对象模型 操作浏览器的一些方法

 

 

字符串处理方法:

  1. 字符串合并操作:“+”
  2. ParseInt()将数字字符串转化为整数
  3. ParseFloat()将数字字符串转为小数
  4. Split()把一个字符串分割成字符串组成的数组
  5. ChartAt()获取字符串中的某一个字符
  6. Indexof()查找字符串是否含有某字符
  7. Substring()截取字符串用法:substring(start,end)(不包括end)
  8. toUpperCase()字符串转大写
  9. toLowerCase()字符串转小写

<script type="text/javascript">
    var iNum01 = 12;
   
var sTr = "abc";
   
var iNum02 = "34";
   
//数字和字符串相加 等同于字符串拼接
   
alert(iNum01+iNum02); //弹出1234
   
alert(iNum02+sTr);//弹出34abc
   
var sTr = '12.35';
   
//将数字字符串转化为整数
   
alert(parseInt(sTr)); //弹出12
    //将数字字符串转化为小数
   
alert(parseFloat(sTr));//弹出12.35
    //把一个字符串分割成字符串组成的数组
   
var sTr ="2017-4-22";
   
var aList = sTr.split("-");
   
alert(aList); //弹出['2017','4','22']
   
var aList02 = sTr.split("");
   
alert(aList02);//弹出['2','0','1','7','-','4','-','2','2']
    //获取字符串中的某一个字符
   
var sTr04 = "#div";
   
var sTr05 = sTr04.charAt(0);
   
alert(sTr05);//弹出#
    //查找字符串是否含有某字符,indemxOf(),如果不存在的话就会弹出-1,找到的话就会弹出对应的索引值
   
var sTr06 = "abcdf microsoft asdf1";
   
alert(sTr06.indexOf('microsoft'));//弹出 6,弹出-1
    //截取字符串用法
   
var sTr07 = "abcdf123456gh";
   
var sTr08 = sTr07.substring(5,11);
   
alert(sTr08);弹出 123456

</script>

 

用最快的方式实现字符串反转

<script>

var sTr09 = "abcdfmicrosoft12345asdf1"
   
var sTr10 = sTr09.split("").reverse().join();
   
alert(sTr10);//弹出1,f,d,s,a,5,4,3,2,1,t,f,o,s,o,r,c,i,m,f,d,c,b,a
</script>

 

定时器

  1. 制作动画
  2. 异步操作
  3. 函数缓冲与节流

 

定时器类型及语法

定时器有2种:

  1. setTimeout 只执行一次的定时器
  2. setInterval 反复执行的定时器

clearTimeout 关闭只执行一次的定时器

clearInterval 关闭反复执行的定时器

 

变量作用域

变量作用域指的是变量的作用域范围,JavaScript中的变量分为全局变量和局部变量

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

 

封闭函数

封闭函数是JavaScript中匿名函数的另外一种写法,创建一个开始就执行而比用命名的函数。

一般定义函数和执行函数

Function myAlert(){

         Alert(“hello world!”);

}

myAlert()

 

封闭函数:

(function myAlert(){

    Alert(“hello world!”);

} )();

 

还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function myAlert(){

         Alert(“hello world!”);

}

 

在封闭函数前加一个“;”,可以避免JS压缩时候出错
 ;(function myalert(){
       alert("hello world!")
  })();

 

常用内置对象

  1. document
    <script type="text/javascript">

    //通过Id获取元素

    document.getElementById()

    //通过标签获取元素

    document.getElementsByTagName()

    //获取上一个页面跳转页面的地址

    document.referrer

</script>

 

  1. location
   //获取或重定URL地址

window.location.href

//获取地址参数部分

window.location.search

//获取页面锚点或者叫哈希值

window.location.hash

 

  1. Math

//获取0-1的随机数,不包括1

Math.random

//向下取整

Math.floor 

//向上取整

Math.ceil

<script type="text/javascript">
    var iPi = Math.PI;
   
alert(iPi);
   
//Math.random()只能返回从0到1之间的随机数,不包括1
   
var iNum = Math.random();
   
var aArr =[];
   
for (var i=0;i<20;i++){
       
aArr.push(iNum)
    }
   
//alert(aArr);
   
console.log(aArr);
   
//向下取整,去除小数部分
   
alert(Math.floor(5.6)); //5
     //
向上取整,去除小数部分,整体加1
   
alert(Math.ceil(5.2));  //6
    //10-20
之间的随机数
   
var iN01 = 10;
   
var iN02 = 20;
   
var aList02=[];

   
for(var i=0;i<40;i++){
       
var iNum = Math.floor((iN02-iN01)*Math.random()+1) + iN01;
       
aList02.push(iNum);
    }
   
console.log(aList02);
</
script>

 

 

 

调试程序的方法

  1. alert :直接弹出框给你看你想要看的变量
  2. console.log:在console里面看得到你想要的变量值
  3. document.title
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值