【JavaScript】基础知识

什么是JavaScript?
　　JavaScript是一门基于面向对象和事件驱动的脚本语言，运行在客户端的浏览器上，通过JavaScript，可以让页面实现一些动态的效果，例如表单验证、选项卡、导航等效果；
　　特点：基于面向对象；
　　　　事件驱动：当有事件发生的时候，才会执行相应的处理程序；
　　　　脚本语言：需要嵌入到html文档中才能运行；
　　　　解释执行：由浏览器解释执行；
 
JavaScript与Java有什么关系？    就名字中包含了Java单词
 
JavaScript与Html结合方式 
位置一：Html内部嵌入js(保证语法正确的情况下,可以在任何地方写)
　　1、<head>嵌入js代码</head>
　　2、<body>嵌入js代码</body>
<script type = "text/javascript" >
    document.write("hello world ！~");
</script>
 
位置二：Html可以引入外部js文件，但一定要在<head></head>标记内引入
　　通过<script>标记的src属性，引入外部的js文件；

<head>
    <title>js的第一练习</title>     
    <script src="js/test01.js" type="text/javascript"></script>
</head>

function hello()
{
    alert("大家好 哈哈 !~");
}
 
 
 
不允许的使用

 <script src="js/test01.js" type="text/javascript">
        document.write("坚决不能这样用!~");
 </script>
 
 
js中的注释    1> 单行  //
    2> 多行 /* 多行 */
    3> 如果某些浏览器不支持JavaScript，可以使用如下方式，来忽略js代码

<script type = "text/javascript" >
    // 单行注释
    /*
    多行
    注释
    */
    <!--
       document.write("hello world ！~");　　//js代码
    //-->

    document.write("hello world ！~");
</script>
   常量　　在程序执行的过程中，不能改变
        
<script type="text/javascript">
    10,20
</script>
 
    
 
变量　　在程序执行的过程中，能够进行修改 --> 分为：  全局变量、局部变量

 JavaScript 的变量声明：
    var 变量名 [=初始值];
    var name="zhansan";
    var age;
 

<script type="text/javascript">
    var a = 10;
    var b = 20;
    var sum = a+b;
    document.write("a和b的和为：" + sum);
</script>
 
 
 
数据类型JavaScript是一种弱数据类型的编程语言，是程序在运行时，根据变量的值，决定到底分配多少存储空间；
 
 
数值型
　　整型　　10,5
　　浮点型　　3.2
字符（串）型　　''或"" 括起来的字符  例如："a" , 'b' ,"abs"
布尔型：true(非零、非空) 和 false(0,null)
空：null
undefined :未定义,变量没有赋值

对象类型：按钮、文本框……
 
变量的声明
　　var变量名[=值];
 
typeof：返回指定变量的数据类型number、string、object、undefined

<script src="js/test01.js" type="text/javascript">
    // 所有变量都可以使用var声明
　　var a = "abc";
　　var b = 1;
　　var c = 2;
　　var sum = b + c;
</script>
 
 
标识符为 变量、函数等 起的名字，是由字母、数字、下划线、$构成。
     
    注意：标识符首字母不能为数字。
 
 
关键字是JavaScript中保留的一些单词,有着特殊的意义
 
    例如： if、else、function……
 
 
变量命名规则 -- > 驼峰命名法 
　　合法的命名     错误的命名 var 1abc ="a";
　　命名要尽量有意义      var name = "zhansan";
　　当变量名由多个单词组成的时候,第一个单词首字母要小写 ，其他单词的首字母要大写
　　命名的时候不能使用关键字,并且命名区分大小写 
 
 
运算符 
算术运算
 　　+、-、*、/、%（取余）
	 
关系运算
		　　>、<、>=、<=、!=、==（数值相等）、===（全等 数值、类型）
逻辑运算
		　　与 &&：有一个为假的时候，结果就是假
		　　或||： 两个都为假的时候，结果才是假，其他情况都是真
　　非!： 假则真 真则假
赋值运算
		　　=、+=、-=、*=、/=、%=
		 
自加、自减
		　　++ 自加  -- 自减

        var a=10;//数值型变量
        var b=5;//数值型变量
        var c= a++;//先赋值在加1
        document.write("a = "+a);
        var d= ++a;//先加1在赋值
输出：a = 11
 
三目运算
构成：
　　布尔类型 ? 值1:值2;
　　true ---> 值1
　　false---> 值2

 
　　
运算的优先级
 
　　算术运算 > 关系运算 > 逻辑运算 > 赋值运算    注意：可以用 ()来改变优先级
 
 
程序的控制结构顺序结构：按照顺序执行的程序结构
if 分支结构
 

// 第一种
if(布尔类型表达式){
       //代码序列
    }

// 第二种
if(布尔类型表达式){
         //代码序列1
    }
else{
        //代码序列2
    }

// 第三种
if(布尔类型表达式1){
         //代码序列1
    }
else if(布尔类型表达式2){
        //代码序列2
    }
else if(布尔类型表达式3){
        //代码序列3
    }
……
else{
        //代码序列n
    }
语法结构
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <!--引用外部js-->
<!--    <script type="text/javascript" src="js/Index.js"></script>-->
<!--    内部编写js-->
    <script type="text/javascript" language="javascript">
        function hello(){
            alert("大家好 !~");
        }
        var number = Math.floor(Math.random()*10);// 随机幸运数字
        document.write(number+"<br />");
        if(number>=8){
            document.write("今天您很幸运，中了500万英镑！~");
        }
        else if(number>=4&&number<=7){
            document.write("今天您比较幸运，中了50英镑！~");

        }
        else{
            document.write("不好意思，你得交500元罚款！~");
        }
    </script>

</head>
<body>
    <p>哦呦</p>
    <!--点击按钮弹出警告框-->
    <input type="button" onclick="hello();" value="弹出警告框">
</body>
</html>
demo
 
效果：　　
 
 
switch 分支结构
　　从上到下顺序执行
　　当switch中的常量表达式k的值与case 后的值相等时，执行后面的语句块；
	　　当所有的case的值都不与switch中的常量表达式k的值相等时，执行default后面的语句块；
	　　当case后面的语句块中没有break的时,会一直执行其下方的case，直到遇到break为止。
 注意：
　　　　1）default 可以省略;
　　　　2）default 顺序可以任意放置;
　　　　3）case 后面一定是常量;

switch(常量表达式k)
{
    case 值1:语句块1;
    case 值2:语句块2;
    ……
    default:语句块n;
}
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <!--引用外部js-->
<!--    <script type="text/javascript" src="js/Index.js"></script>-->
<!--    内部编写js-->
    <script type="text/javascript" language="javascript">
        function hello(){
            alert("大家好 !~");
        }
        var number = Math.floor(Math.random()*10);// 随机幸运数字
        document.write(number+"<br />");
        switch(number){
            case 0:
                document.write("不好意思，你得交501元罚款！~");
                break;
            case 1:
                document.write("不好意思，你得交502元罚款！~");
                break;
            case 2:
                document.write("不好意思，你得交503元罚款！~");
                break;
            case 3:
                document.write("不好意思，你得交504元罚款！~");
                break;
            case 4:
                document.write("今天您比较幸运，中了55英镑！~");
                break;
            case 5:
                document.write("今天您比较幸运，中了56英镑！~");
                break;
            case 6:
                document.write("今天您比较幸运，中了57英镑！~");
                break;
            case 7:
                document.write("今天您比较幸运，中了58英镑！~");
                break;
            case 8:
                document.write("今天您很幸运，中了500万英镑！~");
                break;
            case 9:
                document.write("今天您很幸运，中了500万英镑！~");
                break;
            default :
                document.write("不可能出现！~");
            }
    </script>

</head>
<body>
    <p>哦呦</p>
    <!--点击按钮弹出警告框-->
    <input type="button" onclick="hello();" value="弹出警告框">
</body>
</html>
demo
 
效果：　　
 
 
循环结构While 循环结构(“当型”循环结构)

while(布尔类型的表达式)
{
    //循环体;
}
// 当表达式为某个数值时，则永真（永远执行）
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <!--引用外部js-->
<!--    <script type="text/javascript" src="js/Index.js"></script>-->
<!--    内部编写js-->
    <script type="text/javascript" language="javascript">
        function hello(){
            alert("大家好 !~");
        }

        //求 1-10累加和
        var sum = 0;
        var i = 8;

        while(i<=10){
            sum += i++;
            sum = sum + i++;
<!--            sum = sum + i; //等价sum += i;-->
<!--            i++;-->
<!--            document.write(sum+"<br />");-->
        }
        document.write(sum+"<br />");
    </script>

</head>
<body>
    <p>哦呦</p>
    <!--点击按钮弹出警告框-->
    <input type="button" onclick="hello();" value="弹出警告框">
</body>
</html>
demo
 
效果：　　
 
 
 
 
do……while 循环结构(“直到型”循环结构)
注意： 
　　不论while中的布尔类型的表达式是真或是假,
　　do里面的循环体至少要执行一次，换句话来说就是，当条件为假时，要执行一次do中循环体。
 

do
{
    //循环体;
}while(布尔类型的表达式)
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <!--引用外部js-->
<!--    <script type="text/javascript" src="js/Index.js"></script>-->
<!--    内部编写js-->
    <script type="text/javascript" language="javascript">
        function hello(){
            alert("大家好 !~");
        }

       //求 1-10累加和
        var sum = 0;
        var i = 100;

        do
        {
            sum = sum + i; //等价sum += i;
            i++;
            document.write(sum+"<br />");
        }while(i<=10)
        document.write(sum+"<br />");
    </script>

</head>
<body>
    <p>哦呦</p>
    <!--点击按钮弹出警告框-->
    <input type="button" onclick="hello();" value="弹出警告框">
</body>
</html>
demo
 
效果：　　
 
 
 
for 循环
 

// 第一种
for(语句1;布尔型表达式;语句2)
{
    //循环体;
}

// 步长
for(;布尔型表达式;语句2)
{
    //循环体;
}

for(;布尔型表达式;)
{
    //循环体;
}

for(;;)
{
    //循环体;
}

for(;true;)
{
    //循环体;
}
for 语法结构
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <!--引用外部js-->
<!--    <script type="text/javascript" src="js/Index.js"></script>-->
<!--    内部编写js-->
    <script type="text/javascript" language="javascript">
        function hello(){
            alert("大家好 !~");
        }

       //求 1-10累加和
        var sum = 0;

        for(i=1;i<=10;i++)
        {
            sum += i;
            document.write(sum+"<br />");
        }
        document.write(sum+"<br />");
    </script>

</head>
<body>
    <p>哦呦</p>
    <!--点击按钮弹出警告框-->
    <input type="button" onclick="hello();" value="弹出警告框">
</body>
</html>
demo
 
效果：　　
 
 
 continue与break        continue:跳过某一次循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <!--引用外部js-->
<!--    <script type="text/javascript" src="js/Index.js"></script>-->
<!--    内部编写js-->
    <script type="text/javascript" language="javascript">
        function hello(){
            alert("大家好 !~");
        }

        var sum = 0;             
        for(i=1;i<=3;i++)
        {
            if(i==2)
            {
                continue;   //跳出某一次循环
            }
            sum += i;
            document.write(sum+"<br />");
        }
        document.write(sum+"<br />");
    </script>

</head>
<body>
    <p>哦呦</p>
    <!--点击按钮弹出警告框-->
    <input type="button" onclick="hello();" value="弹出警告框">
</body>
</html>
demo_for
 
效果：　　
 
 
 
        break:   结束循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <!--引用外部js-->
<!--    <script type="text/javascript" src="js/Index.js"></script>-->
<!--    内部编写js-->
    <script type="text/javascript" language="javascript">
        function hello(){
            alert("大家好 !~");
        }

       //求 1-10累加和
        var sum = 0;
        var i=1;
        for(;true;)//语句3 步长 省略语句1、2、3
        {
            if(i>10)
            {
                break;  //结束循环
            }
            sum += i;
            document.write(sum+"<br />");
            i++;
        }
        document.write(sum+"<br />");
    </script>

</head>
<body>
    <p>哦呦</p>
    <!--点击按钮弹出警告框-->
    <input type="button" onclick="hello();" value="弹出警告框">
</body>
</html>
demo_for
 
效果：　　 
 
函数（function）函数定义
　　注：
　　　　1）JavaScript中的函数是不需要指定返回值类型的；
　　　　2）JavaScript中函数的形式参数，是不需要使用var来声明的，只需要一个变量名即可；
　　　　3）函数是否有返回值，是由函数体中的return语句的决定；

function 函数名(形式参数) {
    函数体；
}
　　函数名、变量名符合标识符的要求即可；尽量起有意义的名字。JavaScript的标识符和Java中的标识符是相同的。 
 
函数的调用

函数名(实际参数);
// 在html标签中应用需要添加""
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <!--引用外部js-->
<!--    <script type="text/javascript" src="js/Index.js"></script>-->
<!--    内部编写js-->
    <script type="text/javascript" language="javascript">
        function hello(){
            alert("大家好 !~");
        }

        function fn(a,b,c){
            // arguments 表示调用函数时，所传递的实际参数，是一个数组
            alert(arguments.length);    // 弹框提示总数
            for (var i = 0 ; i < arguments.length ; i ++ ){
                alert(arguments[i]);    // 遍历数组弹框
            }
        }

        fn(1,2,3,4,5);
        //alert(arguments.length); // 这一行代码有错误，因为 arguments 只能在函数内部使用
    </script>

</head>
<body>
    <p>哦呦</p>
    <!--点击按钮弹出警告框-->
    <input type="button" onclick="hello();" value="弹出警告框">
</body>
</html>
函数弹窗
 
 
 
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <!--引用外部js-->
    <script type="text/javascript" src="js/Index.js"></script>
    <!--内部编写js-->
<!--    <script type="text/javascript" language="javascript">-->
<!--        function hello()-->
<!--        {-->
<!--            alert("大家好 !~");-->
<!--        }-->
<!--    </script>-->

</head>
<body>
    <script type="text/javascript" language="JavaScript">
        <!--页面输出-->
        document.write("JS输出：hello world ！~");
        var a = "abc";  // 声明变量
        var b = 1;
        var c = 2
        window.alert("内部js弹出~  ");   // 打开页面弹出
<!--        alert(a);   //连续弹出-->
<!--        alert("b+c = " + (b+c));    // 运算-->
        alert(b>c); // 比较
        document.write("<br/>");   // 换行
        document.write(true && false);  // 验证与
        document.write("<br/>");   // 换行
        document.write(true || false); // 验证或
        document.write("<br/>");   // 换行
        document.write(!(true));     // 验证非
        document.write("<br/>");   // 换行
    </script>
    <p>哦呦</p>
    <!--点击按钮弹出警告框-->
    <input type="button" onclick="hello();" value="弹出警告框">
</body>
</html>
Index.html
 

function hello()
{
    alert("大家好 哈哈 !~");
}
Index.js
 

效果　　： 
 
 
 

While循环结构(“当型”循环结构)