JavaScript 简介

  • JavaScript 是一种可以给网页增加交互性的编程语言。
  • 熟悉 JavaScript 的好方法是“站在其他程序员肩膀上”,即Web 上有大量 JavaScript 代码,复制一下并稍作修改,就可以供自己使用。
  • JavaScript 脚本语言,在 HTML 页面内容是包围在 <script> 标签中,不用使用 type=”text/javascript”属性。JavaScript 是所有现代浏览器以及 HTML5 中默认的脚本语言
  • JavaScript 与 Java 无关,市场营销。
  • JavaScript 的微软版本称为 JScript,ASP 中可以使用 JScript 脚本语言。

Hello, World

老习惯,我们第一个 JavaScript 是向浏览器窗口输出“Hello, World!”,脚本代码(HelloWorld.html)如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World!</title>
<script>
function SayHello(){
document.getElementById("myMessage").innerHTML = "Hello, World!";
}
</script>
</head>
<body>
<script>
document.write("<h1>我们的第一个 JavaScript 程序</h1>");
document.write("<p id=\"myMessage\">哦, 试试下面的按钮...</p>");
</script>
<button type="button" onClick="SayHello()">尝试一下</button>
</body>
</html>

Firefox 40.0.2 输出效果如下图:

点击“尝试一下”按钮后,<p> 标签的内容发生了变化,如下图:

我们看到了 document.getElementById(),这个方法是 HTML DOM 中定义的。

DOM(Document Object Model)文档对象模型,是用于访问 HTML 元素的正式 W3C 标准。


JavaScript 的局限性

  • 不允许写服务器上的文件。
  • 不能关闭不是由它自己打开的窗口。
  • 不能从来自另外一个服务器的已经打开的页面中读取信息。

使用外部脚本

也可以把脚本保存在外部文件中。外部文件通常包含被多个网页使用的代码,会使站点更容易维护。

外部 JavaScript 文件的扩展名是 .js

如果需要使用外部文件,请在 <script> 标签中使用 “src”属性中设置,如下:

<!doctype html>
<html>
<head>
<script src="myScript.js"></script>
</head>
<body>
</body>
</html>

在这个外部脚本演示程序中,script_001.html 中引用了外部文件 script_001.js

script_001.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外部脚本的使用</title>
<script src="script_001.js"></script>
</head>
<body>
<h1 id="helloMessage"></h1>
</body>
</html>

script_001.js

// JavaScript Document
window.onload = writeMessage; function writeMessage(){
document.getElementById("helloMessage").innerHTML = "Hello, World!";
}

windows.onload 是一个事件处理程序,意思是当窗口完成加载时,运行 writeMessage 函数。


示例下载

HelloWorld.RAR

了解JavaScript(1)- Hello World的更多相关文章

  1. JavaScript之父Brendan Eich,Clojure 创建者Rich Hickey,Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  4. 探究javascript对象和数组的异同,及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  7. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  8. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  9. JavaScript进阶之路(一)初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  10. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. The STM32 SPI and FPGA communication

    The STM32 SPI and FPGA communication STM32 spi bus communication SPI bus in the study, the protocol ...

  2. EasyNetQ介绍

    EasyNetQ 是一个容易使用,坚固的,针对RabbitMQ的 .NET API. 假如你尽可能快的想去安装和运行RabbitMQ,请去看入门指南.EasyNetQ是为了提供一个尽可能简洁的适用与R ...

  3. UVA12304-2D Geometry 110 in 1!

    就是给了六个关于圆的算法.实现它们. 注意的是,不仅输出格式那个符号什么的要一样.坐标的顺序也要从小到大-- 基本上没考虑什么精度的问题,然后就过了. 大白鼠又骗人.也许我的方法比較好? 我的做法就是 ...

  4. 网速4M等于多少KB/S,等于多少kbps

    4M=512KB/S=4096Kbps 1KB/S=8Kbps 8倍速 转:http://zhidao.baidu.com/link?url=8GAyhcY9BbVstQr8pE3I7QP_M53Km ...

  5. 安装oracle10g“程序异常终止。发生内部错误。请将以下文件提供给oracle技术支持部门

    发生情景:测试环境搭建的是windows 2008 r2 sp1系统 在安装Oracle 10g数据库时发生了错误,现在把解决问题的方法和原因分享给大家. *  安装出现的现象: 输入完密码后下一步时 ...

  6. 用Qemu搭建x86_64学习环境

    作者信息 作者:彭东林 邮箱:pengdonglin137@163.com QQ:405728433 软件平台 主机: Ubuntu14.04 64位版本 模拟器:Qemu-2.8.0 Linux内核 ...

  7. Android基础笔记(九)- 广播

    广播的概念 广播的生命周期 案例-监听短信到来并解析短信内容 案例-拦截外拨电话并设置区号 案例-SD卡状态监听 介绍一些经常使用的广播 发送自己定义广播 有序广播和无序广播 启程!! ! 广播的概念 ...

  8. 破产姐妹第六季/全集2 Broke Girls迅雷下载

    英文全名2 Broke Girls,第6季(2016)CBS. 本季看点:<破产姐妹>第五季季终集达到了收视人数699万收视率1.7.在第五季终集,两姐妹发现Han(马修·摩伊 饰)的生活 ...

  9. itunes connect 改版后无法访问的处理办法

    很悲剧,今天要提交版本,结果itunes connect改版,然后进不去了, 限于无限loading- 是网速慢吗?再等等,先吃个饭,待会再来看-   ------------------------ ...

  10. Android 阴影,圆形的Button

    MainActivity.java package com.kale.gridlayout; import android.app.Activity; import android.graphics. ...