JS学习笔记

JS学习笔记
html网页文件的结构

一个完整的HTML文件包括头部文件 <head></head> 和主体文件 <body></body> 。
```
<!DOCTYPE html>
<html>
    <head>
    文件头部内容
    </head>

    <body>
    主体内容
    BODY之间则为主要语法所在，也是网页的主要呈现部分。
    </body>
</html> 
```
这是一个可视化的HTML页面结构：

只有 <body> 区域 (白色部分) 才会在浏览器中显示。

Html文档的基本结构：

<!DOCTYPE> 声明：有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：
```
<!DOCTYPE html> 

<!DOCTYPE HTML> 

<!doctype html> 

<!Doctype Html> 
```
通用声明：

HTML5
```
<!DOCTYPE html> 
```
HTML 4.01
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
```
XHTML 1.0
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
```
- 主要包括以下标签
  - <html> ：整个网页的根元素
  - <head> ：包含头部内容
    
    <title> ：是<head>标签中唯一要求包含的，设置显示在浏览器标签页上的文档的标题。
    
    <base> ：提供基本的URL(绝对地址)，来解析所有的相对地址，应该只出现在文档的头部。
    
    <meta> ：用来告诉告诉浏览器关于文档的附加信息，定义了与文档相关联的名称/值。如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  - <body> ：此标签界定了文档的主体。<body>和</body>之间有很多的属性来控制文档的颜色和背景等，不同的浏览器有其不同的扩展标签。
    
    div
    
    <h1> 元素定义一个大标题
    
    <p> 元素定义一个段落
一个比较详细的HTML教程。

JS是什么？

JavaScript web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
JS也是写在一个叫 <script></script> 的标签里面。

<Script> 标记对可放在HTML文档中的任何位置。

如果写的JS代码太多或者需要重复使用一个JS代码，就可以在JS文件夹里建一个JS文件，接着就在要使用这段代码的HTML文件里将这个JS文件引入：

导入JS脚本文件的语法如下：
```
<script type="text/javascript" src="js/xxx.js">
</script>
```
一个比较详细的JS教程

在html中嵌入js代码的几种方式

1.内嵌式

通过 <script> 标签内嵌js代码

JS代码可以以规定的格式嵌入到html页面的 <html> , <head> , <body> 不同的位置中，其中嵌入到 <head> 中时需要写一个入口函数，嵌入到另外两个位置则不需要。
- 嵌入到 <head> 中：
- 嵌套到 <html> 中，一般放在 </body> 后面：
- 放在 <body> 中：
代码示例：放在 <body> 中
```
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>测试</title>
</head>

<body>
    <button id="btn">进入Ylxxxxx的博客</button>
    
    <script>
    document.getElementById("btn").onclick = function() {
        // 点按钮后打开一个新的网页
        window.open("https://www.cnblogs.com/yangdd/");
    }
    </script>
</body>

</html>
```
运行效果如下：

2.外链式

外链式在工作中是使用最频繁的一种方式，代码量较多时可以直接从外部导入JavaScrip文件，这种方式可以提高代码的阅读性和可复用性。

有时候你可能想在几个页面中运行同样的脚本程序，而不需在各个页面中重复的写这些代码。这时你就要用到外部脚本（外链式）。可以把脚本写在一个外部文件中，保存在扩展名为 .js的文件中。

注意：外部脚本文件中不要包含标记符 <script> ，使用外部脚本时将标记符 <script> 的“src”属性值指向相应的.js文件就可以了。
```
<script type="text/javascript" src="路径+文件名"></script>
```
代码示例：

新建demo.js文件，文件内容如下：
```
function show(){
	alert('Hello,JavaScript!');
 }
```
新建demo.html文件：
```
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>测试</title>
</head>

<body>
    
    <a href="JavaScript:show();">点击我</a>
    <script src="js/demo.js"></script>
</body>

</html>
```
运行效果如下：

3.行间事件

这种方式主要用于事件的简单操作之中，比如点击，鼠标移入，鼠标移除等，适合于JS代码较少时使用。

JS代码放在head和body中的区别

在HTML body部分中的JavaScripts会在页面加载的时候被执行。

在HTML head部分中的JavaScripts会在被调用的时候才执行。

JSt应放在哪里？

页面中的JavaScripts会在浏览器加载页面的时候被立即执行，我们并不希望总是这样，有时候我们想让一段脚本在页面加载的时候执行，而有时候我们想在用户触发一个事件的时候执行脚本。

head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。

body 部分中的脚本: 当页面被加载时立即执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

body 和 head 部分可同时有脚本：可在文件中放无数的脚本，因此你的文件中可以在body和head部分同时存在脚本。
1. 将JavaScript标识放置 <Head>... </Head> 在头部之间，使之在主页和其余部分代码之前预先装载，从而可使代码的功能更强大；比如对*.js文件的提前调用。也就是说把代码放在 <head> 区在页面载入的时候，就同时载入了代码，你在 <body> 区调用时就不需要再载入代码了，速度就提高了，这种区别在小程序上是看不出的，当运行很大很复杂的程序时，就可以看出了。
2. 当然也可以将JavaScript标识放置在 <Body>... </Body> 主体之间以实现某些部分动态地创建文档。这里比如制作鼠标跟随事件，肯定只有当页面加载后再进行对鼠标坐标的计算。或者是filter滤镜与javascript的联合使用产生的图片淡入淡出效果
3. 放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取。
这就说明了，如果想定义一个全局对象，而这个对象是页面中的某个按钮时，我们必须将其放入body中，道理很明显：如果放入head，那当你定义的时候，那个按钮都没有被加载，可能获得的是一个undefind。
相关阅读:
如何修改 gitlab 的项目名称
 Vue 项目中 webSocket 的使用（服务端是 Java Spring boot）
如何能选到好的车牌号
 实现微信，浏览器，App中H5的路线规划
 H5 navigator.geolocation demo
npm package.json 中版本指定符号： ~ 、^、*
小程序中静态资源绝对路径的写法
 重置gvim8 ctrl+f的翻页功能
 [TS]Map的基本操作
 [TS]闭包测试
原文地址：https://www.cnblogs.com/yangdd/p/13405792.html

html网页文件的结构

JS是什么？

在html中嵌入js代码的几种方式

1.内嵌式

2.外链式

3.行间事件

JS代码放在head和body中的区别

JSt应放在哪里？