web前端(三)——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'

变量类型

5种基本数据类型：

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

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

函数

函数定义与执行

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

　　

条件运算符

 　　==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

获取元素方法

　　使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素

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

....

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

如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的

解决方案：

　　1，javascrip放在元素后面

　　2,window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行

属性名在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可以读取或者写入标签包裹的内容