深入浅出学习javascript(一)

一、js的变量、数据类型,运算符

1、变量

语法格式:var 变量名 = 值【数据】;

var系统内部的关键字,用来定义变量名,代表数据类型的名字。

变量名注意:
        只能包含数字,字母,下划线
        变量名不能以数字开头
        系统内部的关键字
        大小写区分,如果命名的时候是小写,那么在用的时候必须也是小写
        建议命名变量名的时候要让这个变量名有意义

案例代码

 <script>
        var a = 10;
        var str = "我是中国人";
        var b = 0.9;
        alert(a);
        alert(str);
        alert(b);
   </script>

2、与输出相关的小知识点

alert(变量名):弹出框,变量名和数据都可以,只有在点击确认之后才会继续执行。
document.write(变量名):输出内容放在页面上,可以通过浏览器调式看到。
typeof(变量名):得到数据的类型。

console.log(object[, object, ...]):在控制台输出一条消息。如果有多个参数,输出时会用空格隔开这些参数。

console.debug(object[, object, ...]):在控制台输出一条消息,包含一个指向代码调用位置的超链接。假如是直接在控制台输入该命令,就不会出现超链接(和console.log()一样)。
console.info(object[, object, ...]):在控制台输出一条带有“信息”图标的消息和一个指向代码调用位置的超链接。
console.warn(object[, object, ...]):在控制台输出一条带有“警告”图标的消息和一个指向代码调用位置的超链接。
console.error(object[, object, ...]):在控制台输出一条带有“错误”图标的消息和一个指向代码调用位置的超链接。
console.assert(expression[, object, ...]):测试表达式expression是否为真。如果不是真,会在控制台写一条消息并抛出异常
console.dir(object):以列表形式输出一个对象的所有属性,有点和你查看DOM窗口相类似。
console.dirxml(node):输出一个HTML或者XML元素的XML源代码。和你在HTML窗口看到的相似。

console.trace():在调用的点处打印JavaScript执行的交互式堆栈跟踪。堆栈跟踪详细说明了堆栈上的函数,以及作为传递的值每个函数的参数。 您可以单击每个函数将其带到Scripttab中的源, 并单击每个参数值以在DOM或HTML选项卡中检查它。
console.group(object[, object, ...]):输出一条消息,并打开一个嵌套块,块中的内容都会缩进。调用console.groupEnd()关闭块。该命令可以嵌套使用。
console.groupEnd():关闭最近一个由console.group打开的块。
console.time(name):创建一个名字为name的计时器,调用cosole.timeEnd(name)停止计时器并输出所耗时间(毫秒)。
console.timeEnd(name)


3.数据类型

数字类型 [number]
字符串类型 [string]

布尔类型 [boolean,bool]

未定义类型 [Undefined]

空类型 [null]

复合数据类型 [array,object]


4、js的运算符

赋值运算符[=]把符号右边的值赋值给左边
算数运算符:[+,-,*,/,%,++,--]
i++,++i:(都是表示变量i自加1)
i--,--i:(都是表示变量i自减1)
比较运算符:[>,<,>=,<=,==,!=,===,!==]
逻辑运算符:[&&,||,!]
位运算符:[&,<<] [二进制]
复合赋值运算符:[+=,-=,*=,/=]
字符串加:[+]。


5、js的注释(和C/C++、Java等语言一致)

//单行注释
/**/多行注释

6、一个小案例

讲了这么多,现在咱们来做个小案例:打开浏览器,依次弹出"I Love You"这三个字,弹完之后,在浏览器上显示h1,h2,h3标记的“I Love You”这三个字符

<script>
    alert("I");
    document.write("<h1>I</h1>");
    alert("Love");
    document.write("<h2>Love</h2>");
    alert("You");
    document.write("<h3>You</h3>");
   </script>


7、js中传值的方式

赋值传值:把变量a的值复制一份给变量b,这个时候是有两份数据
引用传值:把变量a的值【地址】给变量b,这个时候是有一份数据

注意:赋值传值的时候把a的数据改动的时候,b的数据不会改动引用传值的时候当把a的数据改动的时候,b的数据也改动区分赋值传值和引用传值:【找到这个数据的数据类型】,在JS中,数字类型,字符串类型【赋值传值】复合数据类型【引用传值】


二、js的流程控制与循环结构

1、js的流程控制
    顺序结构

        代码都是从上往下一步一步执行的

    分支结构

        if结构
        if…else…结构
        if…else if…else…结构

        switch结构

    循环结构

        for循环结构
        while循环结构
        do…while…循环结构


2、js的流程控制与循环结构小案例

案例一:用表格输出9x9乘法表

<script>
        document.write("<table border='3' width='900' align='center'>");
        for(var i = 1; i <= 9; i++)
        {
            document.write("<tr>");
            for(j = 1; j <= i; j++)
            {
                document.write("<td align='center'>");
                document.write(i +"x" + j + "=" + i*j);
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>


案例二:输出一座金字塔

<script>
        document.write("<p align='center'>");
        for(var i = 1; i < 100; i++)
        {
            for(var j = 1; j <= (2 * i -1);  j++)
            {
                document.write("*");
            }
            document.write("<br/>");
        }
        document.write("</p>");
    </script>

三、js中的函数

1、什么是函数

函数是一个被命名的、独立的、完成特定功能,并可能给调用它的程序一个返回值的特定代码段

被命名的:函数在大多数情况下都是有名字的,少数情况下存在匿名函数,我们可以根据函数的名字来调用函数。
独立的:完成特定功能:函数的定义就是完成某些特定的任务。
返回值:有些函数可能具有返回值,返回给函数的调用处


2、定义函数语法:
   function 函数名([参数1,参数2...])

   {
        函数执行部分;
        return 表达式;
   }

3、调用函数语法:
        函数名(实际参数1,实际参数2 ...);

4、函数名:
    函数名不可以是系统内部关键字
    要让函数名有意义
5、形式参数:
    形式参数只能名字的形式,直接写出名字,这个名字可以认为是变量名(不用加var)在函数内部直接用在形式参数写好的名字即可,这个名字代表的数据,是调用函数时候的实际参数
6、实际参数:
    只能是一个具体的数据(或者用变量名代替),实际参数的数据的名字就是定义函数的名字
7、函数体:
    函数体可以是任意复合js语法规范的程序。[document.write,alert,for(){}]
    写的程序是有目的性的,写这个函数要完成什么功能而写
8、函数的执行:
    定义好函数之后是不会去执行的,在代码运行到调用函数的时候才会去定义函数的位置执行对应的代码。

9、函数的作用域:
    局部变量:在函数内部用var定义的变量,只能在函数内部使用
    全局变量:在函数外部用var定义的变量,在任何地方都可以使用

10、函数的递归(递归函数)
    Function abc(){abc();}
    abc();
概念:函数执行的时候调用函数其本身,写递归函数必须得写出口

11、关于函数的小案列

案例一、将打印金字塔封装成一个函数

<script>
        function pyramid(n)
        {
            document.write("<p align='center'>");
            for(var i = 1; i < n; i++)
            {
                for(var j = 1; j <= (2 * i -1);  j++)
                {
                    document.write("*");
                }
                document.write("<br/>");
            }
            document.write("</p>");
        }
    </script>
    <script>
    pyramid(10);
    </script>

案例二、用递归输出1-100之间的数据

 <script>
    function digui(n)
    {
        if(n < 1)
        {
            return ;
        }
        else
        {
            digui(n - 1);
            document.write(n + "<br/>");
        }
    }
    digui(100);
 </script>

12、匿名函数

一个函数在定义的时候,如果没有名字,那么久叫做匿名函数,那么匿名函数怎么调用呢?调用匿名函数的机制就是在定义完成匿名函数后直接调用叫做自调用匿名函数

 <script>
        (function ()
        {

            alert("hello");

        })();
  </script>

在实际项目开发中,我们可能同时引入多个javascript代码库,如prototype.js,jquery.js,mootools.js,这个时候如果在代码库中存在同名函数,就会产生命名冲突问题,在应用时就可能导致函数被覆盖,为了解决这个问题,可以使用自调用匿名函数来解决此。


例如 function () {}

13、函数在内存中的存储形式

特别说明:在javascript中,无论是一个有名函数还是匿名函数,其都会返回函数在内存中的首地址。在Javascript中其实也是有内存四区的图的。对于Javascript来说:栈内存:小而快,常用于存放简单类型的数据(如String、Number、Boolean);堆内存:大而慢,常用于存储复杂类型的数据(如Object,数组也是存在这块区域的);代码段:常用于存储函数


下图是一个函数在js中的存储过程

根据以上结论:var a = abc;就相当于把abc函数在内存中的首地址赋值给变量a

<script>
    function abc()
    {
        alert("abc");
    }

    var a = abc;
    a();
 </script>

如果在abc名字的后面添加一个圆括号,代表找到这块内存地址并执行一段连续的代码

<script>
    function abc()
    {
        alert("abc");
    }
    abc();
 </script>

一个函数无论是有名函数还是匿名函数,其都会返回函数在内存中的首地址,display函数主要是实现为变量i赋值,所以其有没有名字都没有任何影响,简化之

 <script>
    var a = function abc()
    {
        alert("abc");
    }
    a();
 </script>


14、系统内部的一些函数

    parseInt(参数),通过函数parseInt获得参数的整数位
    parseInt(9,.2)=>9
    parseInt(9.9) ;=>9
    parseInt(9.0) ;=>9
    parseInt(“9.3”);
    parseInt(“9.3abc”)
    parseInt(“abc9.3”);
    parseFloat(参数);通过函数parseFloat获得参数的浮点数
    parseFloat(9.2);=>9.2
    parseFloat(9.922);=>9.922(0.922)
    parseFLoat(“9.23abc”);
    parseFloat(“9.23”);
    parseFloat(“abc9.23”);
    isNaN:是一个不是数字的数据,布尔值
    var m=isNaN(23);
    var m=isNaN(“23”);
    var m=isNaN(“abc”);
    NaN:不是一个数字

四、js中的数组

1、什么是数组
数组就是一组数组的集合,在内存中(堆内存)表现为一段连续的内存地址。创建数组最根本目的:就是为了保存更多的数据。


2、数组的定义
在Javascript中,数组一共有两种定义方式:

隐式创建
    var 数组名称 = [数组元素1,数组元素2,数组元素3…];
直接实例化
    var 数组名称 = new Array(数组元素1,数组元素2,数组元素3…);

    var 数组名称 = new Array(3); 这个定义方式不推荐使用
    数组名称[0] = 数组元素1;
    数组名称[1] = 数组元素2;
    数组名称[2] = 数组元素3;

案例一:

一维数组定义

var arr1 = ['紫霞仙子', '东方不败', '杨贵妃'];

var  arr2 = new Array('西施', '貂蝉', '王昭君');


二维数组定义

var arr3 = [['成都', '汉中', '绵阳'],['贵阳','遵义','六盘水'],['哈尔滨','大庆','齐齐哈尔']];

3、数组的访问
在Javascript中数组的访问可以根据其索引下标数组名称[索引],默认情况下,数组的索引下标也是从0开始的。


4、获取数组的长度并遍历数组元素
在数组对象中,存在一个特殊的属性,叫做length,其可以获取当前数组中的元素个数

基于length属性,我们可以使用for循环对其进行遍历操作

<script>

    var arr = ['大锤', '小s', '小美'];

    for(var i = 0; i < arr.length(); i++)

    {

        document.write(arr[i] + "</br/>");

    }

</script>

使用for…in…循环对数组进行遍历操作
for(var i in 数组) {}
每次在循环时,系统会自动将当前数组的索引下标放入变量i中

<script>

    var arr = ['大锤', '小s', '小美'];

    for(var i in arr)

    {

        document.write(arr[i] + "</br/>");

    }

</script>

5、数组排序

这里不写任何数组相关的排序,它的原理和其他语言的是一样的。

6、数组相关的几个案例

案例一、求二维数组所有项的和

 <script>
    var arr = [[20, 15, 25],[10, 50, 35],[25, 65, 45]];
    var num = 0
    for(var i = 0; i < arr.length; i++)
    {
        for(var j = 0; j < arr[i].length; j++)
        {
            num = num + arr[i][j];
        }
    }
    document.write(num);
 </script>

案例二、最大值和下标

<script>
    var arr = [[20, 15, 25],[10, 50, 35],[25, 65, 45]];
    var maxvlaue = arr[0][0];
    var index1 = 0;
    var index2 = 0;
    for(var i = 0; i < arr.length; i++)
    {
        for(var j = 0; j < arr[i].length; j++)
        {
            if(maxvlaue < arr[i][j])
            {
                maxvlaue = arr[i][j];
                index1 = i;
                index2 = j;
            }
        }
    }
    document.write("数组最大值为"+ maxvlaue + "," + "下标为" + index1 + "," + index2);
 </script>

7、文本下标
在php中,数组一共有两种类型:① 索引型数组 ② 关联型数组,在Javascript虽然没有关联性数组,但是也可以使用文本作为索引下标。

<script>

    var arr = ['a', 'b', 'c'];

    arr['first'] = 'd';

    arr['second'] = 'e';

    document.write(arr['first']);

    document.write(arr['second']);

</script>

虽然以上代码可以正常执行。但是first和second其数组元素并不会计入数组长度length中,因为这两个元素是以属性的形式添加到数组对象中的!

<script>

    var arr = ['a', 'b', 'c'];

    arr['first'] = 'd';

    arr['second'] = 'e';

    alert(arr.length); //3

</script>

8、与数组相关的函数

数组.Concat(数据1,数据2);var n=arr.concat(2);//连接起来arr和2
数组.join(字符),把数组里面的每项数据用指定的字符连起来
数组.pop();把数组最后的数据删除并且返回

数组.unshift(newelement1,newelement2,....,newelementX) 向数组元素的头部追加元素

数组.splice(index,howmany,element1,.....,elementX) 向数组元素的指定位置追加指定数量的元素

数组.splice(index,howmany) :在数组元素的指定位置删除指定数量的元素

数组.slice(start[,end]) 截取从start到end中的数组元素

数组.Shift();把数组第一项删除返回
数组.Push(n);把数据放入之后返回长度
数组.reverse();把数组顺序翻转

数组.split(separator, howmany)分割字符串成数组


案例:使用Javascript中内置的Option类完成省市联动效果

<script>
        var province = ['请选择', '贵州省', '山东省', '黑龙江省'];
        var city = [[], ['贵阳', '毕节', '安顺', '六盘水', '遵义'], ['济南', '青岛', '菏泽', '聊城', '烟台', '蓬莱'], ['哈尔滨', '大庆', '齐齐哈尔', '牡丹江' , '黑河']];
        function createProvince()
        {
            for(var i in province)
            {
                var op = new Option(province[i], i);
                document.getElementById('province').options.add(op);
            }
        }
        
        window.onload = function()
        {
            createProvince();
        }
    </script>
    <select id = "province"></select>
    <select id = "city"></select>


五、js中的字符串对象

字符串.charAt(num):获得num位置的字符
字符串.split(“字符”):以【字符】分割字符串=>【变成数组】
字符串.indexOf(“字符”):在字符串里面找“字符“,如果找到了返回下标,没有找到返回-1
字符串.lastIndexOf(“字符”):表示的最后出现的位置
字符串.substr(num1.num2):截取从num1的位置截取num2个,如果只有一个参数(num),表示从num的位置开始截取,截取到最后
字符串.substring(num1,num2):截取从num1的位置截取到num2的位置,注意:num1位置的字符可以截取到,num2位置的字符截取不到【也就是说从nun1到num2但是不包含num2位置的字符】
字符串.toUpperCase():把字符串转化为大写形式
字符串.toLowerCase():把字符串转化为小写形式


案例一、验证用户上传的图片的后缀名是否正确

<script>
        function func()
        {
            var obj = document.getElementById("id1");
            var imgs = obj.value.lastIndexOf(".");
            var hz = obj.value.substr(imgs+1);
            hz = hz.toLowerCase();
            if(hz == "jpg" || hz == "png" || hz == "gif")
            {
                alert("允许上传图片");
            }
            else
            {
                alert("不允许上传图片");
            }
        }
    </script>
    <input type="file" id="id1">
    <input type="button" value="点击上传"  onclick="func()">


六、js中的Math对象

Math.pow(x,y);求的X的Y次方
Math.ceil(n);向上取整:不小于这个数的最小整数
Math.floor(n);向下取证:不大于这个数的最大整数
Math.round();四舍五入
Math.abs(n);取n的绝对值
Math.max(23,12);取最大值
Math.min(12,22);取最小值
Math.random();取得0到1之间的随即数,注意:能取到0但是不能取到1
规律
任意两个数的随机数【Math.floor(Math.random()*(大的数-小的数+1))+小的数】

案例:请封装一个接口,能够取到任意某数到任意某数之间的随机数

<script>
    function fun(num1,  num2,  n)
    {
        for(var i = 0; i < n; i++)
        {
            var m = Math.random();
            m = m * (num2 + 1) + num1;
            m = Math.floor(m);
            document.write("m = " + m);
        }
    }
    fun(10, 20, 6);
 </script>


七、js中的Date对象

注意:obj为一个对象

obj.toLocaleString();以当地时间格式显示
obj.getFullYear();得到的是年份
obj.getMonth();得到月份
obj.getDate();得到日期
obj.getHours();得到小时
obj.getMinutes();得到分钟数
obj.getSeconds();得到的是秒
obj.getMilliSeconds()得到毫秒
obj.getTime();以毫秒值的形式显示
obj.getDay();获得星期
设置obj内部的信息:
obj.setFullYear();设置年份
obj.setMonth();设置月份
obj.?setDate();设置日期
obj.setHours();设置小时
obj.setMinutes();设置分钟数
obj.setSeconds()设置秒
obj.setMilliSeconds();设置毫秒


八、js特殊字符:
     \             转移字符
    ‘              单引号
    “              双引号
    \r             换行
    \n            回车
    \t            tab符


九、js中的对象

在js中,一切皆是对象。


十、js中的事件


1、鼠标事件:
Onclick:单击事件
Onmouseover:鼠标放上
Onmouseout:鼠标离开
OnmouseDown:鼠标按下

OnmouseUp:鼠标抬起
Ondblclick:双击
Onmousemove:鼠标移动


2、表单事件
Onsubmit:提交事件
Onfocus:获得焦点
Onblur:失去焦点
Onreset:重置事件


3、键盘事件:
OnkeyUp:键盘按键抬起
OnkeyDown:键盘按键按下
OnkeyPress:键盘按键按一次
Onload事件:当页面加载完成之后立即执行的事件
Window.onload=函数名
<body onload=”函数名()”>
</body>


4、Event对象:当事件发生的时候相关的信息
Event.clientX:鼠标移动时X坐标
Event.clientY:鼠标移动时Y坐标
Event.target:事件源


5、HTML和CSS属性的取值和赋值
(1)、html
    取值:Var n=obj.html属性名
    赋值:Obj.html属性名=m;
(2)、css
    取值var n=obj.style.CSS属性名。例如:obj.style.margin; obj.style.borderBottom
    赋值:obj.style.CSS属性名。例如:obj.style.margin="30px";



0
248