JavaScript基础细讲

JavaScript语言的前身为作Livescript。自从Sun公司生产知名的Java语言后,Netscape公司推荐了Sun集团有关Java的次序概念,将团结原来的Livescript
重新展开设计,并改名为JavaScript。

   JavaScript是同样种植基于对象和事件驱动并持有安全性能的脚本语言,有了JavaScript,可使网页变得有声有色。使用其的目的是暨HTML超文本标识语言、Java
脚本语言一起实现在一个网页中链接七只目标,与网络客户交互效用,从而可以出客户端的应用程序。它是透过嵌入或调入在专业的HTML语言中贯彻的。

JavaScript优点  

1.简单性
 

JavaScript是一样种脚本编撰语言,它拔取小程序段的措施实现编程,像其他脚本语言一样,JavaScript同样都是同等种解释性语言,它提供了一个简短的开发进程。它的中坚构造格局与C、C++、VB、Delphi相当好像。但她不像这些语言同样,需要先编译,而是于程序运行过程中受逐行地讲演。它和HTML标识结合在一起,从而利于用户之应用操作。

2.动态性 

JavaScript是动态的,它能够平素对用户如故客户输入做出响应,无须经过Web服务程序。它对用户的显示响应,是采取以事件驱动的办法展开的。所谓事件驱动,就是凭借于主页中执行了某种操作所出的动作,就称为“事件”。比如按照下鼠标、移动窗口、选拔菜单等都得以说是事件。当事件闹后,可能汇合挑起相应的轩然大波响应。

3.超平台性
 

JavaScript是赖让浏览器本身,与操作环境无关,只要可以运作浏览器的总计机,并援助JavaScript的浏览器就是得是实施。

4.节省CGI的互相时间 

趁着WWW的立即进步起许WWW服务器提供的劳动而同浏览者举办交流,确浏览的身价、需服务的内等等,这项工作便由CGI/PERL编写相应的接口程序和用户举办互相来成功。很引人注目,通过网络及用户的互相过程一边增大了网络的通信量,另一方面影响了服务器的服务特性。服务器也一个用户运行一个CGI时,需要一个经过也其服务,它倘若占用服务器的资源(如CPU服务、内存耗费等),即使用户填表出现谬误,交互服务占的岁月哪怕会合相应扩张。被访的紧俏主机和用户交互越多,服务器的习性影响就更老。

   JavaScript是同一种基于客户端浏览器的言语,用户在浏览中填表、验证的互动过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行表明施行来好的,尽管是必调用CGI的片,浏览器就拿用户输入验证后的信息提交给长途的服务器,大大缩小了服务器的开支。

编写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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        document.write("Hello World!!");
        document.write("My name is 张岩林");
    </script>
</body>
</html> 

成效如下:

图片 1

留意:每一行代码写了而写一个支行来划分开,谨记

 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>

 

 下面再写一个怪有趣的案例,让书滚动起来吧:

图片 2图片 3

<!DOCTYPE html>
<html lang="en">
<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>

demo

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

图片 4图片 5

var a = 0 ;
if (a == 0){
     document.write("您的值是正确的")
}else if(a < 0 ) {
     document.write("您的值小于0")
}else {
     document.write("您的值是错的")
}

if判断

图片 6图片 7

switch(name){
    case '1':
        age = 18;
            break;
    case '2':
            age = 456;
            break;
    default :
            age = 777;
    }

switch语句

2、循环语句

JavaScript中辅助两种循环语词,分别是:

图片 8图片 9

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

for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

方式一

图片 10图片 11

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

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

方式二

图片 12图片 13

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;
    }
}