js-817js位置和揄出方式书写位置输出方法注释js语法规范和变量变量几种错误定义变量的方式补充外部js文件的引入为什么不是link标签? 而href和src区别HTML页面加载和解析流程

本文链接：https://blog.csdn.net/qq_44849572/article/details/126406339

title: “Js 817”
date: 2022-08-17T19:02:43+08:00

文章目录

- title: "Js 817" date: 2022-08-17T19:02:43+08:00
认识js
js书写位置和输出方式
- 书写位置
- 三种输出方法：
注释
js语法规范和变量
- 变量
几种错误定义变量的方式
补充

认识js

网页的组成

html–超文本标记语言–搭建网页结构
css–层叠样式表–美化网页
js–javascript–实现网页数据动态化/表单验证/用户和网页交互~

js发展史这里就不在赘述。

js:可以跨平台(操作系统)的脚本语言(可以嵌入到网页/程序中运行)

js的三大组成部分：

ECMAScript js基础语法
DOM(Document Object Model) 文档对象模型(利用js去操作htmls)
BOM(Browser Object Model) 浏览器对象模型(利用js去操作和浏览器相关的(滚动条/前进/后退))

js书写位置和输出方式

书写位置

行内js: 目前只能够结合事件使用

<!-- 点击div 浏览器弹框显示 谈一个 宝贝 -->
<div class="box" onclick="alert('谈一个 宝贝')">嘿嘿</div>

内部js:一般放在body里面，所有结构的最后(具体原因可见本篇文章尾部补充部分)
```
<script> 这里写js代码 </script>
```

外部js: 标签之间不能写代码

// 带./和不带意思相同，都代表从当前文件出发去寻找需要引入的资源(文件)
// 注意，这里的引用外部资源用的是src属性
<script src=""></script>

三种输出方法：

浏览器输出弹框

alert("我是浏览器弹框输出的！");

网页上的输出

document.write("我是直接输出在网页上的！");

控制台输出(最常用)

console.log("我是输出在控制台中的");

注释

单行注释：ctrl + /

多行注释：ctrl + /或者alt + shift + a

js语法规范和变量

js语法规则(规则就是必须遵守)：

代码会从上往下逐行执行,如果某行报错的话，后面的代码都不会执行(因此一般把JavaScript代码写在body的最后面)
代码严格区分大小写
所有的标点符号必须都是英文

规范：

一句js代码结束之后，需要用;可以不带，浏览器解析的时候会自动带,但是建议写上

变量

变量: 可以改变的量
功能: 用来存储数据
使用: 创建/定义/声明变量
语法：var 变量名 = 值;
- var 创建/定义/声明
- 变量名: 容器的名字
- =: 赋值符号
- 值: 存储的数据
变量命名规则
1. 不能以数字开头
2. 由数值、字母、下划线、$组成
3. 变量名严格区分大小写
4. 变量名不可以是关键字、保留字 class/idar
变量命名规范(可以不遵守，但建议遵守)
- 见名知义
- 多个单词之间可以用_连接
- 驼峰命名(分为大驼峰和小驼峰) iPhone headerTopLeft

几种错误定义变量的方式

//第一种，建议
var a = "嘻嘻";
//第二种，建议
var b;b = "赋值";
//第三种，可以，但不建议
c = "先赋值";
var c;
// 4、直接赋值  不建议
d = "直接赋值";
console.log(d); //直接赋值
// 5、只定义不赋值   可以
var e;
console.log(e);//undefined
//6、不定义也不赋值    错误
// console.log(f);//会报错
//7、同时定义多个变量的同时赋值   可以
var f = "fff",g = "ggg";
console.log(f,g);//同时输出多个值时用逗号隔开
//8、同时定义多个变量的同时利用连等赋值    可以
var h = i = "h&i";
console.log(h,i);//h&i h&i
//9、变量给变量赋值     可以，建议
var j = "jjj";
var k = j;
console.log(j,k);//jjj jjj

补充

一、经典例题1

<!-- 交换两个数的值 -->
<!-- 方法一：利用第三个变量储存变量进行交换 -->

<!-- 方法二如下： -->
<script>
    var a = 123, b = 456;
    a = a + b;  //先计算两个数的总和并存储在其中一个变量中
    //然后进行交换计算：
    b = a - b;  //b = 123
    a = a - b;  //a = 456
</script>

二、外部js文件的引入为什么不是link标签？

我们都知道，内联的JavaScript是在页面的 <script> ... </script> 标签内添加，内联的样式是在 <style> ... </style> 标签内添加；而外部共享的JavaScript文件，则是通过 <script src="..."></script> 来引入，共享的样式文件不是通过 <style src=""></style> 的形式引入，而是通过 <link rel="stylesheet" href="..."> 形式引入，这是为什么呢？

w3c最初的设计中 <script> 标签也没有src属性，使用 <link rel="..." href="..."> 来引入当前文档外部的资源，如：父文档，翻译，或者层叠样式表等。 <link rel="" href="" meidia=""> 元素规定了当前文档和外部资源之间的关系，它常用来引入外部的样式表，我们可以通过rel属性值设置为stylesheet来使用，但rel的属性值并没有与JavaScript引入相关的属性值。后来为 <script> 标签添加了src属性。

而href和src的区别在于：

href是引用和页面关联，是在当前元素和引用资源之间建立联系，src表示引用资源，嵌入到文档中当前标签所在的位置表示替换当前标签，用在img，script，iframe上，src是页面内容不可缺少的一部分。

<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌入当前标签内，这也是为什么要把js饭再底部而不是头部。

<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

HTML页面加载和解析流程

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。
2. 浏览器开始载入html代码，发现 `<head>` 标签内有一个 `<link>` 标签引用外部CSS文件。
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。
4. 浏览器继续载入html中 `<body>` 部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。
5. 浏览器在代码中发现一个 `<img>` 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。
7. 浏览器发现了一个包含一行Javascript代码的 `<script>` 标签，赶快运行它。
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个`<style>`（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码。
9. 终于等到了 `</html>` 的到来，浏览器泪流满面……
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径。
11. 浏览器召集了在座的各位 `<div><span><ul><li>` 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

因此，这两个标签既可以写到head也可以写到body当中，因为他们都是不在浏览器当中显示的.

一般情况下,习惯性 <link> 标签写在 <head> 里面， <script> 标签写在body标签的尾部.