JavaScript案例

JavaScript案例

text01.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    style>
    
    <script>
        // alert("hello script")
    script>
    
    <script type="text/javascript" src="js/hello.js">script>
head>
<body>
    第一个Javascript程序
    <hr>
    
    
    
    <a href="javascript:alert('超链接被触发')">超链接a>

    <div onmouseover="alert('走开')">把鼠标移上来div>
body>
html>

JavaScript案例_第1张图片

text02.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        var name;   //定义了一个变量name
        name="any"; //将字符串常量any赋值给变量name
        name="alice"
        // alert(name);
        var age=18;  //定义了一个变量age,并将整数18常量赋值给age
        //age是一个整型变量
        // alert(age);

        var sex="female" //强烈不建议
        // alert(sex)
        {
            var x=8;
            // alert(x);
            let y=7;
            // alert(y);
        }
        // alert(x);
        // 姓名="anny";
        // alert(姓名);
        age="18";
        Age="5";
        alert(Age);
    script>
head>
<body>

JavaScript案例_第2张图片

text03.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        <!--输出-->
        // alert("嘿嘿");
        // console.log("哈哈");
        // document.write("嘻嘻");
        // 输入
        // var name=prompt("请输入姓名");
        // console.log(name);
        // var age=prompt("请输入你的年龄");
        // console.log(age,age+2,typeof age);
        // age = Number(age);
        // console.log(age,typeof age);
        // console.log(age+2);
        //转义字符
        console.log("he\'llo\n.world");

    script>
head>
<body>

body>
html>

JavaScript案例_第3张图片

text04.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        var name = "tom";
        var age = 18;
        var height=165;
        var flog = true;
        var hobby=null;
        var date = new Date();
        var arr = new Array();
        var sex;

        // console.log(typeof name);
        // console.log(typeof age);
        // console.log(typeof height);
        // console.log("hello"-5); //返回了一个NaN表示非数字类型
        // console.log(typeof flog);
        // console.log(typeof hobby);
        // console.log(typeof date);
        // console.log(typeof arr);
        // console.log(typeof sex);
        /*
        类型转换
         */
        //1. 转换为number
        var a = '12';
        // console.log(a,typeof a);
        //方式1:使用number
        // a = Number(a);
        // console.log(a,typeof a);
        // a = Number('12.5');
        // a = Number('12abc');
        // a = Number('abc12');
        //方式2  parsenint()
        // a = parseInt('12'');
        // a = parseInt('12.5');     //转换时去掉小数部分
        // a = parseInt('12abc');     //按照字符的顺序一次解析
        // a = parseInt('abc12');

        //方式3 parsefloat();
        // a = parseFloat('12');
        // a = parseFloat('12.5');
        // a = parseFloat('12abc');
       // a = parseFloat('abc12');

        // var a =12;
        //
        // console.log(a, typeof a);
        // a = a+'';   //后接一个空字符串
        // console.log(a,typeof a);


        //转换为布尔
        // var a;
        // a = Number(false);   //true用1或非0表示,false用0表示
        // console.log(a,typeof a);
        //转换为布尔
        // var a = Boolean(0);
        // var a = Boolean(null);
        // var a = Boolean(undefined);
        // var a = Boolean(NaN);
        // var a = Boolean(4);
        var a = Boolean('tom');
        var name;
        name = 'tom';
        if(name){
            console.log(name)
        }
        // console.log(a,typeof a);
    script>
head>
<body>

body>
html>

JavaScript案例_第4张图片

text05.html




    
    Title
    





JavaScript案例_第5张图片

text06.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用math对象来进行数学运算,用法,Math,方法名
        console.log(Math.abs(-5));
        //2.幂运算
        console.log(Math.pow(2,4));
        //3.四舍五入
        console.log(Math.round(132.745)); //在js中不可以指定四舍五入到第几位
        //4.向上取整,向下取整
        console.log(Math.ceil(3.5));//取大于等于3.5的最小整数
        console.log(Math.floor(3.5));//取小于等于3.5的最大整数
        //5.生成一个[0,0.1]之间随机浮点数
        console.log(Math.random());  //以当前系统时间为随机数种子
        //6.最大值,最小值
        console.log(Math.max(23,25,57,56));
        console.log(Math.min(23,25,57,56));
        //7.圆周率的值
        console.log(Math.PI);
    </script>
</head>
<body>

</body>
</html>

JavaScript案例_第6张图片

text07.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age=25;
        if(age>60)
        {
            console.log('老年');
        }
        else if(age>30)
        {
            console.log('中年');
        }
        else
        {
            console.log('青年')
        }

        var day = '周五';
        switch (day){
            case'周一':
                console.log('吃包子');
                break;
            case'周二':
                console.log('吃饺子');
                break;
            case'周三':
                console.log('吃油条');
                break;
            case'周四':
                console.log('吃面条');
                break;
            case'周五':
                console.log('吃油饼');
                break;
            default:
                console.log('不吃了');
                break;
        }
    </script>
</head>
<body>

</body>
</html>

JavaScript案例_第7张图片

text08.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //while
        var i = 1;
        var sum = 0;
        while (i<=100)
        {
            sum+=1;
            i++;
        }
        console.log(sum);

        //do..while
        var i = 1;
        var sum = 0;
        do
        {
            sum+=1;
            i++;
        }while (i<=101);
        console.log(sum);

        //for
        var sum=0;
        for(i = 1;i<=100;i++)
            if(i%7==0);
                sum+=i;
        console.log(sum);

        //for...in
        // var str='welcome;'//可以将字符串看成由多个字符组成的集合
            // for(var index in str);
        {
            // console.log(c); //输出了str的索引
            // console.log(str[index]);
        }
        // s = 'abc';
        // document.write(s[0]);
        // document.write(s[1]);
        // document.write(s[2]);
        //
        //break
        for(var i =1;i<=10;i++)
        {
            if(i%2==0)
                continue;
            console.log(i);
        }

    </script>
</head>
<body>

text09.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = Array();
        // arr[0]=12;
        // arr[1]=23;
        // //……
        // console.log(arr.length);
        // console.log(arr[0]);
        // console.log(arr[1]);

        // var arr = new Array('tom','anny','alice');
        // console.log(arr);
        // console.log(arr[2]);
        // console.log(arr[arr.length-1]);
        // var arr = ['tom','jack','alice','anny'];
        // console.log(arr[0]);
        // console.log(arr[arr.length-1]);

        //将1-100之间所有能被3整除的数字放到数组number中,输出这个数组并统计个数
        // var arr = [];
        // for(var i=1;i<=100;i++)
        //     if(i%3==0)
        //         arr[arr.length]=i;
        // console.log(arr);
        // var arr = ['anny','alice','tom']
        // var arr = [24,32,27,59,19];
        // console.log(arr);
        // arr.sort();
        // console.log(arr);
        var arr = ['anny','alice','tom','jack','alice']
        console.log(arr);
        // arr.reverse();
        // arr.join();
        // console.log(arr.join());
        console.log(arr.indexOf('alice'));
        console.log(arr.lastIndexOf('alice'));
        console.log(arr.slice(1,4))
        console.log(arr.slice(1))
        console.log(arr.toString());
    </script>
</head>
<body>

</body>
</html>

JavaScript案例_第8张图片

text10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = new Array();
        // arr[0] = new  Array();
        // arr[1] = new  Array();
        // arr[0][0]=15;
        // arr[0][1]=9;
        // arr[1][0]=10;
        // console.log(arr);
        var arr = [
            [12,56,32],
            [27,23,64],
            [25,16,39]
        ]
        // console.log(arr[0][1];
        for (var i=0;i<=arr.length;i++)
        {
            //循环输出灭行的4个元素
            for(var j=0;j<arr[i].length;j++)
                document.write(arr[i][j]+'  ');
            //输出每行的换行
            document.write('
'
) } </script> </head> <body>

JavaScript案例_第9张图片

你可能感兴趣的:(JavaScript案例)