Head First JavaScript 的知识小点--Cha

2016-08-31 本文已影响68人隐藏的记号

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多久了？");

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

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

Head First JavaScript 的知识小点--Cha

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

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

使用prompt需要知道的几个小点：

猜你喜欢

热点阅读