• day01 js三种导入html的方法、js书写规范、变量的基本使用、变量提升


    昨天是初学js的第一天,为什么今天才写,我觉得这样可以帮助我复习昨天的知识,加深对js的理解。

    我之前学过java的,昨天转入js的学习,对js略有些体会和大家分享下,js刚入门感觉js相对于java也没有什么难的,声明变量只需要用var就行了,同一变量名能代表不同变量的值之类的。

    昨天主要学了js三种导入html的方法、js书写规范、变量的基本使用、变量提升。

    ***********************************************************************************************正文******************************************************************************************************************************

    三种将js导入到html代码中的方法:行内脚本(不推荐)、内嵌脚本、外部脚本。

    行内脚本:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>行内脚本</title>
        <!--
            该导入js的方式不推荐
        -->
        </head>
        <body onload="alert=()">
        
        </body>
    </html>

    内嵌脚本

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>内嵌脚本</title>
            <script type="text/javascript">
                
                alert('我是head脚本');
            </script>
        </head>
        <body>
            <script type="text/javascript">
                alert('我是body脚本');
            </script>
        </body>
    </html>

    外部脚本

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>外部脚本</title>
            <script type="text/javascript" src="js/new_file.js">
                
             </script>
        </head>
        <body>
        </body>
    </html>
    alert('我是外部脚本');

    二、js书写规范

    js的书写规范和java差不多的。

         * js区分大小写
                 * 关键字(保留字)若是大小写书写不同,浏览器控制台会报错。
                 * var可以声明所有的变量的类型
                 * 代码行需要以分号结尾(不是必须的,为了防止系统加错分号,还是加上分号比较好)、
                 * 所有的符号必须使用英文下的
                 * js可以用注释代码
                 * 单行注释:/
                 * 多行注释:/**/

    三、变量的基本使用

    js和java的变量声明赋值使用都是差不多一样的,有些不同的是js的声明变量类型只需要用var,而java需要int、double之类的;js的同一变量名可以赋不同类型的值,而java不可以java的变量具有唯一性。

     //变量声明
                /**
                 * 语法:
                 *         1、var 变量名;变量名=初始值;
                 *             若变量名没有赋初始值时,consol.log(money),会输出undefined(默认值);
                 *         2、var 变量名 =初始值 ;
                 * var可以去掉(不推荐)[使用严格模式时,必须要加var]
                 */

     变量名命名规范
                 *         组成:字母、数字、下划线、$,首字符不可以是数字(和Java命名规范相同)
                 *         变量名命名要有意义,方便后期;
                 *         不能使用关键字(保留字)
                 * 命名方法:
                 *         canel:驼峰命名法:首个单词的首字母为小写,其他单词首字母为大写,firstName,
                 *         pascal:帕斯卡命名法:每个单词的首字母都是大写,FirstName;
     //变量赋值 /** 
        * 语法:
           * 可以在变量声明时赋值,(var 变量名 =初始值 ;) * js中同一变量名可以赋不同类型的值。 */


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>变量的基本使用</title>
        </head>
        <body>
            <script type="text/javascript">
                
                //变量声明
                /**
                 * 语法:
                 *         1、var 变量名;变量名=初始值;
                 *             若变量名没有赋初始值时,consol.log(money),会输出undefined(默认值);
                 *         2、var 变量名 =初始值 ;
                 * var可以去掉(不推荐)[使用严格模式时,必须要加var]
                 */
                var money;
                
                /**
                 * 变量名命名规范
                 *         组成:字母、数字、下划线、$,首字符不可以是数字(和Java命名规范相同)
                 *         变量名命名要有意义,方便后期;
                 *         不能使用关键字(保留字)
                 * 命名方法:
                 *         canel:驼峰命名法:首个单词的首字母为小写,其他单词首字母为大写,firstName,
                 *         pascal:帕斯卡命名法:每个单词的首字母都是大写,FirstName;
                 */
                
                //变量赋值
                /**
                 * 语法:
                 *         可以在变量声明时赋值,(var 变量名 =初始值 ;)
                 *         js中同一变量名可以赋不同类型的值。
                 */
                money=10000;
                
                //变量计算
                money=money+money*0.04;
                
                //变量使用
                console.log(money);
                
            </script>
        </body>
    </html>

    四、变量提升

         变量提升:编译器在编译js脚本时,把所有变量提升到脚本 的最上面。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>变量提升</title>
        </head>
        <body>
            <script type="text/javascript">
                /**
                 * 当单独运行console.log(s)时程序会报错;
                 * 在console.log(s)下面对s进行声明变量并赋初值,再次输出s;
                 * 在控制台中,第一次输出s为默认值(undefined),第二次输出s为:“我只是一个s”;
                 * 这样就进行了变量提升。
                 * 变量提升:编译器在解释js脚本时,会把所有的变量全部提升到脚本的最上面
                 */
                console.log(s);
                var s = '我只是一个s';
                console.log(s);
                /**
                 * 变量提升相当于:
                 */
                var s;
                console.log(s);
                s = '我只是一个s';
                console.log(s);
                
            </script>
        </body>
    </html>
       /**
                 * 当单独运行console.log(s)时程序会报错;
                 * 在console.log(s)下面对s进行声明变量并赋初值,再次输出s;
                 * 在控制台中,第一次输出s为默认值(undefined),第二次输出s为:“我只是一个s”;
                 * 这样就进行了变量提升。
                 * 变量提升:编译器在解释js脚本时,会把所有的变量全部提升到脚本的最上面
                 */

    五、一个便于理解js变量的一个小项目。

      

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>js一个小项目</title>
        </head>
        <body>
            
            <script type="text/javascript">
                
                //<!--js代码执行从上往下执行-->
                
                /*功能实现
                 * 向银行存入10000元,利息4%,存储一年算本金和;
                 */
                
                //存入10000元
                var money=10000;
                //计算本金和
                money=money+money*0.04;
                //输出结果
                console.log('本金和'+money)
            </script>
        </body>
    </html>
  • 相关阅读:
    js-实现点击按钮直接打印
    XMLHTTPREQUEST–获取上传文件的进度
    The prop 'history' is marked as required in 'Router', but its value is 'undefined'.in Router
    javascript之闭包,递归,深拷贝
    node之get与post
    css公共样式
    php之创建jsonp接口调数据
    javascript之创建对象的方式
    angular之两种路由
    php之上传图片及传数据到mysql
  • 原文地址:https://www.cnblogs.com/wangzhanxin98/p/9293017.html
Copyright © 2020-2023  润新知