zoukankan      html  css  js  c++  java
  • Javascript基础第一课时【读书笔记】

    这些东西都非常基础,一看就懂的,有些函数的功能需要记忆下来。最近基本上吧《Javascript DOM编程艺术》看完了,关于Jquery的知识有很多不懂得地方,慢慢琢磨吧。由于没有源文件有一个综合实例没有做成,有的可以发给我一下,谢谢哈boychik.pure@gmail.com

    今天是基础知识,后面会继续更新。慢慢深入,大家一起进步,终究会有成功的那一天。尽请期待:)

    1.javascript的组成部分

    • ECMAscript----主要用来浏览器解析,例如,定义一个变量,函数----浏览器几乎都兼容
    • BOM(browser object model)----浏览器对象模型,针对浏览器的操作,例如弹出窗口,移动浏览器的位置,打印等等----几乎不兼容,不过用的也比较少。
    • DOM(document object model)----文档对象模型,操作页面的功能,例如获取文档的div,class,添加元素等----大部分都兼容

    2.变量类型

    • number
    • string
    • boolean
    • object
    • function
    • undefined
    • 建议:一个变量只存储一个类型的数据

    3.对象(js里一切都是对象)

    基本类型:number,string,boolean,undefined他们都很单纯,都简简单单的(这些不是对象)

    复合类型:object,数组array,日期对象date,复合类型由一些基本类型复合而成,包括了一些杂七杂八的东西。

    4.数据类型转换----显示转换/隐式转换

     1 <script>
     2 window.onload=function ()
     3 {
     4     var oTxt1=document.getElementById('txt1');
     5     var oTxt2=document.getElementById('txt2');
     6     var oBtn=document.getElementById('btn1');
     7     
     8     oBtn.onclick=function ()
     9     {
    10         alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));
    11     };
    12 };
    13 </script>
    14 </head>
    15 
    16 <body>
    17 <input id="txt1" type="text" />
    18 <input id="txt2" type="text" />
    19 <input id="btn1" type="button" value="求和" />
    20 </body>

    优化后,如果输入的不是数值,会提示。

     1 <script>
     2 window.onload=function ()
     3 {
     4     var oTxt1=document.getElementById('txt1');
     5     var oTxt2=document.getElementById('txt2');
     6     var oBtn=document.getElementById('btn1');
     7     
     8     oBtn.onclick=function ()
     9     {
    10         var num=parseInt(oTxt1.value)+parseInt(oTxt2.value);
    11         
    12         if(isNaN(num))
    13         {
    14             alert('您输入的有误');
    15         }
    16         else
    17         {
    18             alert(num);
    19         }
    20     };
    21 };
    22 </script>

    如果在文本框输入不同的两个数字,例如2和3,那么按钮的单击事件会弹出23,而不是5,因为文本框里面的东西默认的就是字符串而不是数值型的数据。这里使用parseInt函数可以转化字符串的类型。

    1 <script>
    2     var a='13ab';
    3     alert(parseInt(a));
    4 </script>

    准确的说,parseInt函数是提取前面的数字,如果遇到字符串就不会继续往后面去值了。

    1 <script>
    2     var a='ab';
    3     alert(parseInt(a));
    4 </script>

    如果是这样的话,会出现NaN (not a number),也就是不是一个数字的意思。

    1 <script>
    2     var a='12.6';
    3     alert(parseInt(a));
    4 </script>

    如果是这样的话,会弹出12这个数字,后面的小数点直接省略了。

    1 <script>
    2     var a='12.6';
    3     alert(parseFloat(a));
    4 </script>

    parseInt的兄弟parseFloat函数。

    NaN(这是个神奇的东西,他和自己也不相等,可能在某种程度上有区别吧)

    JavaScript 以 NaN 的形式输出 Number.NaN。请注意,NaN 与其他数值进行比较的结果总是不相等的,包括它自身在内。因此,不能与 Number.NaN 比较来检测一个值是不是数字,而只能调用 isNaN() 来比较。

    1 <script>
    2     var a=parseInt('ab');
    3     var b=parseInt('ab');
    4     alert(a==b);
    5 </script>
    1 <script>
    2     var a=parseInt('ab');
    3     var b=parseInt('ab');
    4     alert(a==b);
    5 </script>

    这两个的结果都是flase.以上都是属于显示转换。

    隐式转换:

    1 <script>
    2     var a='2';
    3     var b=2;
    4     alert(a==b);
    5 </script>

    运行结果是true。这就是一个隐式转换的例子,他会把两边的数据类型进行比较然后相加。

    1 <script>
    2     var a='2';
    3     var b='2';
    4     alert(a-b);
    5 </script>

    如果是减号那么结果是0,如果是加号结果就是22;你懂得应该。只有加法不能转化,乘除减法都可以。

    关于===

    全等就是不仅要内容相等,而且类型也要相等。

    5.变量作用域

    • 全局变量---是魔鬼==!
    • 全局变量的存在主要有以下一些原因:
      1,使用全局变量会占用更多的内存(因为其生命期长),不过在计算机配置很高的今天,这个不成为什么问题,除非使用的是巨大对象的全局变量,能避免就一定要避免。
      2,使用全局变量程序运行时速度更快一些(因为内存不需要再分配),同样现在也快不了多少。
      3,对于局部变量的名字空间污染,这个在不使用太多变量时是可以避免的。
      4,当全局变量与局部变量重名的时候,起作用的是局部变量,全局变量被屏蔽掉。
      总之,全局变量可以使用,但是全局变量使用时应注意的是尽可能使其名字易于理解,而且不能太短,避免名字空间的污染;避免使用巨大对象的全局变量。(这一段摘自百度百科)
    • 局部变量---闭包

    这里比较好理解就不解释了。闭包的知识细节还有很多,今天先到这吧,洗澡睡觉,晚安~

    •  1 <script>
       2     function aa(){    //父函数
       3         var a=1;
       4         function bb(){ //子函数,可以啃老。
       5             alert(a);
       6         };
       7         bb();
       8     };
       9     aa();
      10 </script>
  • 相关阅读:
    字符设备驱动程序
    内存管理
    在React中使用context来传递属性
    iTerm2保存登录密码
    Mac OS设置终端 autocomplete 大小写不敏感
    Linux下安装Google SDK 配置Google API翻译环境
    使用Shell远程给Linux安装JDK
    Linux下wget命令 指定下载文件路径
    linux下解压/压缩命令
    获取鼠标在屏幕上的位置
  • 原文地址:https://www.cnblogs.com/paxster/p/3061680.html
Copyright © 2011-2022 走看看