美文网首页
前端笔记(9)

前端笔记(9)

作者: rtrhhthth | 来源:发表于2018-07-17 08:06 被阅读0次

    代码:
    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>
    

    相关文章

      网友评论

          本文标题:前端笔记(9)

          本文链接:https://www.haomeiwen.com/subject/znzipftx.html