Head First JavaScript 的知识小点--Chapter One

JavaScript 的代码与CSS一样,可以内联放置与外联放置。

<strong>内联放置</strong>
可以放在<head>或者<body>里面,在浏览器中都可以执行出来。不过,当浏览器运行一个页面时,他会在<body>执行之前先执行页面的<head>里面的所有一切代码。所以,如果JavaScript的代码放置在<head>块里,用户在浏览你的页面时可能需要等上一会儿(先执行<head>的代码,再执行<body>来加载页面内容)才能看到完整的页面内容。
当然,按照此说法。若仅仅JavaScript代码放在<body>中,比如就放在<body>中的开始位置,那是无济于事的。
所以,JavaScript中的代码或许可以放置在<body>块的底部。(至少先让可见的内容先出现在用户的视线当中呀)

<code><!doctype html>
<html lang = "en">
head>
<meta charset='utf-8'>
<title>My First JavaScript</title>
<script>
statement;
</script>
</head>
<body>
<script>
statement;
</script>
</body>
</html></code>

除此之外,还有其它的方式来放置JavaScript的代码[请继续往下看]

<strong>外联放置</strong>
我们的JavaScript代码可以写成一个以".js"为后缀名的独立文件。于是,就可以通过<head>里面<script>标签的地址属性指向你的JS文件。
<code>
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>...</title>
<script src = "myCode.js"></script>
</head>
<body>
</body>
</html>
</code>

这种外联的方法可以很好地维护我们的页面,并且能够在多个html文件中使用。但是,它仍然有一点不足。如同上面提到,浏览器在执行<body>前都会先执行<head>里面的所有代码。所以,仍存在不足。

接下来介绍一种方法可以避免发生上面这种问题的尴尬。

类似地,避免这个问题出现的方法也是将<script>标签放在页面<body>的底部。

But, 但是...

课本Head First JavaScript在最后写道:
Despite evidenceto the contrary, I still think the <head> is a great place for code.
我当场就哭了。。。


如何链接到外部的JavaScript文件?

首先,我们来确认一下我们会用到哪些类型的文件与工具。
 分别有:

  • 网页文件 index.html
  • JavaScript文件 code.js
  • 常用浏览器[一般在浏览器运行时,按下F12就可以看到弹出来的一个框,初学的我也不懂那个是什么梗]

相信大家都见过以".js"作为后缀名的文件,这种类型的文件是JavaScript文件。
 在这里,我按照书本准备了一个"code.js"的文件。(小白,掌握得少)文件里面我只写了一句话:"console.log("Hello, China!")",完了我将这个文件放置在与html文件同目录中的js文件里面。
 接着,在HTML文件中的<script>标签显式地引用这个"code.js"。
 需要强调的是,<script>标签必须要成对地敲出来,否则里面的代码不会被执行。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First JavaScript</title>
    <script>
      console.log("HelloWorld!");  <!-- 在控制台中打印输出HelloWorld -->
      </script>
    </head>
  <body>
    <script src = "js\code.js"></script>    <!-- 与链接CSS文件,在地址属性中链接到js文件,to reference the 

JavaScript file -->
    </body>
</html>

用浏览器打开这个html文件,可以从控制台中看到这样的输出。


执行结果

结合代码与结果图,我的出的结论是:这浏览器果真还是先load页面<head>的代码,完了再来执行<body>的代码。

另一个主要结论:我们既可以在<head>标签中引用到JavaScript文件,同时也可以在<body>标签中的任何位置去引用JavaScript文件。


补全(JavaScript的组成元素):
它由成对地<script>标签组成,像“<script></script>”.
它通过内联或者外联来作用于HTML文件。
内联(inline)直接在html中的<script>语句内编写代码,
而外联(external),则需要再<script></script>的开标签里面的地址属性致命要链接的js文件(里面存放JavaScript的代码)。
但仅有 src="xxx.js"还不够完整, 类似CSS一样,我们通常用到type="text/CSS"来告诉浏览器自己的类型。只不过在这里,我们用到的是type="text/JavaScript"。如下所示:

<!doctype html>
<html lang="en">
<head>
   <meta charset='utf-8'>
   <title>..</title>

   <script type = "text/JavaScript" src = "xxx.js">
    </script>    <!-- 要注意,一旦引用了外部的JS文件,那么在script标签内之间内容,就不要写代码了,这样做是起不到任何作用的 -->

  </head>
<body>
  ...
  </body>
</html>

认识一下prompt —— 获得用户的键盘输入——应该还有其它类似地方法,只是我学到的还不够。



 接触了不久,知道了如何从浏览器中弹出一个对话框来提醒用户相关信息。(通过alert("abcdefg...")方法)。
 那是不是也有可以获得用户的输入的方法呢?答案肯定是有的。
 通过 prompt("..."); 也可以从浏览器中弹出对话框并获得用户的输入。

使用prompt方法来获取用户输入.png
使用prompt需要知道的几个小点:
var result;
result = prompt("请问您接触JavaScript多久了?");
  1. 使用prompt方法需要提供一个字符串作为参数,哪怕什么都不想写,也得要给个双引号进去。
  2. 当用户输入数据信息,点击确定按钮了之后。对话框中文本框里面的全部内容都将作为prompt方法返回值(该返回值类型为string类型)。
  3. 但是,当用户不想输入,点击“取消”按钮了,又或者直接点击“确定”按钮了,那么,该prompt方法的返回值为 null.
  4. JavaScript自己会进行类型转换(我知道这样讲还是不算准确的,但是我只是还是太浅薄了,描述不了真正的情况,只能就近说明)。往往我们可以通过用户输入的数据用来比较或者判断,就讲前一张图片拿来举个例子。
    这个对话框期望用户输入一个数字,然后在后台可以进行判断这个数字是否超出范围。
    如果用户在对话框中的文本框输入的是7,那么这个“7”要怎么来分析?
    首先要确定一点,“7”作为prompt方法的string型返回值。好的,假如我们的程序要判断用户输入的内容“7”是否会超出 0 - 6 的范围,我们知道可以通过比较来判断。但是,prompt方法将用户的输入以string型作为了返回值,与之做比较的却是数值型的数字,怎么比较?凭借小白基础的我只能先这么认为JavaScript会自动进行类型转换,网络上也是这么说的。【坏笑】

八月份快要结束,这段时间我经历了欢笑,失落。处处充满十字路口,不做出选择真的不行。
九月加把劲...

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

推荐阅读更多精彩内容