4.JavaScript入门及进阶

课程介绍

介绍javascript的页面引入方式、javascript变量、javascript函数的使用以及条件语句的基本使用，javascript获取元素及操作元素属性。

JavaScript介绍

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

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

JavaScript嵌入页面的方式

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

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

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 语法：行内式必须是事件的格式k="v" -->
    <div onclick="alert('行内式')">测试行内式</div>

    <!-- 行内式基本不用：1.冗余代码多；2.行内式有局限性 -->
</body>
</html>

2、页面script标签嵌入

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

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 单行注释
        /*
            第一行
            第二行
        */ 
        // 警示框
        // ***** 如果代码将来压缩到一行为了提高速度，每个命令结束注意加分号
        alert('hello world');alert('ok');
    </script>
</head>
<body>
    
</body>
</html>

3、外部引入

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

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="my.js"></script>
</head>
<body>
    
</body>
</html>

my.js:

alert('外链式')

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

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

 var iNum = 123;
 var sTr = 'asd';

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

 var iNum = 45,sTr='qwe',sCount='68';

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        //    var 变量名 = 值   js命名变量的时候会在原有标识符的基础上加入数据类型的体现
        // fAa   sAa   bAa
        // o表示object 所有的标签通过js查找到之后都是对象型
        var oBox = document.getElementById('box')
        oBox.innerHTML = 'js'
        oBox.className = 'bb'
        oBox.style.color = 'red'
        oBox.style.fontWeight = 'bold'
        alert(typeof(oBox))
        }
    </script>
</head>
<body>
    <div id="box">测试css</div>
</body>
</html>

变量类型

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

1种复合类型：
object

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num1 = 1   // number数值型
        var num2 = 1.1 // number数值型
        var str = '1'  // string 字符串 
        var bool = true //boolean布尔型 

        // undefined 未定义 表示程序有bug
        var aa = null //null类型 虽然得到的提示字是object,但是因为没有真实数据,所以只能叫null类型
        // 对于真实有数据的得到提示字是object的数据才是对象型 -- 标签
        alert(typeof(aa))
        // 总结：基础(number,string,boolean,undefined,null)和复杂(复合 -- 对象型)
    </script>
</head>
<body>
    
</body>
</html>

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>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // alert(num)// 变量没有预解析到数据

        var num = 1
        
        // 定义 function fnAx(参数){命令}
        // 调用 fnAx(参数)
        alert(fnAlert()) // js函数预解析

        function fnAlert(){
            // alert('我是自定义函数里面的弹窗')
            return 1
            alert('22222')
        }
        
    </script>
</head>
<body>
    
</body>
</html>

条件语句

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

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

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // == 只判断数 === 判断数据类型和数     -----js是弱类型语言
        // alert(1 == '1')
        alert(1 === '1')
    </script>
</head>
<body>
    
</body>
</html>

if else

var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
    sTr = '大于';
}
else
{
    sTr = '小于';
}
alert(sTr);

多重if else语句

var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // （条件/参数）{命令}
        // if(条件){条件成立执行的命令}
        // var age = 10
        // if(age > 18){
        //     alert('可以上网了')
        // }
        // else{
        //     alert('回家写作业去')
        // }
        // if(){}else if(){}...else{}
        // 如果str == A 弹窗a str == B 弹窗b 既不是a也不是b弹窗daqiu
        var str = 'q'
        if(str == 'A'){
            alert('a')
        }
        else if(str == 'B'){
            alert('b')
        }
        else{
            alert('daqiu')
        }
    </script>
</head>
<body>
    
</body>
</html>

获取元素方法

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

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

上面的语句，如果把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>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    // 当浏览器窗口加载完成之后，执行后面大括号里面的命令
    window.onload = function(){
        // document 网页文档
        // 从整个网页文档里面，通过id名box查找标签
        alert(document.getElementById('box'))
    }
    </script>
    <script src="xx.js"></script>
    <!-- **** 注意：一个html页面只能有一个js入口函数 -->
</head>
<body>
    <!-- 范围  特点 -- 必须是唯一性的 -->
    <div id="box">div</div>
</body>
</html>

操作元素属性

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

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

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

<script type="text/javascript">

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

</script>

......

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

例子1（控制内容）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            // document.getElementById('box').innerHTML = 'js'
            // document.getElementById('box').innerHTML = '<p>pppppp</p>'
            // 清空div的内容
            document.getElementById('box').innerHTML = ''
        }
    </script>
</head>
<body>
    <div id="box">div</div>
</body>
</html>

例子2（控制标签属性）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            // 如果控制class属性js写为className，其余html属性写法和js控制的时候写法一样
            document.getElementById('img').src = '../img1.jpg'
            document.getElementById('img').alt = '赵四'
            document.getElementById('img').className = 'zhaosi'
        }
    </script>
</head>
<body>
    <img src="../img2.jpg" alt="" id="img" class="aa">
</body>
</html>

例子3（控制css样式）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            document.getElementById('box').style.color = 'red'
            document.getElementById('box').style.background = 'green'
            // font-size -- js带“-” 写为小驼峰
            document.getElementById('box').style.fontSize = '60px'
        }
    </script>
</head>
<body>
    <div id="box">测试css</div>
</body>
</html>

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

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

......

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

事件属性及匿名函数

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

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');

    oBtn.onclick = myalert;

    function myalert(){
        alert('ok!');
    }
}

</script>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn1 = document.getElementById('btn1')
            var oBtn2 = document.getElementById('btn2')
            var oBtn3 = document.getElementById('btn3')
            // 发生事件的目标.事件属性 = 函数名/匿名函数(没有名字的函数 function (){})
            // ondblclick 双击
            oBtn1.onclick = fnClick
            function fnClick(){
                alert('单击成功')
            }
            oBtn2.onmouseover = function(){
                alert('鼠标滑过成功')
            }
            oBtn3.onmouseout = function(){
                alert('鼠标离开')
            }
        }
    </script>
</head>
<body>
    <!-- 事件语法 常用事件：单击、鼠标滑过、鼠标离开 -->
    <button id="btn1">单击</button>
    <button id="btn2">鼠标滑过</button>
    <button id="btn3">鼠标离开</button>
</body>
</html>

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

<script type="text/javascript">

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

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

</script>

综合实例

1、网页换肤

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="pifu2.css" id="link">
    <script>
        window.onload = function(){
            // 按钮单击，换外观 -- 单击：换css而已 -- 找到link标签，href取值做更改
            var oBtn1 = document.getElementById('btn1')
            var oBtn2 = document.getElementById('btn2')
            var oLink = document.getElementById('link')
            oBtn1.onclick = function(){
                // 更改link标签的href属性值
                oLink.href = 'pifu1.css'
            }
            oBtn2.onclick = function(){
                oLink.href = 'pifu2.css'
            }
        }
    </script>
</head>
<body>
    <h1>网页换肤</h1>
    <button id="btn1">皮肤一</button>
    <button id="btn2">皮肤二</button>
</body>
</html>

pifu1.css:

body{
    background: #ccc;
}
button{
    width: 200px;
    height: 50px;
    background: pink;
    border: none;
    color: black;
    font-size: 20px;
    border-radius: 25px;
}

pifu2.css:

body{
    background: gold;
}
button{
    width: 200px;
    height: 50px;
    background: green;
    border: none;
    color: white;
    font-size: 20px;
    border-radius: 25px;
}

2、打印名片

<!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" type="text/css" href="css/main02.css">
    <script>
        window.onload = function(){
            //1.设置按钮绑定单击事件，获取左侧用户输入的数据，显示到右侧；下拉菜单选中不同的选项，更换不同的风格（css）
            // 按钮
            var oSetcard = document.getElementById('setcard')
            var oInp01 = document.getElementById('input01')
            var oInp02 = document.getElementById('input02')
            var oInp03 = document.getElementById('input03')
            var oInp04 = document.getElementById('input04')
            var oInp05 = document.getElementById('input05')
            var oInp06 = document.getElementById('input06')
            var oInp07 = document.getElementById('input07')

            // 右侧显示区域
            var oCardWrap = document.getElementById('card_wrap')
            oSetcard.onclick = function(){
                // 如果用户没有输入内容，报错提示 -- 名字和职位是必填项
                if(oInp01.value == '' || oInp02.value == ''){
                    alert('请输入内容')
                    return
                }

                //1.获取数据 2.显示数据 == 获取每个表单控件的value属性值，把这个值显示 -- 找到标签保留标签和类的基础上替换文字即可
                // alert(oInpo1.value)
                var str = '<div class="p01">'+oInp01.value+'<em>'+oInp02.value+'</em></div><div class="p02"><p class="company">'+oInp03.value+'</p><p>手机：1808888888</p><p>email：dasan@126.com</p><p>地址：中关村银河大厦B座2603</p></div>'

                // 设置右侧显示区域的内容是 str
                oCardWrap.innerHTML = str

                // 下拉菜单控制风格：如果下拉选中风格一（如果下拉菜单的value==0），右侧就是风格一的样式-- css(更换class属性值idcard01 02 03)；如果下拉选中风格二，右侧就是风格二的样式；
                if(oInp07.value == 0){
                    oCardWrap.className = 'idcard01'
                }
                else if(oInp07.value == 1){
                    oCardWrap.className = 'idcard02'
                }
                else{
                    oCardWrap.className = 'idcard03'
                }

                
            }
        }
    </script>
</head>
<body>
    <div class="set_con">
        <div class="left_set">
            <label>姓名：</label>
            <input type="text" id="input01">
            <label>职位：</label>
            <input type="text" id="input02">
            <label>公司名称：</label>
            <input type="text" id="input03">
            <label>手机：</label>
            <input type="text" id="input04">
            <label>email：</label>
            <input type="text" id="input05">
            <label>地址：</label>
            <input type="text" id="input06">
            <label>风格：</label>
            <select  id="input07">
                <option value="0">风格一</option>
                <option value="1">风格二</option>
                <option value="2">风格三</option>
            </select>
            <input type="button" value="设 置" class="setbtn" id="setcard">
        </div>
        <div class="right_show">
            <div class="idcard01" id="card_wrap">
                <div class="p01">张大山<em>产品经理</em></div>
                <div class="p02">                    
                    <p class="company">银河科技信息技术有限公司</p>
                    <p>手机：1808888888</p>
                    <p>email：dasan@126.com</p>
                    <p>地址：中关村银河大厦B座2603</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

一、 css选择器权重

当一个标签选择器使用冲突的时候谁生效的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="my.css">
    <style>
    div{
            color: red; /* 继承性 */
    }
    .father{
        color: green;
    }
    p{
        color: blue!important;
    }
    .son{
        color: yellow;
    }
    /* #son{
        color: brown;
    } */
    div p{
        color: gold;
    }
    .father p{
        color: purple;
    }
    div .son{
        color: aqua;
    }
    .father .son{
        color: black;
    }
    </style>
    <!-- <link rel="stylesheet" href="my.css"> -->
    <!-- 1.继承性权重最低：只要自己有样式则执行自己的
         2.外链式和嵌入式看书写顺序，谁在下谁生效 < 行内式
         3.标签 < 类 < id
         4.!important 提权功能：慎用
    -->
</head>
<body>
   <div class="father">
       <p class="son" id="son" style="color: #ccc;">测试选择器权重</p>
   </div>
</body>
</html>

1、继承性权重最低：只要自己有样式则执行自己的

2、外链式和嵌入式看书写顺序，谁在下谁生效 < 行内式

3、标签 < 类 < id

4、!important 提权功能，慎用

二、 PS软件前端使用方法

1、看颜色：单击色块工具 – 目标单击单击 – 复制粘贴色值

2、看文字样式 T – 单击目标文字，菜单栏下面查看文字效果 – 释放选择：ctrl+enter或选中其他的工具

3、测量尺寸：ctrl+R标尺 – 右键 – 改单位为px – 左上第二个工具 – 拖拽

4、切图:独立小图标 + 形成html文件

第五个工具切片工具 – 拖拽目标 – 文件 – 导出web和设备所用格式 – 存储 – 选择目标位置 – 选择所有用户切片或选中切片 – 存储

三、了解JavaScript

1995年，那个年代没有任何一个脚本语言是运行在浏览器端，当时为了把表单验证在浏览器端完成所以开始研发js

JavaScript – livescript java

雷锋雷峰塔

周杰周杰伦

Js抱java大腿

四、 js的书写方法

写在哪语法是什么

4.1 嵌入式

环境标签 script

// 单行注释

/* 多行注释 */

alert()

4.2 外链式

4.3 行内式

五、 *** js查找标签

document.getElementById()

六、 js入口函数

作用：先执行标签再执行js

window.onload = function(){ 命令 }

七、 *** js控制标签

7.1 控制标签内容 – innerHTML

7.2 控制标签属性

标签的属性k=”v” 标签的css属性k：v;

如果控制class属性js写为className,其余html属性写法和js控制的时候写法一样

7.3 控制标签css样式

查找标签.style.csskey

注意：如果是font-size，写为小驼峰

八、变量

Var ming = zhi 名字加入数据类型的体现标签存储到js object

九、数据类型

基础：number string boolean undefined null

复杂：对象型

检测数据类型 typeof()

十、函数

Function fnAlert(){}

fnAlert() -- 函数可以预解析

十一、条件语句

If(){}else{}

If(){} else if(){}

注意：运算符

判断相等：== ===（数据类型和数）

与 &&

或 ||

非！

十二、*** 事件

事件语法 + 常用的事件属性：单击onclick 鼠标滑过onmouseover 鼠标离开onmouseout

目标.事件属性 = 命令

命令：1、函数名 2、匿名函数function(){}

十三、打印名片

1、按钮单击

2、数据显示 – 获取表单控件的value – 拼字符串 – 设置显示区域的内容是这个字符串

3、换右侧区域的风格 – 分析出if – 条件：看下拉菜单选中了哪一项（下拉菜单的vlaue == 0/1/2） -- 命令：右侧区域的class属性换值

4、为空的判断 – if ：获取value==‘’，执行命令报错提示用户alert + return