JavaScript入门精要-优快云博客

Day2

JavaScript

JavaScript–完成数据验证，运行在客户端，需要运行浏览器来解析JS代码

JS是弱类型语言-即数据类型可变，java是强类型语言–在定义变量时类型已经确定并且不可变

特点：

（1)交互性—可以做到信息的动态交互

（2）安全性–不允许直接访问本地硬盘

（3）跨平台性–只要是可以解析js的浏览器即可，与平台无关

JavaScript与HTML的结合

（1）在HTML的head标签中，或者body标签中使用script标签来写JavaScript代码即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript">
        //JavaScript提供的警告函数，可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("进入JavaScript")
    </script>
</head>
<body>
</body>
</html>

(2)在HTML文件中通过script标签引入一个单独的JavaScript文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <!--script标签可以用来定义js代码，也可以迎来引入js文件，二者选其一若要引入多个js文件，这需要多个script标签 -->
    <script type="text/javascript" src="js1.js">

    </script>
</head>
<body>

</body>
</html>

javascript 变量

变量类型：

数值类型：number 布尔类型：boolean

字符串类型：string 函数类型：function

对象类型：object

JavaScript里特殊的值：

undefined：未定义，所有js变量在未赋予初始值时，默认值都是undefined

null：空值

NAN：全称-not a number非数值，非数字

变量定义：

var 变量名=变量值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var i=12;
        //typeof()返回变量的数据类型
       // alert(typeof(i));//输出为number
        i='abcd';
        alert(typeof(i));//string 类型，可以用双引号也可以用单引号
        var a=12;
        var b='abc';
        alert(a*b);//输出NAN，非数字非数值
    </script>
</body>
</html>

关系运算:

主要关注与java不同的地方：

全等于“===”除了字面值的比较之外，还要比较两个数据的数据类型

逻辑运算:–与java有一定区别

注：在JavaScript中所有变量都可以作为一个Boolean类型的变量去使用

其中0，null,undefined,""(空串没有任何内容包括空格)被认为是false

&&-且运算：

（1）当表达式全为真时，返回最后一个表达式的值。

（2）当表达式中，有一个为假时，返回第一个为假的表达式的值

||–或运算：

（1）当表达式全为假时，返回最后一个表达式的值

（2)只要有一个表达式为真，就会返回第一个为真的表达式的值

！–非运算：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var a="abc";
        var b=true;
        var c=false;
        var d=null;
      //  alert(a&&b);//返回true，表达式都为真，返回最后一个表达式的值
       // alert(b&&a);//返回abc
       // alert(b&&c);//返回false，当存在假时，返回第一个为假的表达式的值
        //alert(b&&d);//返回null
      //  alert(c||a);//返回abc
        alert(c||d);//返回null

    </script>


</body>
</html>

JAVAScript数组–重点

F12+FN显示控制台

数组的定义：

var 数组名=[];//空数组

var 数组名=[11,‘abc’,true];//定义数组同时赋值

在java中不能给空数组赋值，因为会越界，长度不会变，但在JavaScript中有区别

以及数组的遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript数组</title>
</head>
<body>
    <script type="text/javascript">
        var arr=[];//在java中不能给空数组赋值，会报越界错误
       // alert(arr.length);//返回零，因为是空数组，长度为零
        arr[0]=13;//赋值
      //  alert(arr.length);//返回1
        arr[2]='abc';
        //alert(arr.length);//返回3？因为在JavaScript中只要我们通过数组下标赋值，那么最大的下标值会自动给数组做扩容操作
        alert(arr[1]);//显示undefined
        //数组的遍历
        /*会无法显示，因为在js中，无法识别int，应改为var
        for(int i=0;i<arr.length;i++)
            alert(arr[i]);*/
        for(var i=0;i<arr.length;i++)
           alert(arr[i]);
    </script>
</body>
</html>

javascript函数–重点

函数的定义：

方法一：

function 函数名（形参列表）{

函数体；

}

注：定义带有返回值的函数–直接在函数体内使用return语句返回值即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript函数</title>
</head>
<body>
    <script type="text/javascript">
        //函数定义
        function fun1(){
            alert("无参函数被调用了");
        }
        //函数需要被调用才能执行
        fun1();
        function fun2( a,b,c){
            alert("有参函数fun2()被调用了:a="+a+"b="+b+"c="+c)
        }
        fun2();
        function fun3(a){
            var result=a+a;
            return result;
        }
        alert(fun3(3));
    </script>
</body>
</html>

方法二：

var 函数名=function（形参列表）{函数体}

      var fun4=function(){alert("无参函数");}
       fun4();