Javascript初入门3

学习目标

学习JS基础，与HTML结合形成小交互

---

学习内容

1. JS全局变量和局部变量
2. JS运算符
3. 三元表达式
4. JS的函数初步

---

一、JS全局变量和局部变量

• 全局变量：在函数体之外声明的变量属于全局变量，全局变量的生命周期是，浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间.能使用局部变量尽量使用局部变量。
• 局部变量：在函数体当中声明的变量,包括一个函数的形参都属于局部变量，局部变量的生命周期是，函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。局部变量生命周期较短。

  //全局变量 a
  var a;
  
  //局部变量 p
  function printf(){
      var p = 'hello world'
      alert(p)
  }

 二、JS运算符

1.算术运算符

运算符	实例
+（加）	1 + 1 = 2
- （减）	4 - 3 = 1
* （乘）	10 * 5 = 10
/ （除）	10 / 20 = 0.5
% （取余/取模）	9 % 2 = 1

2.前后置递增运算符(i++/++i)

• 前置递增和后置递增运算符可以简化代码的编写，让变量的值＋1比以前写法更简单
• 单独使用时，运行结果相同
• 与其他代码联用时，执行结果会不同
• 后置:先原值运算，后自加(先人后己)
• 前置∶先自加，后运算(先已后人)
• 开发时，大多使用后置递增/减，并且代码独占一行，例如:num++;或者num--;

3.比较运算符

运算符名称	说明	案例	结果
<	大于号	1 < 2	true
>	小于号	1 > 2	false
<=	小于等于号	2 <= 2	true
>=	大于等于号	2 >= 3	false
==	判等号（能转型）	30 == '30'	true
!=	不等号	11 != 11	false
===  !==	全等 要求值和类型都一致	22 === '22'	false

4.逻辑运算符

逻辑运算符	说明	案例
&&	逻辑与， and	true && false  == false
||	逻辑或， or	true || false == ture
!	逻辑非， not	!true == false

5.赋值运算符

赋值运算符	说明	案例
=	直接赋值	var usrName = 'xxx'
+=、-=	加、减一个数后再赋值	var age = 10; age += 5;   //15
*=、/=、%=	乘、除、取模后再赋值	var age = 2; age* = 5;  //10

6.运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++  --  !
3	算数运算符	先 * 、/ 、% 后 +、 -
4	关系运算符	>、>=、<、<=
5	相等运算符	==、!=、===、!==
6	逻辑运算符	先 && 后 ||
7	赋值运算符	=
8	逗号运算符	,

三、三元表达式

        如果条件表达式结果为真则返回表达式1的值如果条件表达式结果为假则返回表达式2的值

//三元表达式

var num = 10
num >= 5 ? '是的' : '不是的'  //是的

四、JS的函数初步

//JavaScript函数语法格式

    /*第一种：
        function 函数名(形参列表){
            函数体
        }
    */
    /*第二种：
        函数名 = function(形参列表) {
            函数体
        }
    */

        注意：JS中的函数不需要指定返回值类型

实例：简单函数构造调用

// 判断闰平年函数构造
<script>
leapyear = function () {
            var year = prompt('请输入年份')
            if (year % 400 == 0 || year % 4 == 0) {
                alert(year + '年是闰年')
                console.log(year + '年是闰年')
            }
            else {
                alert(year + '年是平年')
                console.log(year + '年是平年')
            }
        }
</script>

//函数调用
    <input type="button" value="判断是否闰年" onclick="leapyear()" />