zoukankan      html  css  js  c++  java
  • javascript入门第一天

    参考javascript教程网http://www.ijavascript.cn/

    一、概述

    1. javascript可以嵌入HTML的如何地方——内部引用Javascript

    <html>
     <body>
     <script type="text/javascript">
     document.write("dreamweaver话题!");
    </script>
     </body>
     </html> 

     在html/jsp/php/jsp中javascript可以出现多段,浏览器会按先后顺序依次执行

    2.外部引用Javascript——把 JavaScript 代码写到另一个文件当中(此文件通常应该用“.js”作扩展名),然后用格式为“<script src="javascript.js"></script>”的标记把它嵌入到文档中。

    <html>
     <head>
     <script src="xxx.js">....</script>
     </head>
     <body>
     </body>
     </html>

     这样做的好处在于,可以在很多网页中引用同一个JS文件,而且还可以将若干个JS文件放在一个目录中,方便管理。 外部引用Javascript文件,可以将其放置在<body>中间,也可以放在<head>标签中间。

    参考 <script>标记还有一个属性:language(缩写lang),说明脚本使用的语言。对于 JavaScript,请用“language="JavaScript"”。
    参考 相对于<script>标记,还有一个<server>标记。<server>标记所包含的,是服务器端 (Server Side)的脚本。这里只讨论客户器端(Client Side)的 JavaScript,也就是用<script>标记包含的脚本。

    3.内联引用Javascript

    不使用<script>标签标记,在页面中的某个标签中直接引用一小段Javascript代码也是可以的,这样做就视为内联引用
    <input type="button" value="点我" onclick="alert('你好!');">

    4. 如果想在浏览器的“地址”栏中执行 JavaScript 语句,用这样的格式:
          javascript:<JavaScript语句>
    这样的格式也可以用在连接中:
         <a href="javascript:<JavaScript语句>">...</a>

    5.Javascript注释

    单行注释: //

    多行注释:/**/

     6,添加noscript提示

    noscript从字面上解释就是没有script的意思,它可以在用户的浏览器没有开启或不支持Javascript时给出提示信息,所以,在Html加入noscript内容可以给用户带来更好的体验。

    <script type="text/javascript">
     document.write("dreamweaver话题!!");
     </script>
     <noscript>
     <p>您的浏览器不支持 JavaScript,或者是您的浏览器没有开启JavaScript功能。</p>
     </noscript>
    当浏览器不支持或没有开启Javascript时,就会提示<noscript>之间的内容,这样可以给用户带来更好的体验。

    7.注意文本流

    曾在前面的文章中提到过“文本流”一词,其实就是注意书写和解析顺序的意思。Javascript和Html、Css一样都是从左至右、从上至下顺序解析输出的,所以后编写的代码就是最后被执行的,如果程序中存在冲突的部分,前面的就会被后面的代替。

    8.其它方面

    Javascript文件尽量得小,个数尽量少。 为了方便记忆和浏览器判断,可以在外部引用JS文件时标注版本号,比如:

    <script type="text/javascript" src="xxx.js?2010012701"></script>

    二、javascript的变量

    1、关于变量的声名--Declaring Variables
    大家都知道javascript是弱数据类型变量,可以隐式声名变量的, 这个时候js的数据类型由js引擎决定的。

    但要注意,隐式声名变量总是被创建为全局变量。看以下代码,情愿javascript语言强制声明变量。建议大家一定要var声明变量。

    <SCRIPT LANGUAGE="JavaScript">  
        function test(){  
            var a=222;  
         document.writeln(a);  
        }  
        test();  
        document.writeln(a);
    </SCRIPT>  

    JavaScript是一种自由类型的语言。它的变量没有预定类型(相对于强类型语言,如 C++)。相反,JavaScript变量的类型相应于他们包含的值的类型。这种操作的好处是能将值作为另一类型处理。
    在 JavaScript中,可以对不同类型的值执行运算,不必担心 JavaScript解释器产生异常。相反,JavaScript解释器自动将数据类型之一改变(强制转换)为另一种数据类型,然后执行运算。例如:

    运算 结果
    数值与字符串相加 将数值强制转换为字符串。
    布尔值与字符串相加 将布尔值强制转换为字符串。
    数值与布尔值相加 将布尔值强制转换为数值。

     考虑下面的示例。

    var x = 2000;      // 一个数字。
    var y = "Hello";   // 一个字符串。
    x = x + y;         // 将数字强制转换为字符串。
    document.write(x); // 输出 2000Hello。

    要想显式地将字符串转换为整数,使用 parseInt 方法。要想显式地将字符串转换为数字,使用 parseFloat 方法。请注意,比较大小时字符串自动转换为相等的数字,但加法(连接)运算时保留为字符串。

    2、关于变量的作用域

    猜猜以下代码输出什么。

    <SCRIPT LANGUAGE="JavaScript">  
        var x='000';  
        document.writeln(x);
        a();  
        function a(){  
            var x='aaa';  
         function b(){  
             document.writeln(x);
                var x='bbb';  
          document.writeln(x);
         }  
         b();  
            document.writeln(x); 
        }  
    </SCRIPT>

     如果你的答案是   000 undefined bbb aaa。恭喜,ok.当代码用到x变量时,先从函数块(权威指南中用调用对象来解释)中找,如果找不到,从上一级函数块找,直到找到,如果知道顶层代码 (指var x='000';的位置)还没找到定义,代码会报未定义错误。
    改一下代码,得到 000 undefined 111 111

    <SCRIPT LANGUAGE="JavaScript">  
        var x='000'; 
        document.writeln(x); 
        a(); 
        function a(){  
         function b(){  
             document.writeln(x); 
          document.writeln(x); 
         }  
         document.writeln(x); 
         var x='111'; 
         b(); 
        }  
    </SCRIPT>  

    3、新的问题
    变量个作用域清楚了,注意上面的代码。为什么我的function a()定义以前就可以调用a函数了,而我的var x='111';前“不可以用”x啊???
    让我把我的理解一一道来
    首先:以下代码让我相信javascript有个预编译过程,不是完全按照顺序解释执行的。

    <SCRIPT LANGUAGE="JavaScript">  
    a();
    function a(){  
        alert();
    }  
    </SCRIPT>

    个人理解这个预编译过程不会象java/c#那样把代码编译成虚拟机认识的语言,更不会象vb,vc那样编译成更底层的语言。猜想只是把这个函数预装载到 这段函数执行的全局环境中,在这个执行环境中,该函数被标识定义过,可以直接使用了。(看到网上很多人写的AOP的javascript实现,其实这个预 编译过程才是翻译元数据最佳时候,可惜就javascript语言来讲,是有些落伍了)
    变量说了,为什么函数可以,我变量就不可以呢。

    <SCRIPT LANGUAGE="JavaScript">  
    document.writeln(a);
    var a=0</SCRIPT>

    为什么我要输出undefined呢?为什么我a就不可以预编译一把呢?
    大家看看以下两段代码会输出什么呢啊???

    <SCRIPT LANGUAGE="JavaScript">  
    document.writeln(a);
    a=0</SCRIPT> 

    可能你运行试了,可能你本来就知道,a未定义。哈哈哈,好了。
    现在我确信var a=0;被javascript解释器“预编译过”,至少是记录下来了。甚至把它的值设置为 undefined。“undefined”这个词名字取的很是让人误解,怎么能叫未定义呢,分明是javascript中所有变量的初始化值。关于 null与undefined的比较我实在不愿提了。
    注意上面两段代码还反映一个现象。隐式声明的变量是在解释的时候才把自己定义为全局变量的。

    关于函数与变量javascript预编译的不同处理,大家可以与java class的加载过程比较下。java也是对基本类型设出值,对象为null的。(不往远扯了)
    4、区别未定义变量和未附值变量

    <SCRIPT LANGUAGE="JavaScript">  
        var a;  
        document.writeln(a);
     </SCRIPT>  
    未定义变量和未附值变量   权威指南中文版 定义的。通过第三条分析,我觉得变量就应该以   定义和未定义变量区别。未附值变量和undefined有点冲突,javascript不是强类型语言,没发附默认值,才来了个undefined。

    5、基本类型和引用类型
    熟悉java的朋友可能这部分很清楚。没啥
    说头。
    6、javascript的垃圾回收
    关于这部分内容一直没见着个权威说法。在javascript权威指南中有两小节提到这个问题。
    对于字符串、对象、数据这些没有固定大小,必须为它们动态的分配内存,但什么时候回收这些内存呢?javascript使用和java一样的garbage collection的方法。

        var s="hello";
        var u=s.toUpperCase();
        s=u;  

    运行这段代码后,"hello"没有变量会再用到他,这是"hello"的存储空间的被垃圾回收了。对于javascript的垃圾回收,你唯一要关心的是,它一定会进行,不要对内存担心。
    注意,javascript不提供任何的强制垃圾回收或释放内存的运算附或语句。
    javascript的delete运算附和C++中的不同。

    <SCRIPT LANGUAGE="JavaScript">  
    var o=new Object();
    o.name="zkj"; 
    o.age=25;
    o.bir=new Date();
    for(var key in o){  
        document.writeln(key+':'+o[key]+'</br>');
    }  
    document.writeln('delete o.bir</br>');
    delete o.bir;  
    for(var key in o){  
        document.writeln(key+':'+o[key]+'</br>');
    }  
    </SCRIPT> 

    7、作为属性的变量

    <SCRIPT LANGUAGE="JavaScript">  
        var x=100;  
        document.writeln(x);
        add(x);
        document.writeln('</br>------------------------</br>');
        var x=200;  
        document.writeln(x);
        add(x); 
        function add(x){  
            document.writeln(x);
            var x=300;  
            document.writeln(x);  
            var x=400;  
            document.writeln(x); 
        }  
    </SCRIPT>  

    估计很多人能得出正确答案
    100 100 300 400
    ------------------------
    200 200 300 400
    但这里我想引入  全局对象和调用对象的 概念(javascript权威指南是这么翻译滴)

        <SCRIPT LANGUAGE="JavaScript">  
        var x=100;   //我们在全局对象中加了个属性x. 对比  
         //var o=new Object();;o.x=100;  
        document.writeln(this.x);//用this访问全局对象  
        add(this.x);//把全局对象的属性值传递对函数中  
        document.writeln('</br>------------------------</br>');
        this.x=200;//把全局变量中的x属性修改掉  
        document.writeln(window.x); 
        add(window.x); 
        function add(x){  
            //假设有个局部对象,调用对象,函数调用过程中的对象temp   temp.x=${传入的值}  
            document.writeln(x);//哦这打印的可是参数中的值,也就是temp.x=this.x的值,  
            var x=300;//把调用对象变量的签名给覆盖了.  
            document.writeln(x);; //打印修改过的值。 temp.x  
            var x=400;//temp.x=400  
            document.writeln(x);
        }  
    </SCRIPT>  

    在函数的调用过程中,假设有个调用对象存在,把函数的参数,和函数内的临时变量当成这个调用对象的属性。当然这个调用对象的生命周期很短。
    注意,当我们访问全局变量的属性入x的时候,不必要用this.x 或window.x访问,当在有<frame><iframe>的页面时会出现混淆。

     

  • 相关阅读:
    web socket RFC6455 frame 打包、解包
    Cacti 加入多台主机带宽汇聚
    C-链表实现,保存文件,评估-单项选择题系统课程设计---ShinePans
    ios7.1安装提示"无法安装应用程序 由于证书无效"的解决方式二(dropbox被封项目转移到Appharbor上)
    【模板】第二类斯特林数·列
    2018-8-10-win10-uwp-slider-隐藏显示数值
    2018-8-10-win10-uwp-slider-隐藏显示数值
    2019-1-27-WPF-使用-ItemsPanel-修改方向
    2019-1-27-WPF-使用-ItemsPanel-修改方向
    2018-8-10-win10-uwp-x_Bind-无法获得资源
  • 原文地址:https://www.cnblogs.com/JoannaQ/p/2622506.html
Copyright © 2011-2022 走看看