JavaScript 入门与进阶

JavaScript 介绍

javascript 是运行在浏览器端的脚本语言，javascript 主要解决的是前端与用户交互的问题，包括使用交互和数据交互，javascript 是浏览器解释执行的

前端三大块：

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

javascript 嵌入页面的方式

1）行间事件（主要用于事件）

<input type="button" value="OK" onclick="alert('ok!');">

2）页面 script 标签嵌入

<script type="text/javascript">

    alert("ok!");

</script>

3）外部引入（推荐使用）

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

嵌入页面时需注意

如果把 javascript 写到元素的上面，就会报错，因为页面是从上往下加载执行的，看下面的例子，js 去页面上获取元素 div1 的时候，元素 div1 还没有加载：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        var oDiv = document.getElementById('div1');

        alert(oDiv)

    </script>

</head>

<body>

    <div id="div1">div tag</div>

</body>

</html>

解决方法有两种：

1）理论上来说js标签放在html文档的任何位置都可以，规范起见，推荐放到body结束标签的末尾，包含到body标签内：

这样处理的好处是无需担心因页面未完成加载，造成DOM节点获取不到，使脚本报错的问题，而且能避免因脚本运行缓慢造成页面卡死的问题。另外，Yahoo的前端优化指南里就有这一条

<body>

    <!-- 这里是其他的HTML标签 -->

    <script> // 这里是代码 </script>

</body>

2）将javascript语句放到window.onload触发的函数里面，获取元素的语句会在页面加载完后才执行，就不会出错了：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        window.onload = function (){

            var oDiv = document.getElementById('div1');

            alert(oDiv)

        }

    </script>

</head>

<body>

    <div id="div1">div tag</div>

</body>

</html>

变量、数据类型及基本语法规范

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

var iNum = 123;

var sTr = "hello";

//同时定义多个变量可以用","隔开，共用一个 var 关键字

var iNum = 45, sTr = "world", sCount="68";

变量类型（共6种）

5 种基本数据类型：

number
string
boolean
undefined （变量声明未初始化，它的值就是 undefined）
null （表示空对象，如果定义的变量准备保存对象，可以将变量初始化为 null，在页面上获取不到对象，返回的值就是 null）

1 种复合类型：

　　object

语句块

javascript 语句开始可缩进也可不缩进，缩进是为了排版，方便阅读；一条语句的结尾应该以 ";" 结尾

var iNum = 123;

var sTr = "hello world";

function fnAlert(){

    alert(sTr)

};

fnAlert();

注释

//单行注释

var iNum = 123;

/*

多行注释

。。。

。。。

 */

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

区分大小写
第一个字符必须是字母、下划线（_）或者美元符号（$）
其它字符可以是字母、下划线、美元符或数字

匈牙利命名风格：

对象 o (Object)：oDiv
数组 a (Array)：altems
字符串 s (String)：sUserName
整数 i (Integer)：iltemCount
布尔值 b (Boolean)：blsComplete
浮点数 f (Float)：fPrice
函数 fn (Function)：fnHandler
正则表达式 re (RegExp)：reEmailCheck

函数

函数就是重复执行的代码块

函数的定义和执行

//函数定义

function fnAlert(){

    alert("hello world")

}

// 函数执行

fnAlert();

变量和函数的预解析

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

fnAlert();  //弹出 hello world

alert(iNum);  //弹出 undefined

function fnAlert(){

    alert("hello world")

}

var iNum = 123;

函数中传递参数

//接收参数时不需要指明参数的类型

function fnAlert(sTr) {

    alert(sTr)

}

fnAlert("hello world");

函数 return 关键字

return 关键字的作用：

返回函数中的值或者对象
结束函数的运行

demo：

function fnAdd(iNum1, iNum2) {

    var iRs = iNum1 + iNum2

    return iRs

    alert("here!")

}

var iCount = fnAdd(2,4);

alert(iCount);  //弹出 7

条件语句

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

条件运算符

==、===、>、>=、<、<=、!=、&&(与)、||(或)、!(非)

demo（比较两个数字的大小）：

var iNum01 = 1, iNum02 = 2;

var sTr;

if (iNum01 > iNum02) {

    sTr = "greater than"

}

else if (iNum01 < iNum02){

    sTr = "less than"

}

else {

    sTr = "equality"

}

alert(sTr);

获取元素方法

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        var oDiv = document.getElementById('div1');

        alert(oDiv)

    </script>

</head>

<body>

    <div id="div1">div tag</div>

</body>

</html>

操作元素属性

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

操作元素属性：

读取：var 变量 = 元素.属性名
修改：元素.属性名 = 新属性值

属性名在 js 中的写法：

html 的属性和 js 里面的属性写法一样
class 属性写成 className
style 属性里面的属性，有横线（-）的改成驼峰式，比如：font-size 改成 style.fontSize

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="text" name="50px" value="请输入搜索内容" id="input01">

    <a href="http://www.baidu.com" id="link01">百度一下</a>

    <script type="text/javascript">

        //通过id获取两个标签元素对象

        var oInput = document.getElementById("input01");

        var oA = document.getElementById("link01");

        //读取oInput元素属性值

        var sValue = oInput.value;

        var sType = oInput.type;

        var sName = oInput.name;

        // 读取 oA 元素属性值

        var sLinks = oA.href;

        //设置（修改）属性

        oA.style.color = "red";

        oA.style.fontSize = sName;

    </script>

</body>

</html>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="div01">div tag</div>

    <script type="text/javascript">

            //获取标签元素

            var oDiv = document.getElementById('div01');

            //读取

            var sTxt = oDiv.innerHTML;

            alert(sTxt);

            //写入标签元素

            oDiv.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>";

    </script>

</body>

</html>

事件属性

元素上除了有样式，id 等属性之外，还有事件属性，常用的事件属性有鼠标点击事件（onclick），鼠标移入事件（mouseover），鼠标移出事件（mouseout）

将函数名称赋值给元素事件属性，可以将事件和函数关联起来

demo：

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

oBtn.onclick = myAlert;

function myAlert(){

    alert("hello world");

}

匿名函数

定义函数可以不取名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素的事件属性来完成事件和函数的关联

这样可以减少函数命名，并且简化代码，函数如果作为公共函数，就可以写成匿名函数的形式

demo：

var oBtn = document.getElementById('btn1');

/*

oBtn.onclick = myalert;

function myalert(){

    alert("hello world");

}

*/

// 直接将匿名函数赋值给绑定的事件

oBtn.onclick = function (){

    alert('hello world222');

};

综合案例

网页换肤：

html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>09document</title>

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

    <script>

        window.onload = function () {

            var oLink = document.getElementById('link01');

            var oBtn01 = document.getElementById('btn01');

            var oBtn02 = document.getElementById('btn02');

            oBtn01.onclick = function () {

                oLink.href = "./css/skin01.css"

            };

            oBtn02.onclick = function () {

                oLink.href = "./css/skin02.css"

            };

        }

    </script>

</head>

<body>

    <h3>网页标题</h3>

    <input type="button" value="主题一" id="btn01">

    <input type="button" value="主题二" id="btn02">

</body>

</html>

css1：

/*设置网页的背景色*/

body{

    background: green;

}

input{

    width: 200px;

    height: 50px;

    background: pink;

    border: 0px;

    /*设置圆角*/

    /*border-radius: 25px;*/

    font-size: 20px;

}

css2：

/*设置网页的背景色*/

body{

    background: blue;

}

input{

    width: 200px;

    height: 50px;

    background: purple;

    border: 0px;

    /*设置圆角*/

    /*border-radius: 25px;*/

    font-size: 20px;

}

ending ~