JS

JavaSccript入门

介绍

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

前端三大块

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

JavaSccript嵌入

行间事件

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

页面script标签插入

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

外部引入

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

JavaSccript基础语法

JavaSccript是一种弱类型语言，JavaSccript的变量类型由他的值决定

格式：var 变量名=变量值==；==

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

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

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

变量类型

5大类：number数字类型、string字符串类型、bool类型、undefined 类型、null类型（表示空对象）

命名规范

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

JavaSccript函数

函数与变量预解析

JavaSccript解析过程分为两个阶段：编译阶段——>执行阶段

编译阶段会将function定义的函数提前，将var声明的变量提前并且赋值为undefined

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

函数传参

<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

函数返回值

函数通过关键字==‘return’==返回值，有两个作用

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

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

但是这个方法没有预加载功能，即执行过程中顺序是由上至下，当通过getElementById拿取<div>元素时，该<div>还未被创建也就不存在获取元素的情况

提供两种解决方案：

方案一：将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中的写法

html的属性和js里面属性的写法一样
“class ”属性写成“className”
"style"属性里面的属性，由横杠的改成驼峰式，例如“font-size”—>“style.fontSize”

<script type="text/javascript">
        window.onload=function(){
            var oInput=document.getElementById('input01');
            var oA=document.getElementById('link01');
            //读取属性
            var sValue=oInput.value;        
            var sType=oInput.type;
            var sName=oInput.name;
            var slinks=oA.href;
            //修改属性
            oA.style.color='red';
            oA.style.fontSize=sValue;
            alert(sType);
            alert(sName);
            alert(slinks);
        }
    
    </script>
</head>
<body>
    <input type="text" name="setsize" id="input01" value="20px">
    <a href="#" id="link01">HelloWorld</a>

innerHTML

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

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

            var sTxt=oDiv.innerHTML;
            alert(sTxt);

            oDiv.innerHTML='HellWorld';
        }
    </script>
</head>
<body>
    <div id="div01">NiceToMeetYou</div>

事件属性、匿名函数

事件属性

元素除了有样式，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!');
    }
}

实际应用：网页换肤

Web-JS基础

JS