文档章节

第5章 初探JavaScript

gtandsn
 gtandsn
发布于 2016/12/08 19:48
字数 1082
阅读 2
收藏 0

一、准备

    在HTML中定义脚本的两种方式:内嵌和外部脚本。

  document.writeln:在文档中插入一条语句

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>222222222</span>
<script>
    document.writeln("1111111");
</script>
<span>3333333333</span>
</body>
<script>
    document.writeln("555");
</script>
</html>

二、定义和使用函数

如果像是 document.writeln("555");这样的语句,浏览器一遇到他们都会执行,可以把几条语句包在函数中,这样浏览器只有遇到一条调用函数的语句才会执行。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>222222222</span>
<script>
    document.writeln("1111111");
</script>
<span>3333333333</span>
</body>
<script>
function test() {
   document.writeln("555");
    document.writeln("666");
}
   test();
</script>
</html>

 带参数的函数:js是弱类型的语言所以定义参数时不需要带类型,

   1、不能通过参数个数来区分函数

   2、没有提供值的参数是undefined

   3、后加载的函数会覆盖前面相同名的函数

<script>
function test(a,b) {
   document.writeln("555");
    document.writeln("666");
}

function test(a,b,c,d) {
   document.writeln(a);
    document.writeln(d);
}
   test(1,2,3);
</script>

有返回结果的函数:

<script>
function test(a,b) {
 return "hehe";
}
   document.writeln(test());
</script>

三、使用变量和类型

      定义变量用var

      局部变量:定义在函数中的变量

     全局变量:直接在script元素中定义的变量

<script>
var globlvar="orange"
function test() {
var localVar="apple"
return localVar;
}
   document.writeln(test());
</script>
<script>
   document.writeln(globlvar);
</script>

三种基本类型:string ,number,boolean

对象:有哪些方法可以创建对象?

        1)new 

        <script type="text/javascript">        
            var myData = new Object();
            myData.name = "Adam";
            myData.weather = "sunny";
            
            document.writeln("Hello " + myData.name + ". ");
            document.writeln("Today is " + myData.weather + ".");
        </script>       

        2) 字面量

       方法内部使用对象属性时要用到this关键字

      <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
                printMessages: function() {
                    document.writeln("Hello " + this.name + ". ");
                    document.writeln("Today is " + this.weather + ".");        
                }
            };
            
            myData.printMessages();            
            
        </script>  

 使用对象:

1、读取和修改

      <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.name = "Joe";
            myData["weather"] = "raining";
            
            document.writeln("Hello " + myData.name + ".");
            document.writeln("It is " + myData["weather"]);
            
        </script> 

myData["weather"]:这种方式可以用变量表明属性值

2.枚举对象属性

    <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
                printMessages: function() {
                    document.writeln("Hello " + this.name + ". ");
                    document.writeln("Today is " + this.weather + ".");        
                }
            };
            
            for (var prop in myData) {
                document.writeln("Name: " + prop + " Value: " + myData[prop]);
            }
                        
        </script>        

3.增删属性和方法

   增加属性

        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.dayOfWeek = "Monday";
        </script>  

    增加方法

   <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.sayHello = function() {
              document.writeln("Hello");  
            };
                    
        </script>        

   删除属性

       <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.sayHello = function() {
              document.writeln("Hello");  
            };


            delete myData.name;
            delete myData["weather"];
            delete myData.sayHello;  
        </script>    

   判断属性是否存在

        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };

            var hasName = "name" in myData;
            var hasDate = "date" in myData;
            
            document.writeln("HasName: " + hasName);
            document.writeln("HasDate: " + hasDate);
                    
        </script>    

四、使用JavaScript运算符

   ==和===的区别:===不会进行类型转换再比较

   <script type="text/javascript">
        
            var myData1 = 5;
            var myData2 = "5";
            var myData3 = myData2;
        
            var test1 = myData1 == myData2;
            var test2 = myData2 == myData3;
            var test3 = myData1 === myData2;
            var test4 = myData2 === myData3;
            
            document.writeln("Test 1: " + test1 + " Test 2: " + test2);
            document.writeln("Test 3: " + test3 + " Test 4: " + test4);
        </script>        

五、类型转换

      字符串(+)比加法运算符(+)优先级要高

   <script type="text/javascript">
        
            var myData1 = 5 + 5;
            var myData2 = 5 + "5";
            
            document.writeln("Result 1: " + myData1);
            document.writeln("Result 2: " + myData2);
            
        </script>        

     1.数字转换成字符串:Number.toString()

        toString(), toString(2), toString(8), toString(6);toFixed(n):以小数点后几位表示

     2.字符串转换成数字:Number,praseInt,parseFloat;

      Number比其它两个都要严格,后面两个会忽略数字面的字符串。

六、使用数组

      1、创建数组:

        <script type="text/javascript">        
     
            var myArray = new Array();
            myArray[0] = 100;
            myArray[1] = "Adam";
            myArray[2] = true;
    
        </script>     

  <script type="text/javascript">
        
          var myArray = [100, "Adam", true];
    
        </script>     

   2.读取和修改数组内容:

        <script type="text/javascript">
            var myArray = [100, "Adam", true];
            document.writeln("Index 0: " + myArray[0]);            
        </script>
          <script type="text/javascript">
            var myArray = [100, "Adam", true];
            myArray[0] = "Tuesday";
            document.writeln("Index 0: " + myArray[0]);            
        </script>     

     3、枚举数组内容

        <script type="text/javascript">
            var myArray = [100, "Adam", true];
            for (var i = 0; i < myArray.length; i++) {
                document.writeln("Index " + i + ": " + myArray[i]);                
            }                        
        </script>    

    4、数组的常用内置方法:join,pop,push,reverse,shift,slice,sort,unshift

七、 异常:

e的属性:message,name(错误名称),number

        <script type="text/javascript">
            try {
                var myArray;
                for (var i = 0; i < myArray.length; i++) {
                    document.writeln("Index " + i + ": " + myArray[i]);                
                }
            } catch (e) {
                document.writeln("Error: " + e);
            } finally {
                document.writeln("Statements here are always executed");
            }
        </script>    

八、比较undefined和null值

      undefined:当定义了一个值没有赋值的时候,和对象属性不存在的时候。表示"缺少值",就是此处应该有一个值,但是还没有定义

    <script type="text/javascript">
		var abc;
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            document.writeln("Prop: " + myData.doesntexist);
			document.writeln("11111: " + abc);
        </script>        

      null表示没有值,表示"没有对象",即该处不应该有值

    区分:

        <script type="text/javascript">
        
            var firstVal = null;
            var secondVal;
            
            var equality = firstVal == secondVal;
            var identity = firstVal === secondVal;
    
            document.writeln("Equality: " + equality);
            document.writeln("Identity: " + identity);
            
        </script>     

 

© 著作权归作者所有

共有 人打赏支持
下一篇: 第4章 初探CSS
gtandsn
粉丝 0
博文 61
码字总数 31331
作品 0
成都
私信 提问
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
开源书籍-JavaScript 编程精解

《JavaScript 编程精解》(Eloquent JavaScript)第三版,是由马尔奇·哈弗贝克(Marlin Haverbeke)JavaScript程序员编写的JS入门书籍,Marlin Haverbeke通晓多种编程语言,在Web开发方面积累...

marsdream
06/04
0
0
《JavaScript入门经典》注意点笔记摘录1

第1章 开启Javascript开发之门 1.一般情况下,计算机的最低配置往往不能满足复杂的JavaScript程序的处理需要,如果增大内存,可以明显地提高程序在浏览器中运行的速度。 2.<script>标记可以放...

ChenReason
2014/04/08
0
2
javascript入门经典【推荐】—新手必备、零基础学习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a125138/article/details/7819466 本书目录 第一章: JavaScript语言基础第二章: JavaScript内置对象 第三章...

续写经典
2012/08/01
0
0
javascript——从「最被误解的语言」到「最流行的语言」

JavaScript曾是“世界上最被误解的语言”,因为它担负太多的特性,包括糟糕的交互和失败的设计,但随着Ajax的到来,JavaScript“从最受误解的编程语言演变为最流行的语言”,这除了幸运之外,...

modernizr
2014/05/20
1K
12

没有更多内容

加载失败,请刷新页面

加载更多

js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
12
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
20
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
23
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
昨天
12
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
昨天
34
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部