美文网首页
前端笔记7

前端笔记7

作者: 明日计划 | 来源:发表于2018-06-12 20:05 被阅读0次

    hellow world

    代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
    <!--JS代码需要编写到script标签中-->
    <script type="text/javascript">
        /*
        控制浏览器弹出一个警告框
        alert("宁姐,你真漂亮!!");
        */
        /*
        让计算机在页面中输出一个内容
        document.write()可以向body中输出一个内容
        document.write("看我出不出来~~~");
        */
        
        /*
        向控制台输出一个内容
        console.log()的作用是向控制台输出一个内容
        console.log("你猜我在哪出来呢?");
        */
        alert("宁姐,你真漂亮!!");
        document.write("看我出不出来~~~");
        console.log("你猜我在哪出来呢?");
    </script>
    </head>
    <body>
    
    </body>
    </html>
    

    效果:


    image.png
    image.png

    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>
    

    效果:


    image.png

    基本语法

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

    效果:


    image.png

    字面量和变量

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

    效果:


    image.png

    标识符

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

    效果:


    image.png

    数据类型

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

    效果:


    image.png

    相关文章

      网友评论

          本文标题:前端笔记7

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