前端笔记(9)

2018-07-17  本文已影响0人  rtrhhthth

代码:
1.js基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js基本语法</title>
    <script type="text/javascript">
        /*
        JS注释
        多行注释
            注释中的内容不会被执行,但是可以在源代码中查看
            要养成良好的编写注释的习惯,也可以通过注释来对代码进行一些简单的调试
        */
        //单行注释
        // alert("hello");
        // document.write("hello");
        console.log("hello");//该语句用来在控制台输出一个日志
        /*
        1.JS中严格区分大小写
        2.JS中每一条语句以分号(;)结尾
            - 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源,
            - 而且有些时候,浏览器会加错分号,所以在开发中分号必须写
        3.JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化
        */
        alert("hello");
    </script>
</head>
<body>

</body>
</html>

2.Js编写位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js编写位置</title>
    <!-- 
    可以将js代码编写到外部js文件中,然后通过script标签引入
    写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制
    这是推荐使用的方式
    script标签一旦用于引入外部文件了,就不能再编写代码了,即使编写了浏览器也会忽略
    如果需要则可以再创建一个新的script标签用于编写内部代码
     -->
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">
        alert("我是内部的JS代码");
    </script>

    <!-- 
    可以将js代码编写到script标签中
    <script type="text/javascript">
        alert("我是script标签中的代码!!");
    </script>
     -->
</head>
<body>
    <!-- 
    可以将js代码编写到标签的onclick属性中
    当我们点击按钮时,js代码才会执行
    虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用
     -->
    <button onclick="alert('讨厌,你点我干嘛~~');">点我一下</button>

    <!-- 
    可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码
     -->
    <a href="javascript:alert('让你点你就点!!');">你也点我一下</a>
    <a href="javascript:;">你也点我一下</a>
</body>
</html>

3.数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
    <script type="text/javascript">
        /*
        数据类型指的就是字面量的类型
            在JS中一共有六种数据类型
                String 字符串
                Number 数值
                Boolean 布尔值
                Null 空值
                Undefined 未定义
                Object 对象
            
            其中String Number Boolean Null Undefined属于基本数据类型
            而Object属于引用数据类型
        */
        /*
        String字符串
            - 在JS中字符串需要使用引号引起来
            - 使用双引号或单引号都可以,但是不要混着用
            - 引号不能嵌套,双引号不能放双引号,单引号不能放单引号
        */
        var str = 'hello';
        /*
        在字符串中我们可以使用\作为转义字符,当表示一些特殊符号时可以使用\进行转义
            \" 表示 "
            \' 表示 '
            \n 表示换行
            \t 制表符
            \\ 表示\
        */
        str = "我说:\"今天\t天气真不错!\"";
        str = "\\\\\\";
        // console.log(str);
        //输出字面量 字符串str
        // alert("str");
        //输出变量str
        // alert(str);-
        var str2 = "hello";
            
        str2 = "你好";
        
        str2 = 3;
    </script>
</head>
<body>

</body>
</html>

4.标识符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标识符</title>
    <script type="text/javascript">
        /*
        标识符
            - 在JS中所有的可以由我们自主命名的都可以称为是标识符
            - 例如:变量名、函数名、属性名都属于标识符
            - 命名一个标识符时需要遵守如下的规则:
                1.标识符中可以含有字母、数字、_、$
                2.标识符不能以数字开头
                3.标识符不能是ES中的关键字或保留字
                4.标识符一般都采用驼峰命名法
                    - 首字母小写,每个单词的开头字母大写,其余字母小写
                    helloWorld xxxYyyZzz
            - JS底层保存标识符时实际上是采用的Unicode编码,所以理论上讲,所有的utf-8中含有的内容都可以作为标识符
        */
        // var if = 123;
        // console.log(if);
        //千万不要这么用
        var 锄禾日当午 = 789;
        console.log(锄禾日当午);
    </script>
</head>
<body>

</body>
</html>

5.字面量和常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字面量和变量</title>
    <script type="text/javascript">
        /*
        字面量,都是一些不可改变的值
            比如 :1 2 3 4 5 "hello"
            字面量都是可以直接使用,但是我们一般都不会直接使用字面量
        变量    变量可以用来保存字面量,而且变量的值是可以任意改变的
            变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量,而很少直接使用字面量
            可以通过变量对字面量进行描述
        x = 123456789123456789
        */
        //声明变量
        //在js中使用var关键字来声明一个变量
        var a;
        //为变量赋值
        a = 123;
        a = 456;
        a = 123456789123456789;
        //声明和赋值同时进行
        var b = 789;
        var c = 0;
        var age = 80;
        console.log(age);
    </script>
</head>
<body>

</body>
</html>

6.强制类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换</title>
    <script type="text/javascript">
        /*
        强制类型转换
            - 指将一个数据类型强制转换为其他的数据类型
            - 类型转换主要指,将其他的数据类型,转换为
                String Number Boolean
        */
        /*
        将其他的数据类型转换为String
        方式一:
            - 调用被转换数据类型的toString()方法
            - 该方法不会影响到原变量,它会将转换的结果返回
            - 但是注意:null和undefined这两个值没有toString()方法,如果调用他们的方法,会报错
        方式二:
            - 调用String()函数,并将被转换的数据作为参数传递给函数
            - 使用String()函数做强制类型转换时,
                对于Number和Boolean实际上就是调用的toString()方法
                但是对于null和undefined,就不会调用toString()方法
                它会将 null 直接转换为 "null"
                将 undefined 直接转换为 "undefined"
        */
        var a = 123;
        //调用a的toString()方法
        //调用xxx的yyy()方法,就是xxx.yyy()
        a = a.toString();
        a = true;
        a = a.toString();
        a = null;
        //a = a.toString(); //报错
        a = undefined;
        //a = a.toString(); //报错
        a = 123;
            
        //调用String()函数,来将a转换为字符串
        a = String(a);
        a = null;
        a = String(a);
        
        a = undefined;
        a = String(a);
        console.log(typeof a);
        console.log(a);
    </script>
</head>
<body>

</body>
</html>

7.运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
    <script type="text/javascript">
        /*
        运算符也叫操作符
            通过运算符可以对一个或多个值进行运算,并获取运算结果
            比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回
                "number" "string" "boolean" "undefined" "object"
        算数运算符
            当对非Number类型的值进行运算时,会将这些值转换为Number然后在运算
            任何值和NaN做运算都得NaN
            +
                +可以对两个值进行加法运算,并将结果返回
                如果对两个字符串进行加法运算,则会做拼串,会将两个字符串拼接为一个字符串,并返回
                任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
            -
                - 可以对两个值进行减法运算,并将结果返回
            *
                * 可以对两个值进行乘法运算
            /
                / 可以对两个值进行除法运算
            %
                % 取模运算(取余数)
        */      
        var a = 123;
        var result = typeof a;
        // console.log(result);
        // console.log(typeof a);
        result = a + 1;
        result = 456 + 789;
        result = true + 1;
        result = true + false;
        result = 2 + null;
        result = 2 + NaN;
        result = "123" + "456";
        result = "你好" + "小帅哥";
        // console.log(result);
        var str = "锄禾日当午,汗滴禾下土,谁知盘中餐,粒粒皆辛苦";
        // console.log(str);
        result = 123 + "1";
        result = true + "hello";
        // console.log(result);
        //任何值和字符串相加都会转换为字符串,并做拼串操作
        /*
        我们可以利用这一特点,来将一个任意的数据类型转换为String
            我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
            这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String()函数
        */
        var c = 123;
        c = String(c);
        c = null;
        c = c + "";
        // console.log(typeof c);
        // console.log(c);
        c = 123;
        // console.log("c = " + c);
        result = 1 + 2 + "3";//33
        result = "1" + 2 + 3; //123
        result = 100 - 5;//95
        result = 100 - true;//99
        result = 100 - "1";//99
        result = 2 * 2;//4
        result = 2 * "8";
        result = 2 * undefined;//NaN
        result = 2 * null;//0
        result = 4 / 2;//2
        result = 3 / 2;//1.5
        // console.log("result = "+result);
        /*
        任何值做- * /运算时都会自动转换为Number
        我们可以利用这一特点做隐式的类型转换
            可以通过为一个值 -0 *1 /1来将其转换为Number
            原理和Number()函数一样,使用起来更加简单
        */
        var d = "123";
        d = d - 0;
        // console.log(typeof d);
        // console.log(d);
        result = 9 % 3;//0
        result = 9 % 4;//1
        result = 9 % 5;//4
        
        console.log("result = "+result);
    </script>
</head>
<body>

</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读