javascript基础细讲

编写JavaScript

1、JavaScript代码存在形式


<!-- 方式一 -->

<script type"text/javascript" src="JS文件"></script>

  

<!-- 方式二 -->

<script type"text/javascript">

    Js代码内容

</script>


2、JavaScript代码存放位置


HTML的head中

HTML的body代码块底部(推荐)

由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。


<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>

<script>

    alert('123');

</script>

每个语言刚开始都是Hello World那咱们也来写一个吧



<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        document.write("Hello World!!");

        document.write("My name is 张岩林");

    </script>

</body>

</html> 


效果如下:




注意:每一行代码写完要写一个分号来分割开,谨记


 JavaScript变量

 JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量。



<script type="text/javascript">

 

    // 全局变量

    name = 'seven';

 

    // 定义函数

    function func(){

        // 局部变量

        var age = 18;

 

        // 全局变量

        gender = "男"

    }

</script>


 


注:在JS中也有注释,//表示单行注释,/* ...注释内容...  */表示多行注释,此注释仅在Script块中生效


 数据类型 

JavaScript 中的数据类型分为原始类型和对象类型:


原始类型

数字

字符串

布尔值

对象类型

数组

“字典”

...

特别的,数字、布尔值、null、undefined、字符串是不可变。


null是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”。


undefined是一个特殊值,表示变量未定义。


1、number数字类型 


avaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。


转换:


parseInt(..)    将某值转换成数字,不成功则NaN

parseFloat(..) 将某值转换成浮点数,不成功则NaN

特殊值:


 NaN,非数字。可使用 isNaN(num) 来判断。

Infinity,无穷大。可使用 isFinite(num) 来判断。


Number                                    对数字的支持

Number.MAX_VALUE                      最大数值

Number.MIN_VALUE                      最小数值

Number.NaN                            特殊的非数字值

Number.NEGATIVE_INFINITY              负无穷大

Number.POSITIVE_INFINITY              正无穷大

Number.toExponential( )                   用指数计数法格式化数字

Number.toFixed( )                     采用定点计数法格式化数字

Number.toLocaleString( )              把数字转换成本地格式的字符串

Number.toPrecision( )                     格式化数字的有效位

Number.toString( )                    将—个数字转换成字符串

Number.valueOf( )                     返回原始数值    



<script>

    var a = 123;

    var b = '123';

    var c = parseInt(b);

    console.log(c);

    var d = parseFloat(b);

    console.log(d);

    var e = "a234";

</script>


2、string字符串


字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法


String                        对字符串的支持

String.charAt( )          返回字符串中的第n个字符

String.charCodeAt( )          返回字符串中的第n个字符的代码

String.concat( )          连接字符串

String.fromCharCode( )        从字符编码创建—个字符串

String.indexOf( )         检索字符串

String.lastIndexOf( )         从后向前检索一个字符串

String.length                 字符串的长度

String.localeCompare( )       用本地特定的顺序来比较两个字符串

String.match( )               找到一个或多个正则表达式的匹配

String.replace( )         替换一个与正则表达式匹配的子串

String.search( )          检索与正则表达式相匹配的子串

String.slice( )               抽取一个子串

String.split( )               将字符串分割成字符串数组

String.substr( )          抽取一个子串

String.substring( )       返回字符串的一个子串

String.toLocaleLowerCase( )   把字符串转换小写

String.toLocaleUpperCase( )   将字符串转换成大写

String.toLowerCase( )         将字符串转换成小写

String.toString( )        返回字符串

String.toUpperCase( )         将字符串转换成大写

String.valueOf( )         返回字符串

String.replace(regexp, replacement)    替换,正则中有g则替换所有,否则只替换第一个匹配项,

                        $数字:匹配的第n个组内容;

                                  $&:当前匹配的内容;

                                  $`:位于匹配子串左侧的文本;

                                  $':位于匹配子串右侧的文本

                                  $$:直接量$符号

挨个练习一下吧



    <script>

        var a = "zhangyanlin";

        document.write(a.charAt(5));

        // 返回y


        document.write(a.concat("haoshuai"));

        // 返回zhangyanlinhaoshuai


        document.write(a.indexOf("yan"));

        // 返回5


        document.write(a.length);

        // 返回11


        var b = "zhang7yan8lin";

        document.write(b.split("7"));

        //返回 ["zhang", "yan8lin"]


        document.write(b.split(/\d/));

        // 返回["zhang", "yan", "lin"]


        document.write(b.slice(1,d1_text.length));

        // 返回 hang7yan8lin

    </script>


下面再写一个很有意思的案例,让字体滚动起来吧:




<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id = num1 style="background-color: red;font-size: 50px;text-align: center;color: white;padding-left: 40px;padding-right: 40px">欢迎各位领导莅临检查,中华人民共和国万岁,我爱天安门,当初我们手拉着手!</div>

<script type="text/javascript">

    setInterval(function () {

        d1 = document.getElementById('num1');

        d1_text = d1.innerText;


        //字符串索引

        first_char = d1_text[0];


        //字符串切片

        sub_char = d1_text.slice(1,d1_text.length);


        //字符串拼接

        new_str = sub_char + first_char;


        d1.innerText = new_str;

    },500);


</script>

</body>

</html>



3、Boolean布尔类型


布尔类型仅包含真假,与Python不同的是其首字母小写。


==      比较值相等

!=       不等于

===   比较值和类型相等

!===  不等于

||        或

&&      且

 


4、Array数组


JavaScript中的数组和Python中的列表非常相似


 数组提供的方法有



Array                    对数组的内部支持

Array.concat( )          连接数组

Array.join( )            将数组元素连接起来以构建一个字符串

Array.length             数组的大小

Array.pop( )             删除并返回数组的最后一个元素

Array.push( )            给数组添加元素

Array.reverse( )         颠倒数组中元素的顺序

Array.shift( )           将元素移出数组

Array.slice( )           返回数组的一部分

Array.sort( )            对数组元素进行排序

Array.splice( )          插入、删除或替换数组的元素


  Array.splice(n,0,val)    指定位置插入元素

    Array.splice(n,1,val)   指定位置替换元素

    Array.splice(n,1)      指定位置删除元素

Array.toLocaleString( )  把数组转换成局部字符串

Array.toString( )        将数组转换成一个字符串

Array.unshift( )         在数组头部插入一个元素


 


 



    <script>

        var a = ["zhang","yan","lin","aylin"];

        var b = [1,2,3,4];

        document.write(a.concat(b));

        // 输出结果["zhang","yan","lin","aylin",1,2,3,4]


        document.write(a.join("_"));

        // 输出结果zhang_yan_lin_aylin


        document.write(a.length);

        // 输出结果4


        var c = a.pop();

        document.write(c);

        // 输出aylin


        a.splice(1,0,"索");

        document.write(a);

        // 输出 ["zhang","索","yan","lin","aylin"]

    </script>


 


更多请参考http://www.shouce.ren/api/javascript/l_Object.html 


 条件判断

1、条件语句


JavaScript中支持两个中条件语句,分别是:if 和 switch




var a = 0 ;

if (a == 0){

     document.write("您的值是正确的")

}else if(a < 0 ) {

     document.write("您的值小于0")

}else {

     document.write("您的值是错的")

}




switch(name){

    case '1':

        age = 18;

            break;

    case '2':

            age = 456;

            break;

    default :

            age = 777;

    }


2、循环语句


JavaScript中支持三种循环语句,分别是:



var names = ["zhang", "yan", "lin"];

 

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

    console.log(i);

    console.log(names[i]);

}


var names = ["zhang", "yan", "lin"];


for(var index in names){

    console.log(index);

    console.log(names[index]);

}



i  = 0;

while (i<10){

      if (i == 7){

           continue

       }else {

       document.write(i);

        i++

      }

}


 


3、异常处理



try {

    //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行

}

catch (e) {

    // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。

    //e是一个局部变量,用来指向Error对象或者其他抛出的对象

}

finally {

     //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。

}


注:主动跑出异常 throw Error('xxxx')


函数

1、基本函数


JavaScript中函数基本上可以分为一下三类:



        // 普通函数

        function func() {

            return "zhangyanlin"

        }

        // 匿名函数

        var func = function(arg){

            return "zhangyanlin";

        };

        // 自执行函数

        (function(arg){

            console.log(arg);

        })('123')


注意:对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。


实例:



<button onclick="myFunction('张岩林','CEO')">点击这里</button>


<script>

function myFunction(name,job)

{

alert("Welcome " + name + ", the " + job);

}

</script>


 


2、作用域


JavaScript中每个函数都有自己的作用域,当出现函数嵌套时,就出现了作用域链。当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在,则异常。


切记:所有的作用域在创建函数且未执行时候就已经存在。


 更多请参考http://www.cnblogs.com/wupeiqi/p/5649402.html


3、闭包


「闭包」,是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。


闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」


由于作用域链只能从内向外找,默认外部无法获取函数内部变量。闭包,在外部获取函数内部的变量。



function f2(){

    var arg= [11,22,33,44];

    function f3(){

        return arg;

    }

    return f3;

}

 

ret = f2();

ret();


 


 4、面向对象



function Foo (name,age) {

    this.Name = name;

    this.Age = age;

    this.Func = function(arg){

        return this.Name + arg;

    }

}

  

var obj = new Foo('张岩林', 18);

var ret = obj.Func("很帅");

console.log(ret);


 


对于上述代码需要注意:


Foo充当的构造函数

this代指对象

创建对象时需要使用 new

上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存。使用原型和可以解决该问题:



function Foo (name,age) {

    this.Name = name;

    this.Age = age;

}

Foo.prototype = {

    GetInfo: function(){

        return this.Name + this.Age

    },

    Func : function(arg){

        return this.Name + arg;

    }

}


修改时间 2016-07-11

真诚赞赏,手留余香
赞赏
随机推荐
Photoshop 学习笔记 颜色替换
Node.js实现的简单爬虫
Javascript 获取时间戳
DedeCMS 织梦常见问题
Node.js 的 JSON Web Token 模块
Fatal error:Call-time pass-by-reference has been removed
使用Keytools生成安卓证书
Javascript网页打印大全
Node.js 数据验证器 validator.js 类似Laravel和ThinkPHP
javascript延迟操作setInterval