javascript入门

JavaScript(原生js)是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

1. js嵌入页面的方式（3种）

– 行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
– 页面script标签嵌入

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

– 外部引入
<script type="text/javascript" src="js/index.js"></script>

2. 变量及数据类型

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

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

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

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

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

单行注释：
// var iNum = 123;
多行注释：
/*  
    多行注释
    1、...
    2、...
*/

• 变量、函数、属性、函数参数命名规范
  – 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

3. 函数

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

• 函数定义与执行

<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(5);
</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>

4. 条件语句

通过条件来控制程序的走向，就需要用到条件语句。
条件运算符
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
注意：===会先判断类型，再判断值，如果类型不一样，就不一样。

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

5. 获取元素方式

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，另外将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，避免获取不到元素。

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

6.操作元素属性

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

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

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

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

7. 事件属性和匿名函数

• 事件属性
  元素上除了有样式，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>