JavaScript 简介

JavaScript是一种可以用来给网页增加交互性的编程语言。
常常会看到JavaScript被称为“脚本语言”(scripting language),这暗示着它更适合编写脚本而不是程序。这实际上并没有根本性的差异。JavaScript脚本也是一种程序,它们包含在HTML页面内部(原先编写脚本的方式),或者驻留在外部文件中(现在的首选方法)。
在HTML页面上,因为脚本文本包围在<script>标签中,所以它不会显示在用户的屏幕上,而Web浏览器知道应该运行JavaScript程序。<script>标签常常放在HTML页面的<head>部分中,如脚本1-1所示。但是如果愿意,也可以将脚本放在<body>部分中。

有些人可能会在CSS中使用#和.时出现混淆,因为他们想不起哪个符号用于class,哪个符号用于id。
我们的记忆方法是:在给定的页面上,一个id只能出现一次。“1”是一个数字,而井号(#)也称为数字符,所以这个符号用于id。

在脚本中添加注释

  • 单行注释
  • 多行注释
/*
     This is an example of a long JavaScript comment. Note the characters at the beginning and ending of the comment.
     This script adds the words "Hello,world!" into the body area of the HTML page.
*/
window.onload = writeMessage; // Do this when page finishes loading

function writeMessage() {
     // Here's where the actual work gets done
     document.getElementById("helloMessage").innerHTML = "Hello, world!";

alert, confirm, prompt

弹出的警告窗口 alert

alert("Welcome to my JavaScript page!");

确认用户的选择 confirm

if (confirm("Are you sure you want to do that?")) {
     alert("You said yes");
} else {
     alert("You said no");
}

提示用户 prompt

var ans = prompt("Are you sure you want to do that?","");
if (ans) {
     alert("You said " + ans);
} else {
     alert("You refused to answer");
}

switch小案例

window.onload = initAll;

    function initAll() {
      document.getElementById("Lincoln").onclick = saySomething;
      document.getElementById("Kennedy").onclick = saySomething;
      document.getElementById("Nixon").onclick = saySomething;
    }

    function saySomething() {
      switch (this.id) {
        case "Lincoln":
          alert("Four score and seven years ago...");
          break;
        case "Kennedy":
          alert("Ask not what your country can do for you...");
          break;
        case "Nixon":
          alert("I am not a crook!");
          break;
        default:
      }
    }

也可以向switch语句传递字符串之外的其他值。可以在switch语句中使用数字值,甚至对数学计算的结果进行评估。

处理错误

window.onload = initAll;

function initAll() {
    var ans = prompt("Enter a number","");
    try {
       if (!ans || isNaN(ans) || ans < 0) {
          throw new Error("Not a valid number");
       }
       alert("The square root of " + ans + " is " + Math.sqrt(ans));
    } catch (errMsg) {
       alert(errMsg.message);
    }
}

说明: 如果!ans是true,就意味着用户没有输入任何内容。内置的isNaN()方法检查传递给它的参数是否“不是数字”(Not a Number)。如果isNaN()返回true,就说明输入的内容是无效的。如果ans小于0,它就是负数。对于以上任何情况,都希望抛出一个错误。

for循环

function initAll() {
         for (var i = 0; i < 24; i++) {
            var newNum = Math.floor(Math.random() * 75) + 1;
            document.getElementById("square" + i).innerHTML = newNum;
         }
      } 

JavaScript Math函数

abs 绝对值
sin、cos、tan 标准三角函数,参数用弧度表示
acos、asin、atan 反三角函数,返回值用弧度表示
exp、log 以e为底数的指数和自然对数
ceil 返回大于等于当前参数的最小整数
floor 返回小于等于当前参数的最大整数
min 返回两个参数中较小者
max 返回两个参数中较大者
pow 指数函数,第一个参数是底数,第二个参数是幂
random 返回介于0和1之间的随机数
round 返回当前参数最接近的整数,四舍五入
sqrt 平方根

生产随机数
0~9的随机数var randomNum = Math.floor (Math.random() * 10);
1~10的随机数var randomNum = Math.floor (Math.random() * 10) + 1;

探测对象

在编写脚本时,你可能希望检查浏览器是否有能力理解你要使用的对象。进行这种检查的方法称为对象探测(object detection)。
方法是对要寻找的对象进行条件测试,如下所示:

if (document.getElementById) {

如果对象存在,if语句就为true,脚本继续执行。但是,如果浏览器不理解这个对象,测试就返回false,并执行条件语句的else部分。

已过时的探测方式
对于检查浏览器支持哪些对象,另一种替代方法是进行浏览器探测(browser detection),这种方法尝试查明用户使用哪种浏览器查看页面。它向浏览器请求用户代理字符串,这个字符串会报告浏览器名称和版本。然后就可以让脚本以一种方式为某些浏览器服务,而对其他浏览器采用另一种方式。这是一种已经过时的脚本编程方法,因为它的效果不太好。

处理数组

数组(array)。数组是一种可以存储一组信息的变量。与变量一样,数组可以包含任何类型的数据:文本字符串、数字、其他JavaScript对象。

var newCars = new Array("Toyota", "Honda", "Nissan");

函数(function)

  • 包含0或多个参数
  • 是否有返回值(return)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容

  • 笔者2005年参加河北省高考,分数620分,在全省40多万考生中排名第1000名左右。 我的高考志愿是这样填报的:...
    袁泽华阅读 470评论 3 4
  • 文/熠歆 有时候,绘画,可以让自己聚心聚神,这种感觉很好,围着火炉,打着台灯,全神贯注于一幅画! 其实,只要认真的...
    熠歆阅读 414评论 2 6
  • 在东方文化下个人存在的身份,更多是作为社会和外部的期望施加到一个人身上,很少有基于个人自由意志的选择的结果...
    领啊啥意思阅读 292评论 0 0
  • 我想,一个人静静 不去看风景,不扰乱感情 沉寂,又轻盈 徜徉在意念的仙境 不去考量世界的动听 只是一个人 倾听这静...
    星月恋留阅读 144评论 0 0
  • “忘掉现实的残酷 活在自我的世界中。只有游戏中,才能找到那久违的忘我境界”他们觉得自己玩游戏的境界很高,证明...
    佚茗wangmx阅读 1,383评论 0 8