JavaScript入门

一、javascript引入页面的三种方式：

1、行间事件： 将javascript代码通过标签的事件属性写在标签中

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

2、内嵌式：在head标签中插入script标签，然后在script标签中写JavaScript代码

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

3、外链式：将JavaScript代码写在一个js文件中，html文件中通过script标签来引入这个js文件

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

avaScript简介：

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

前端三大块

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

二、javascipt数据类型：

1、5种基本数据类型：number、string、boolean、undefined、null
2、1种复合类型：object

三、变量及关键字的命名规则：

注释：
单行注释：//
多行注释：/* --内容-- */
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

四、函数相关：

1、函数定义 用function 关键字
2、函数的预解析 函数可以先调用，再定义

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

五、条件语句

1、双等和三等的区别
双等于是先将等式双方的数据类型转化成相同的，多等是不转化和python中的双等于相同。
2、&& || ！的写法
&& --》“和”，|| --》 “或”，！–》 取反
3、多重if else语句写法和python的区别
else if 相当于python中的elif.

六、获取元素方法

document.getElementById(‘id名称’)
注意：
可以使用内置对象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>

七、操作元素属性

1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式
4、innerHTML 操作元素内包裹的内容

操作元素属性

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>

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.baidu.com"><a/>';
    }
</script>

......

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

八、事件属性和匿名函数

oDiv.onclick = function(){ ...... }

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

<script type="text/javascript">

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

   oBtn.onclick = myalert;

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

</script>

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

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