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)"/>