I can 前端-04 JavaScript

JavaScript特点

简单

        语法和C#几乎相近

动态执行

        事件驱动，无需经过Web服务器，直接相应

跨平台

        浏览器解析

减轻服务器压力

        验证、图片轮换客户端实现

主要应用方向

        Ajax
        JQuery

变量

        以var开头定义，以；号结尾

//① 
var name;
name = "abc";
//② 
var name = "abc";
//③ --只有num3赋值
var num1, num2, num3 = "3";

        全局变量
                定义在函数外面，可以被其他函数使用

        局部变量
                定义在函数里面，只有自己函数可以用

<script type="text/javascript">
    var userName = "1"; //全局变量
    function test(){
        var userName2 = "2"; //局部变量
    }
</script>

注意的问题

• 多个js文件，变量冲突！
• 区分大小写
• 首字母不能是数字
• 不能用关键字
• camel命名：totalMoney

常见对话框

        alter 提示对话框

        confirm 选择对话框

<script type="text/javascript">
    if(confirm("选择确定吗？"))
    {
        alter("你选择了确定！");
    }else
    {
        alter("你没有选择确定");
    }
</script>

数据类型及转换

数据类型

        6中数据类型，常见前4种

• string 字符串
• 数值类型
• boolean类型
• undefined —变量创建后没有给赋值就
• null
• object

运算符

                算数运算符–返回数值

• +、-、*、/、%、++、–、-（求反）

                比较运算符–返回true/false

• ==、！=、>、>=、<、<=

                逻辑运算符–返回true/false

• &&、||、！

                赋值运算符 =

表达式

var num = 10;

var name = "小王";

var result = true;

var num2 = num;

数据类型转换

• 字符串转整数 parseInt()
• 字符串转浮点 parseFloat()

函数

形式

function 函数名（参数1，参数2）
{
    //函数体
}

• 函数必须以function开头
• 函数参数可以没有，有的话直接写名称，以逗号分隔
• 如果有返回值，使用return
• 函数体用分号分隔

调用

        事件不区分大小写，这里onclick和onClick是一样的

<script type="text/javascript">
    function Add(a,b)
    {
        return a+b;
    }
</script>

<input type="button" value="开始计算" onclick="Add(1,2)" />

注释

        单行注释 //
        当行注释 /* */

逻辑控制

if

if(a<b)
{}
else
{}

for

for(var i; i < 10; i++)
{}

while

while(i<4)
{}

switch

switch(day)
{
    case "1":
        r = "5";
        break;
    case "2":
        r = "45";
        break;
    default:
        r = 44;
}

常用事件

         鼠标单击事件 onClick

         鼠标放上事件 onMouseOver

         鼠标移出事件 onMouseOut

         表单加载事件 onLoad

         表单提交事件 onSubmit

超链接使用事件

        需求：a标签根据js方法是否要跳转

js方法
function Test(a,b)
{
    var r = a+b;
    if(r>10)
    {
        return ture;
    }
    else
    {
        return false;
    }
}

a标签

<a href="www.baidu.com" onclick="return Test(2,5)"/>