4 JavaScript基础2----作用域，条件语句，逻辑运算符，获取与操作标签原数及属性

1 变量作用域

1. 变量作用域的介绍
变量作用域就是变量的使用范围，变量分为:
	局部变量
	全局变量

2. 局部变量
局部变量就是在函数内使用的变量，只能在函数内部使用。
<script type="text/javascript">
    function myalert() {
        // 定义局部变量
        var b = 23;
        alert(b);
    }
    myalert(); // 弹出23
    alert(b);  // 函数外使用出错
</script>

3. 全局变量
全局变量就是在函数外定义的变量，可以在不同函数内使用。
<script type="text/javascript">
    // 定义全局变量
    var a = 12;
    function myalert()
    {
        // 修改全局变量
        a++;
    }
    myalert();
    alert(a);  // 弹出13    
</script>

2 条件语句

1、条件语句语法
	if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
	if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
	if...else if....else 语句 - 使用该语句来判断多条件，执行条件成立的语句
	
2. 比较运算符
比较运算符		描述						例子
==				等于					x == 8 为 false
===			全等(值和类型)		x === 5 为 true; x === "5" 为 false

比较运算符示例代码:
var iNum01 = 12;
var sNum01 = '12';
if(iNum01==12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// "==" 符号默认会将符号两边的变量转换成数字再进行对比，这个叫做隐式转换
if(sNum01==12){
    alert('相等！');
}
else{
    alert('不相等！')
}
// "===" 符号不会转换符号两边的数据类型
if(sNum01===12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// 多条件判断
var sFruit = "苹果";
if (sFruit == "苹果") {
    alert("您选择的水果是苹果");
} else if (sFruit == "鸭梨") {
    alert("您选择的水果是鸭梨");
} else {
    alert("对不起，您选择的水果不存在!")
}

3. 逻辑运算符

js中 true 和 flase 均为小写
假如 x=6, y=3, 查看比较后的结果:

比较运算符		描述				例子
&&				and			(x < 10 && y > 1) 为 true
||				or			(x==5 || y==5) 为 false
!				not			!(x==y) 为 true
	
逻辑运算符示例代码:
var x = 6;
var y = 3;

if(x < 10 && y > 1){
    alert('都大于');
}
else{
    alert('至少有一个不大于');
}

if(x > 5 || y > 7 ){
    alert('至少有一个大于');
}
else{
    alert('都不大于');
}

if(!(x == y)){
    alert('等于')
}
else{
    alert('不等于')
}

4 获取标签元素

1. 获取标签元素
	可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，
获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/javascript">
// onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数，
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

5 操作标签元素属性

1. 属性的操作
首先获取的页面标签元素，然后就可以对页面标签元素的属性进行操作，属性的操作包括:
	属性的读取
	属性的设置
	
2. 属性名在js中的写法
html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

<style>
    .sty01{
        font-size:20px;
        color:red;
    }
    .sty02{
        font-size:30px;
        color:pink;
        text-decoration:none;
    }
</style>

<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;
        // 操作class属性,需要写成“className”
        oA.className = 'sty02';
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }
</script>

<input type="text" name="setsize" id="input1" value="20px">
<a href="#" id="link01" class="sty01">这是一个链接</a>

6 操作标签元素内容 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.itcast.cn">传智播客<a/>';
    }
</script>

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