2016-05-01

JavaScript基础

JavaScript简介

JavaScript是一种基于对象（object）和事件驱动（even driven）并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，是一种动态、弱类型、基于原型的语言，内置支持类。

JavaScript是一种轻量级的编程语言。
JavaScript是可插入HTML页面的编程代码。
JavaScript插入HTML页面后，可由所有现代浏览器执行。
JavaScript可以让网页呈现各种动态效果。

JavaScript组成

核心ECMAscript——提供核心语言的功能（基础语言）

ECMAscript描述了语法、类型、语句、关键字、保留字、运算符、对象这些内容。ECMAscript定义了脚本语言的所有属性、方法和对象。

JavaScript/ActionScript/ScriptEase等其他语言通过实现ECMAScript作为其功能的基准。

文档对象模型DOM(document object model)——提供访问和操作网页内容的方法和接口。

浏览器对象模型BOM(browser object model)——提供与浏览器交互的方法和接口。

JavaScript特点

一种解释性执行的脚本语言。
一种基于对象的脚本语言。
一种简单弱类型脚本语言。
一种相对安全脚本语言。
一种事件驱动脚本语言。
一种跨平台性脚本语言。

JavaScript语法

区分大小写
弱类型变量
行尾的分号可有可无（建议都写）
括号{}用于代码块
注释方式同于C和Java

JavaScript引入

第一种：直接写在script标签内

script最好放在body之后，处理交互事件，等到内容显示之后载入；否则放在head标签内可能会造成加载延迟，或者覆盖代码(因html加载方式是从上到下加载的)。

    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body></body>
        <script>
            alert("hello");
        </script>
    </html>

第二种：引入js文件

    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body></body>
        <script src="js/index.js" type="text/javascript"></script>
    </html>

第三种：在标签内引入（不推荐）

    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <input type="button" name="btn" id="btn" value="按钮" onclick="alert('点击我！')" />
        </body>
    </html>

JavaScript基础语法

alert()

让浏览器弹出一个窗口，窗口里的内容就是alert（）中的内容

    <script type="text/javascript">
        alert("Hello World!");
    </script>

单行注释

用“//”注释内容，不可换行

多行注释

用“/**/”注释内容，可以换行

    <script type="text/javascript">
        /*var a=0;
        var b=1;
        var c=2;*/
        alert("Hello World!");//注释语句
    </script>

元素的获取

为了把事件写在script标签中，可以先获取到标签，主要有以下几种方法：

document.getElementById();//通过标签id值来获取标签；
document.getElementsByClassName();//通过标签的class值来获取标签（返回的是一个数组，将所有相同class名的标签都返回）；
document.getElementsByTagName();//通过标签的名字来获取标签（返回的是一个数组，将所有相同的标签名的标签都返回）；
document.getElementsByName();//通过标签的name值来获取标签，常用于选择表单元素（返回的是一个数组，将所有相同的name值的标签返回）。

onclick事件绑定

onclick事件会在对象被点击时发生。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。

    <input type="button" name="btn" id="btnclick" value="按钮" />
    <div id="divclick" style="width:100px;height:100px;background-color:pink;"></div>
    <script>
        document.getElementById("btnclick").onclick=function(){
            document.getElementById("divclick").style.display="none";
        }
    </script>

onmouseover事件和onmouseout事件

onmouseover属性在鼠标移动到元素上时触发。

onmouseout属性在鼠标指针移动到元素外时触发。

    <input type="button" name="btn" id="btnmouse" value="按钮" />
    <div id="divmouse" style="width:100px;height:100px;background-color:purple;"></div>
    <script>
        var btn=document.getElementById("btnmouse");
        var odiv=document.getElementById("divmouse");
        btn.onmouseover=function(){
            odiv.style.display="none";
        }
        btn.onmouseout=function(){
            odiv.style.display="block";
        }
    </script>

变量

变量首先是一个容器，可以用来存放数据，而且存放在这个容器中的数据可以发生变化。变量不仅可以是数字，可以是任意数据类型。

“var” + “变量名” + “=” + “值” + “;” 如var a=12;

变量命名规范：

区分大小写；
第一个字符必须是字母、下划线_或美元符号$；
其他字符可以是字母、下划线、美元符号或数字；
不能含空格；
不能以关键字或保留字命名关键字保留字点这里。

JavaScript数据类型

用typeof函数查看数据类型

1.null内容为空，表示一个空的值，可以创建数组、创建时间、创建字符串。

2.undefined没有赋值或不存在的变量类型，仅仅在判断函数参数是否传递时有用。

3.number数字类型：

包含整数、浮点数、科学计数法(1.2e5)、负数、NaN(Not a Number)和Infinity。number类型的数可以进行加、减、乘、除、求余、自增、自减运算。

4.string字符串类型：

字符串是以单引号''或双引号""括起来的任意文本。

''或""本身只是一种表示方式，不是字符串的一部分。

因此”abc”只有a、b、c三个字符；当字符串既包含单引号又包含双引号时，用转义字符\来标识，如”I\’m \”OK\”!”，表示字符串内容是I’m “OK”!

5.boolean布尔类型，布尔只有true和false，布尔常用在条件测试中。

6.Array数组类型

7.object对象类型

JavaScript运算符

1.赋值运算符=赋值仅仅是把给变量赋值，如a=5

+= a+=5相当于a=a+5

-= a-=5相当于a=a-5

*= a*=5相当于a=a*5

/= a/=5相当于a=a/5

%= a%=5相当于a=a%5

2.算数操作符

加 + 减 - 乘 * 除 / 求模/取余 %

3.关系操作符

大于 > 小于 < 小于等于 <= 大于等于 >= 不等于 !=

等于 == 此情况下，只要值相同就返回True

全等于=== 此情况需要值和类型都要匹配才能返回True

关系操作符返回的都是布尔值

4.条件操作符

5.逻辑操作符

与 && 或 || 非 !

6.递增递减操作符

++和--

j=i++等同于j=i;i=i+1 先赋值后运算

j=++i等同于i=i+1;j=i 先运算后赋值

操作符优先级

逻辑非>算术操作符>关系操作符>逻辑与逻辑或>条件操作符>赋值操作符

操作符书写

JavaScript书写：y=(x+2)*(((x+1)/3-2)/4+5)

相当于数学中的：y=(x+2)*{[(x+1)/3-2]/4+5}

小括号提升优先级

中括号数组 [1,2,3,4,5]

大括号对象 function(){}

紫--小梦

心怀梦想，志在远方。