美文网首页
javascript入门(0729)

javascript入门(0729)

作者: LAYoung_f1b8 | 来源:发表于2019-07-29 18:52 被阅读0次

01.javascript介绍

        <!--

            javascript简称JS  ECMAscript

            javascript是基于对象的客户端脚本语言(动态语言)

            对象:单独的一个个体

            类:对某一类事物的统称

            例如:

                喜鹊  男人  耿育淼  自来水

                鸟类  人类  男人    水

            客户端:浏览器端、手机端

            服务器端:服务器

            java和javascrip的关系

                仙女和仙女山

                雷锋和雷锋塔

                老婆和老婆饼

            javascript能做什么?

                网页特效

                表单验证

                游戏的编写

                node语法编写

        -->

02.javascript引入方法

    <body>

        <!-- 方式一 (建议使用)-->

        <script>

            alert('111');

        </script>

        <!-- 方式二 -->

        <script type="text/javascript">

            alert('222');

        </script>

        <!-- 方式三 -->

        <script language="JavaScript">

            alert('333');

        </script>

    </body>

03.直接引入和外部引入

    <body>

        <!-- 直接引入 -->

        <script>

            alert('直接引入')

        </script>

        <!-- 外部引入  src为引入文件的路径

            注意:外部引入的标签内的代码不生效

        -->

        <script src="1.js"></script>

    </body>

04.javascript引入的位置

    <body>

        <div class="wrap">

            <div class="header"></div>

            <div class="main"></div>

            <div class="footer"></div>

        </div>

        <!-- script可以在任意地方使用都生效,除了title标签内

            建议将其放置在body内所有标签的最后

            若放置在head中,由于head内的代码会优先加载,若文件过大,会造成一段时间的网页空白

            只有需要比标签提前加载的js才放在head中

        -->

        <script>

            alert('111');

        </script>

    </body>

05.js执行顺序和延迟加载

    <body>

        <!--

            js默认执行顺序:从上往下,按顺序执行

            defer延迟加载(此代码会在其他js全部加载完毕之后才加载)

            注意:直接引入的代码不能延迟加载

         -->

        <script src="1.js" defer></script>

        <script>

            alert('222')

        </script>

    </body>

06.js不生效显示

    <body>

        <!-- 当浏览器不支持js时,标签内的内容将被执行 -->

        <noscript>你的破浏览器该换了</noscript>

    </body>

07.js常见的集中输出方式

    <body>

        <script>

            //单行注释  Ctrl+/

            /*多行注释  Ctrl+shift+/ */

            // 1、弹框输出

             alert('弹框输出');

            // 2、 控制台输出

            console.log('控制台输出');

            // 3、文档流输出

            document.write('文档流输出');

        </script>

    </body>

08.变量

        <script>

            /*

                变量  可以改变的量  存放在内存中

                变量是一个松散的数据类型,可以存放任意类型的数据

                定义变量

                    语法:var 变量名;

                定义变量并赋值

                    语法:var 变量名 = 值;

                变量名的命名规则:

                    由数字、字母、下划线、$组成且不能以数字开头

                    严格区分大小写 

                    不能使用系统关键字进行命名 if  else  break  continue

                    建议使用驼峰命名法  firstName  getStyle  girlFriend

             */

            var age;

            age = 18;

            console.log(age);

            // 定义变量并赋值

            var age = 20;

            console.log(age);

            // var 1name = 222;

            // console.log(1name);//Unexpected number  报错

            var age1 = 22;

            console.log(age1);

            // 不推荐以$符开头  $

            var $_age = 25;

            console.log($_age);

            // 变量名重复不会报错,直接将当前的值进行覆盖

            // var name = '向同学';

            // var name = '翁宇';

            // console.log(name);

            //

            // var NAME = '满满';

            // console.log(NAME);

            // console.log(name);

            // 不能使用系统关键字命名

            // var break = '小林子';

            // console.log(break);

            var firstName = '小李子';

            console.log(firstName);

            // 面试常考: var存在变量提升(声明会提前)

            // 声明提前但赋值并未提前

            console.log(num);//undifined 

            var num = 20;

            console.log(num);//20

            // 特殊:name

            console.log(name);//系统默认为一个空字符串

            // console.log(abc);//abc is not defined

        </script>

09.js常见数据类型

        <script>

                第一种方式:一种数据类型:

                    对象  js是基于对象和事件的,所有的都为对象

                    就算原本不是对象,参与运算时都会转换为对象

                第二种方式:两种数据类型

                    值类型    undefined string boolean number null

                    引用数据类型  object

                第三种方式:六种数据类型(重点)

                    undefined未定义类型

                    string字符串类型

                    boolean布尔类型

                    null 空类型

                    number 数值类型

                    object 对象类型

        </script>

10.检测数据类型

        <script>

            /*

                检测数据类型

                    语法一:

                        typeof(被检测的数据)

                    语法二:

                        typeof 被检测的数据

             */

            // 未定义类型

            var und = undefined;

            console.log(und);//undefined

            console.log(typeof(und));//undefined

            console.log(typeof und);//undefined

            // 字符串类型

            var str = '下午比较方便,早晚都得死';

            console.log(str);

            console.log(typeof str);//string

            // 布尔类型

            var bool = true;

            console.log(bool);

            console.log(typeof bool);//boolean

            // 数值类型

            var num = 100;

            console.log(num)

            console.log(typeof num);//number

            // 空类型  空对象指针

            var nu = null;

            console.log(nu);//null

            console.log(typeof nu);//object

            // 对象类型

            var obj = new Object();

            console.log(obj);

            console.log(typeof obj);//object

            // 函数属于对象类型,但typeof检测的值为function

            var fun = function(){

                console.log('函数')

            }

            console.log(typeof fun);

        </script>

11.分号问题

        <script>

            var a

            var b

            var c

            // 简写

            var a,b,c;

            // js并不是每一行都自动添加分号,而是在换行时若会引起语法错误,则自动添加分号

            var num

            num=10;

            var

            age

            =

            50

            // a=20 b=30

        </script>

12.undefined类型

        <script>

            /*

                undefined叫做未定义类型

                什么情况下会出现undefined?

                    1、变量声明后未进行赋值,值为undefined

                    2、直接赋值给undefined

                    3、函数的参数定义后未传入实际的值

                    4、函数调用后未给出返回值

                    5、对象的属性未定义则使用

             */

            // 1、变量声明后未进行赋值,值为undefined

            var num;

            console.log(num);//undefined

            // 2、直接赋值给undefined

            var und = undefined;

            console.log(und);

            //3、函数的参数定义后未传入实际的值

            /*

                语法:

                    function 函数名(参数){

                        函数体

                    }

                函数的调用:把函数体内的内容执行一遍

                    函数名(实际的值)

             */

             function fun(a,b){

                console.log(a)//10

                console.log(b);//undefined

             }

             fun(10);

            // 4、函数调用后未给出返回值

            function demo(){

                console.log('今天的雨说不得')

                // return 'aaa';  return的结果叫做返回值

            }

            var res = demo();//今天的雨说不得

            console.log(res);//undefined

            // 5、对象的属性未定义则使用

            var obj = new Object();

            console.log(obj.age);//undefined

        </script>

13.布尔类型

        <script>

            /*

                布尔类型  主要用于判断

                    true 真

                    false 假

             */

            var flag = false;

            if(flag){

                console.log('实践比真理更重要');

            }else{

                console.log('七月的雨,把我困在这里');

            }

        </script>

相关文章