文档章节

第5章 初探JavaScript

gtandsn
 gtandsn
发布于 2016/12/08 19:48
字数 1082
阅读 2
收藏 0
点赞 0
评论 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>     

 

© 著作权归作者所有

共有 人打赏支持
gtandsn
粉丝 0
博文 41
码字总数 26971
作品 0
成都
开源书籍-JavaScript 编程精解

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

marsdream ⋅ 06/04 ⋅ 0

JavaScript 编程精解 中文第三版 零、前言

零、前言 原文:Introduction 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 We think we are creating the system for our own purp...

ApacheCN_飞龙 ⋅ 06/01 ⋅ 0

5分钟,掌握9个风骚又简洁的JavaScript技巧

5分钟,掌握9个风骚又简洁的JavaScript技巧 编辑于 2018-05-08

优达学城(Udacity) ⋅ 05/16 ⋅ 0

这一次,我们换种姿势学习 javascript

前言 《你不知道的 javascript》是一个前端学习必读的系列,让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题:“作用...

程序员解决师 ⋅ 05/29 ⋅ 0

JavaScript 编程精解 中文第三版 十、模块

十、模块 原文:Modules 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 编写易于删除,而不是易于扩展的代码。 Tef,《Programming is Terrible》 https://raw.githubusercontent.co...

ApacheCN_飞龙 ⋅ 05/08 ⋅ 0

深入了解React.js的JSX

JSX 是React 为JavaScript 语法带来的可选扩展,用于在JavaScript 代码中编写声明式XML 风格语法。 对于Web 项目而言,React 的JSX 提供了一组类似于HTML 的XML 标签,但在其他使用场景中,会...

紫霞等了至尊宝五百年 ⋅ 06/01 ⋅ 0

【教程】javascript&浏览器对象入门教程

此教程是头一章 估计我以后也不想写什么第二章了 需要的基础知识:javascript语法和常用对象 大神勿喷 上次讲完了封包 这回我们再说说javascript javascript是一种弱类型的客户端脚本语言 在...

apachecn_飞龙 ⋅ 2013/12/05 ⋅ 0

前端基础之JavaScript

一、JavaScript的历史 略 二、ECMAScript 注:ES6就是指ECMAScript 6。 尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一...

西鼠 ⋅ 05/09 ⋅ 0

【读书笔记】JavaScript DOM编程艺术 (第2版)

第2章 2.4.1 比较操作符 1、大于(>) 2、小于(<) 3、大于或等于(>=) 4、小于或等于(<=) 判断是否在某一范围的比较,顺序无要求,如 5、等于(==) ==(等于)容易与=(赋值)混淆,i...

立正小歪牙 ⋅ 05/19 ⋅ 0

爬虫获取 js 动态数据 (1)

爬虫遇到 js 动态数据时,主要解决方法有两种: 使用一些库,例如 Selenium,来模拟浏览器环境抓取数据。但这样做对内存和 CPU 的消耗都比较大,爬虫效率低,应尽量避免。 手动分析 js 请求,...

anye137 ⋅ 06/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iExec Blockchain Marketplace for Cloud

iExec Releases the First-Ever Blockchain Marketplace for Trading Cloud Computing Berlin, Germany, May 29, 2018. iExec has released its blockchain-based decentralized cloud marke......

openthings ⋅ 26分钟前 ⋅ 0

OSChina 周二乱弹 —— 加班的代码不要枉费了我的童子功

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《29》- 未完成乐队 《29》- 未完成乐队 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :#看球提醒# 02:00 巴西v...

小小编辑 ⋅ 45分钟前 ⋅ 13

Docker Swarm的前世今生

概述 在我的《Docker Swarm集群初探》一文中,我们实际体验了Docker Swarm容器集群技术的魅力,与《Kubernetes实践录》一文中提到的Kubernetes集群技术相比,Docker Swarm没有Kubernetes显得...

CodeSheep ⋅ 今天 ⋅ 0

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 今天 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部