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

参数命名规范

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

• 与python的区别就是可以使用$(包括首字符)

变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。(所以js代码可先将函数的调用写在函数定义之前,通用变量的调用也可以写在变量的声明之前)

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

<script type="text/javascript">
    function fnAlert(a){ //传递参数a
        alert(a); //使用参数a
    }
    fnAlert(12345);
</script>

函数’return’关键字
函数中’return’关键字的作用：
1、返回函数中的值或者对象
2、结束函数的运行

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs; //使用return结束函数的运行
    alert('here!'); //此句不会执行
}

var iCount = fnAdd(3,4);
alert(iCount);  //弹出7
</script>

条件语句

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

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

多重if else语句

var iNow = 1;
if(iNow==1) //条件要使用括号括起来
{
    ... ;
}
else if(iNow==2) //条件要使用括号括起来
{
    ... ;
}
else
{
    ... ;
}

获取元素方法

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

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    // 还可以使用getElementByClass,getElementByName
</script>
....
<div id="div1">这是一个div元素</div>

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

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

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1'); //获得对应的属性对象
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value; //得到该标签的value并赋值为svalue
        var sType = oInput.type;
        var sName = oInput.name;  // 得到该标签的name并赋值为 sNmae
        var sLinks = oA.href;
        // 写(设置)属性
        oA.style.color = 'red'; // 将link1的color属性赋值为 red
        oA.style.fontSize = sValue;
    }

</script>

......

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

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML; //得到Id为div1的标签包裹的内容
        alert(sTxt); 
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>'; //将此语句写入div1的标签中
    }
</script>

......

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

事件属性及匿名函数

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

<script type="text/javascript">

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

    oBtn.onclick = myalert; //当鼠标点击该元素的时候调用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>