JavaScript介绍

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

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

JavaScript嵌入页面的方式

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

<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入

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

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

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

 var iNum = 123;
 var sTr = 'asd';
 //同时定义多个变量可以用","隔开，公用一个‘var’关键字
 var iNum = 45,sTr='qwe',sCount='68';

变量类型

5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：
object

javascript语句与注释

1、javascript语句开始可缩进也可不缩进，缩进是为了方便代码阅读，一条javascript语句应该以“;”结尾;

<script type="text/javascript">    
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
    alert(sTr);
};
fnAlert();
</script>
2、javascript注释

<script type="text/javascript">    

// 单行注释
var iNum = 123;
/*  
    多行注释
    1、...
    2、...
*/
var sTr = 'abc123';
</script>

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

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

匈牙利命名风格：

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

函数

函数就是重复执行的代码片。

函数定义与执行

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数执行
    fnAlert();
</script>

变量与函数预解析

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

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

函数传参 javascript的函数中可以传递参数。

<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>
// 函数'return'关键字 
// 函数中'return'关键字的作用：
//1、返回函数中的值或者对象
//2、结束函数的运行

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}
var iCount = fnAdd(3,4);
alert(iCount);  //弹出7
</script>

获取元素方法

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

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 当整个页面加载完之后，再执行大括号里面的代码
        window.onload = function(){
            var oDiv = document.getElementById('div01');

            oDiv.style.color = 'gold';
            oDiv.style.width = '300px';
            oDiv.style.height = '300px';
            oDiv.style.background = 'green';
            // 样式中带“-”的，要写出驼峰式：
            oDiv.style.fontSize = '20px';
        }  
    </script>    
</head>
<body>
    <div id="div01">这是一个div</div>
    
</body>
</html>

View Code

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边

....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

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

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">这是一个div元素</div>

操作元素属性

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

操作元素属性
var 变量 = 元素.属性名读取属性
元素.属性名 = 新属性值改写属性

属性名在js中的写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oA = document.getElementById('link1');
    // 读取属性值
    var sValue = oInput.value;
    var sType = oInput.type;
    var sName = oInput.name;
    var sLinks = oA.href;
    // 写(设置)属性
    oA.style.color = 'red';
    oA.style.fontSize = sValue;
}

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>

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

window.onload = function(){
    var oDiv = document.getElementById('div1');
    //读取
    var sTxt = oDiv.innerHTML;
    alert(sTxt);
    //写入
    oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
}
......

<div id="div1">这是一个div元素</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .sty01{
            color:red;
            font-size:20px;
        }

        .sty02{
            color:pink;
            font-size:30px;
        }
    
    
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div01');
            var oA = document.getElementById('link01');

            // 读取属性值：
            var sId = oDiv.id;
            //alert(sId);

            // 写属性值，也叫设置属性值
            oDiv.style.color = '#f00';

            // 操作class属性,class名称要写出className
            oA.className = 'sty02';

            // 操作元素包裹的内容：
            // 读取元素包裹的内容
            var sTr = oDiv.innerHTML;
            //alert(sTr);

            // 设置元素包裹的内容
            oDiv.innerHTML = '改变的文字';
            oDiv.innerHTML = '<a href="http://www.baidu.com">百度网</a>';
            oDiv.innerHTML = '<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>'

        }
    
    </script>
</head>
<body>
    <div id="div01">这是一个div</div>
    <a href="#" id="link01" class="sty01">这是一个链接</a>
</body>
</html>

View Code

事件属性及匿名函数

事件属性
元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有鼠标点击事件属性(onclick)，鼠标移入事件属性(onmouseover),鼠标移出事件属性(onmouseout),将函数名称赋值给元素事件属性，可以将事件和函数关联起来。

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
}

匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式。

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接将匿名函数赋值给绑定的事件

    oBtn.onclick = function (){
        alert('ok!');
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn01');
            var oDiv = document.getElementById('div01');

            /*function fnChange(){
                oDiv.style.width = '300px';
                oDiv.style.height = '300px';
                oDiv.style.background = 'gold';
            }
            //fnChange();
            // 将事件属性写到JavaScript中
            oBtn.onclick = fnChange;
            */

            // 上面的写法可以改成下面匿名函数的写法：
            oBtn.onclick = function(){
                oDiv.style.width = '300px';
                oDiv.style.height = '300px';
                oDiv.style.background = 'gold';
            };
            
        }    
    </script>
</head>
<body>
    <input type="button" value="改变样式" id="btn01">
    <div id="div01">这是一个div</div>
</body>
</html>

点击按钮改变元素样式

课堂实例
网页换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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>
    <h1>网页内容</h1>
    <input type="button" value="皮肤一" id="btn01">
    <input type="button" value="皮肤二" id="btn02">
</body>
</html>

View Code

条件语句

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

条件运算符 
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

var iNum01 = 12;
var sNum01 = '12';

/*if(iNum01==12){
alert('相等！')
}
else{
alert('不相等！')
}
*/
// "==" 符号默认会将两边的变量转换成数字在进行对比，这个叫做隐式转换
/*if(sNum01==12){
alert('相等！')
}
else{
alert('不相等！')
}
*/
// "===" 符号不会转换变量类型
if(sNum01===12){
alert('相等！')
}
else{
alert('不相等！')
}

课堂实例
聊天对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .talk_con{
            width:600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
           margin:10px; 
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
    <script type="text/javascript">      
        window.onload = function(){
           var oWords = document.getElementById('words');
           var oWho = document.getElementById('who');
           var oTalk = document.getElementById('talkwords');
           var oBtn = document.getElementById('talksub');

           oBtn.onclick = function(){
               // 获取下拉框的value属性值
               var sVal01 = oWho.value;

               // 获取输入框里面输入的内容
               var sVal02 = oTalk.value

               // 清空输入框里面的内容
               oTalk.value = '';

               // 判断输入框是否为空
               if(sVal02==''){
                   alert('请输入内容！');
                   return;
               }

               var sTr = '';

               if(sVal01==0){
                   sTr = '<div class="atalk"><span>A说：'+ sVal02 +'</span></div>';
               }
               else{
                   sTr = '<div class="btalk"><span>B说：'+ sVal02 +'</span></div>';
               }

               oWords.innerHTML = oWords.innerHTML + sTr;
           }
        }

    </script>
</head>
<body>
    <div class="talk_con">
        <div class="talk_show" id="words">
            <div class="atalk"><span>A说：吃饭了吗？</span></div>
            <div class="btalk"><span>B说：还没呢，你呢？</span></div>
        </div>
        <div class="talk_input">
            <select class="whotalk" id="who">
                <option value="0">A说：</option>
                <option value="1">B说：</option>
            </select>
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送" class="talk_sub" id="talksub">
        </div>
    </div>
</body>
</html>

聊天对话框