MENU

JavaScript笔记(1)

2019 年 09 月 19 日 • 默认分类

努力做一条咸鱼🍡

Javascript是一门脚本 (Script) 语言,它虽然名字中带有Java,但是它和Java完全是两种语言。当时它只是蹭Java的热度而命名为JavaScript,曾经还用过名为:Mocha、LiveScript。

它已经由ECMA(欧洲计算机制造商协会)通过ECMAScript实现语言的标准化[5]。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。

关于JavaScript的历史

来自Wikipedia

肇始于网景

1993年,伊利诺伊大学厄巴纳-尚佩恩分校的国家超级计算机应用中心(NCSA)发表了NCSA Mosaic,这是最早流行的图形接口网页浏览器,它在万维网的普及上发挥了重要作用。1994年,一家名为Mosaic Communications的公司在加州芒廷维尤成立了,并雇用了许多原来的NCSA Mosaic开发者用来开发Mosaic Netscape,该公司的目标是取代NCSA Mosaic成为世界第一的网页浏览器。第一个版本的网页浏览器Mosaic Netscape 0.9于1994年底发布。在四个月内,已经占据了四分之三的浏览器市场,并成为1990年代互联网的主要浏览器。为避免NCSA的商标所有权问题,该浏览器于同年更名为Netscape Navigator,该公司命名为Netscape Communications。网景预见到网络需要变得更动态。公司的创始人马克·安德森认为HTML需要一种胶水语言,让网页设计师和兼职程序员可以很容易地使用它来组装图片和插件之类的组件,且代码可以直接编写在网页标记中。

1995年,网景招募了布兰登·艾克,目标是把Scheme语言嵌入到Netscape Navigator浏览器当中[8]。但更早之前,网景已经跟昇阳合作在Netscape Navigator中支持Java,这时网景内部产生激烈的争论[9]。后来网景决定发明一种与Java搭配使用的辅助脚本语言并且语法上有些类似[10],这个决策导致排除了采用现有的语言,例如Perl、Python、Tcl或Scheme。为了在其他竞争提案中捍卫JavaScript这个想法,公司需要有一个可以运作的原型。艾克在1995年5月仅花了十天时间就把原型设计出来了。

最初命名为Mocha,1995年9月在Netscape Navigator 2.0的Beta版中改名为LiveScript,同年12月,Netscape Navigator 2.0 Beta 3中部署时被重命名为JavaScript1,当时网景公司与昇阳计算机公司组成的开发联盟为了让这门语言搭上Java这个编程语言“热词”,因此将其临时改名为JavaScript,日后这成为大众对这门语言有诸多误解的原因之一[12]。

JavaScript用法

  • HTML 中的脚本必须位于<script></script>标签之间。
  • 脚本可被放置在 HTML 页面的 <body><head> 部分中。
  • 通常推荐放在body网页结尾。把脚本置于元素的底部,可改善显示速度,因为脚本编译会拖慢显示。
那些老旧的实例可能会在<script>标签中使用type="text/javascript"。现在已经不必这样做了。JavaScript是所有现代浏览器以及 HTML5 中的默认脚本语言。

<script>标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。<script></script> 会告诉 JavaScript在何处开始和结束。

<script></script> 之间的代码行包含了 JavaScript:

    <script>
    document.write("<p>这是一个段落</p>");
    document.write("<div><code>print f</code></div>");
    </script>

JavaScript 函数和事件

上面例子中的 JavaScript 语句,会在页面加载时执行。通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

    <p id="test">这是一个段落</p>
    <script>
        function myFunction(){
            document.getElementById("test").innerHTML="test"
        }
    </script>
    <div>
        <button type="button" onclick="myFunction()">click me!</button>
    </div>

onclick中需要填写的是函数的名称+()。不仅仅只是填写函数的名称就可以了。

外部的JavaScript

和css一样,JavaScript也可以从外部引用来页面内加载。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

<body>
    <p id="test">这是一个段落</p>
    <script scr="myfunction.js"></script>

在外部文件中放置脚本有如下优势:

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载

一些实例

在html中添加内容

使用document.write可以在html中直接插入任意内容,包含可以识别的html标签。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <p>just test</p>
    <script>
        document.write("<p>inner test</p>");
    </script>
</body>

在html中修改内容

button中调用testFunction()函数,修改id=test的段落内容。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <p id="test">just test</p>
    <button type="button" onclick="testFunction()">
        check out!
    </button>
    <script>
        function testFunction(){
            document.getElementById("test").innerHTML="ttttttttest!"
        }
    </script>
</body>

修改html的属性

和修改html的内容类似,JavaScript可以直接修改html标签内的属性。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body style="background-color: aqua">
    <button type="button" onclick="document.getElementById('miao').src='black.png'">黑喵</button>
    <img id="miao" src="black.png" style="text-align: center">
    <button type="button" onclick="document.getElementById('miao').src='white.png'">白喵</button>
</body>

修改html内的style属性

和修改html标签内的属性类似,直接修改style内容值

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body style="background-color: aqua">
    <div>
        <button type="button" onclick="document.getElementById('miao').src='black.png'">黑喵</button>
        <img id="miao" src="black.png" style="text-align: center;">
        <button type="button" onclick="document.getElementById('miao').src='white.png'">白喵</button>
    </div>
    <div>
        <button type="button" onclick="xiaoFunction()">喵喵变小</button>
        <button type="button" onclick="daFunction()">喵喵变大</button>
    </div>
    <script>
        function xiaoFunction(){
            document.getElementById("miao").style.width="250px"
        }
    </script>
    <script>
        function daFunction(){
            document.getElementById("miao").style.width="1000px"
        }
    </script>
</body>

一些细节

HTML 输出流中使用document.write,相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用(如使用函数),会覆盖整个文档。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <p id="test">just test</p>
    <p id="test">我还没有被覆盖</p>
    <button type="button" onclick="testFunction()">
        check out!
    </button>
    <script>
        function testFunction(){
            document.write("<div>我占据了整个网页~</div>")
        }
    </script>
</body>
  • 外部 javascript文件不使用 <script>标签,直接写javascript 代码。

一些要点

  • 直接在html中插入内容

    document.write("直接在html中插入");
  • 在函数里使用`document.write即在文档加载后再执行这个操作,会实现文档的整个覆盖
  • button使用onclick="myFunction()"来调用鼠标点击按钮时的函数
  • document.getElementById("test").innerHTML="test"来实现对有id的标签插入内容
  • document.getElementById('miao').src='black.png'来实现对有id的标签修改标签属性
  • document.getElementById("miao").style.width="250px"来实现对有id的标签修改style属性
  • 在双引号内需要使用单引号

我的练习稿

最后编辑于: 2019 年 10 月 12 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论

已有 4 条评论
  1. 你这文章中的彩色小表情从哪找的 很好看~

    1. @Mark那个是emoji🎃

    2. @Defectink有意思,还有个问题,你博客不是很稳定,经常CSS加载不进来

    3. @Mark还有这种情况?是在什么地方加载不进来的😶