前端开发 - JavaScript - 上

1.js引入

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>js引入</title>
    <style type="text/css">
        .span1{ color: red;}
    </style>

    <!--外链式-->
    <!--<script src="./1.js"></script>-->

</head>
<body>
    <!-- dom == document object model 有属性 有方法  行内式引入 -->
    <p class="" id="" onclick="clickhandler()">123</p>
    <span>234</span>
</body>

<!-- 内部式 引入  建议引入时候在body之后，因为要等待所有dom元素标签加载完成后再去执行相应得js操作-->
<script type="text/javascript">

     // window.document.write()
    // document.write('有一首歌叫123')
    document.write('<span class="span1">233</span>');


    // windows.console.log()
    console.log('我很好');
    console.error('错误ss');

    console.dir(window);
    console.clear();

    var a = prompt('输入姓名');
    console.log(a);

    function clickhandler(){
        // 弹出警告框
        /*
        这是一个方式
        一个很好得方法
        */
        window.alert(1);
        alert(1)
    }
</script>

</html>

<!--
    总结：
        引入js 三种方式； 行内式 内部式  外链式
        做项目时：css js 一般使用外链式引入；

        javascript得输出方式：
            1.document.write('有一首歌叫123')
                document.write('<span class="span1">233</span>');
                window.document.write()
            2.console.log('我很好');
                console.error('错误');
                console.clear();
                windows.console.log()
            3.alert(1);
                 window.alert(1);
            4.innerHTML/innerText
                ...
            5.var a = prompt('输入姓名');
              console.log(a);
-->

2.变量的声明和定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量得声明和定义</title>
</head>
<body>

</body>

    <script type="text/javascript">
        // 变量得声明
        //js 中代码得执行顺序 自上往下

        //1.先声明在定义
        var dog;
        // alert(dog);  //undefined 未定义

        dog='小黄';
        // alert(dog)
        // alert(dog)
        // alert(dog)

        //2.声明立刻定义
        var dog2='小红';
        // alert(dog2);

        var $='aa';
        alert($);

        //建议使用驼峰标识 来命名
        var myHousePrice = '$1234';

    /*
        变量命名规范：
            1.严格区分大小写
            2.命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字，不能包含关键字和保留字。
                关键字：var number等
                除了关键字 top name 也尽量不使用。
            3.推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写
            4.匈牙利命名：就是根据数据类型单词的的首字符作为前缀
    */

    </script>



</html>

3.五种基本数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本数据类型</title>
</head>
<body>

<script type="text/javascript">
    /*
    js中有两种数据类型
        1.基本数据类型
            number string boolean null undefined
        2.引用数据类型
            对象
                Array object 正则
            函数
     */

    //1.number 数字类型
    var a = 123;
    console.log(a);
    console.log(typeof a);

    //2.string 字符串类型
    var str = '123';
    console.log(str);
    console.log(typeof str);

    //3.boolean 布尔类型
    var b1 = false;  //true/false
    console.log(b1);
    console.log(typeof b1);

    //4.null
    var c1 = null;  //空对象
    console.log(c1);
    console.log(typeof c1);

    //5.undefined
    var d1;
    console.log(d1);
    console.log(typeof d1);

    //特殊：分母为0；
    //  Infinity
    //  number
    var e1 = 5/0;
    console.log(e1);
    console.log(typeof e1);



</script>
</body>
</html>

前端开发 - JavaScript - 上

1.js引入

2.变量的声明和定义

3.五种基本数据类型

猜你喜欢