JavaScript基本使用、JavaScript 输出

最新推荐文章于 2023-03-28 12:44:44 发布

半夜删你代码·

最新推荐文章于 2023-03-28 12:44:44 发布

阅读量775

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_60376759/article/details/124304002

版权

JavaScript是一种跨平台的脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

平台：一般指的是运行环境，这里指的是操作系统

跨平台：就是在很多种操作系统中都可以运行

脚本语言：特点是不能独立运行，需要依赖于网页。

浏览器也是html解析器浏览器打开的都是html的页面

javascript他必须写在html中和css一样

ps：JavaScript程序的运行离不开HTML，HTML的运行离不开浏览器。

JavaScript应用场景

表单验证
网页动态效果（轮播，漂浮的广告）
记住用户名字和密码
游戏开发-经典案例俄罗斯方块
只要你看到页面中有数据的变化或者动态的效果都是js来实现的

JavaScript 构成

ECMAScript 是 JavaScript 的标准，但它并不等同于 JavaScript，也不是唯一被标准化的规范。

实际上，一个完整的 JavaScript 实现由以下 3 个不同部分组成：

核心（ECMAScript）：语言核心部分--基础语法。
文档对象模型（Document Object Model，DOM）：网页文档操作标准--利用js基础来实现各种动态效果。
浏览器对象模型（BOM）：客户端和浏览器窗口操作基础--浏览器窗口的使用并不重要。

JavaScript基本使用

基本使用
变量
流程控制语句
数组
函数
对象

（1）在 HTML 中，JavaScript 代码必须位于<script>与 </script> 标签之间。

<script>
alert('这是我们的第一个js代码')；
</script>

注释：旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。

注释：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

（2）<body>或者<head>中的JavaScript

脚本可被放置与 HTML 页面的<body> 或 <head>部分中，或兼而有之。

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

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

body 和 head 部分可同时有脚本:文件中可以在body和head部分同时存在脚本

总结：js文件放到哪里更好？

浏览器对html页面内容的加载是顺序加载，也就是在html页面中前面先加载。当浏览器加载html文件并解析到<head>时,<body>并没有被解析,浏览器会等到<head>中的js部分执行完再加载页面。

如果把javascript放在head里的话，则先被解析,但这时候body还没有解析。（常规html结构都是head在前，body在后）如果head的js代码是需要传入一个参数（在body中调用该方法时，才会传入参数），并需调用该参数进行一系列的操作，那么这时候肯定就会报错，因为函数该参数未定undefined

从JavaScript对页面下载性能方向考虑：由于脚本会阻塞其他资源的下载（如图片等）和页面渲染，直到脚本全部下载并执行完成后，页面的渲染才会继续，因此推荐将所有的<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。

（3）引入外部脚本文件

JS程序不仅可以直接写在HTML文档中，也可以放在JavaScript文件中。后缀名是.js。使用任何文本编辑器都可以编辑。
JS文件不能够单独运行，需要使用 <script>标签导入到网页中。
定义src属性的<script>标签不应该再含有JavaScript代码，否则只会下载并执行外部JavaScript文件，嵌入代码被忽略。

1）创建一个js文件，名称为first.js
2) 引入js文件
<html>
<head>
<title></title>
</head>
<body>
<script src='first.js'></script>
</body>
</html>

注意：在外部文件中放置脚本有如下优势：

分离了 HTML 和js代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

（4）延迟执行JS-defer

<script>标签有一个布尔型属性defer，这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是说，脚本会被延迟到整个页面都解析完成后再运行。
因此在script元素中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行
如果页面中有多个延迟脚本，那么第一个延迟脚本会先于第二个延迟脚本执行
适用于外部JS文件，不适用于script标签包含的脚本

（5）异步加载JS文件-async

在默认情况下，网页都是同步加载外部 JavaScript文件的，在引入外部js文件时会阻塞dom的执行，为此在html4.01为script标签引入了async属性
现在可以为<script>标签设置 async属性，让浏览器异步加载 Javascript文件，即表示应该立即下载脚本，但不应妨碍页面汇总的其它操作。只对外部脚本文件有效。
因为是下载完立即执行，不能保证多个加载时的先后顺序，因此确保异步脚本之间互不依赖

（6）扩展：async&defer

1.没有设置任何属性的script

HTML文件将被解析，直到脚本文件被下载为止，同时将停止解析，发起请求去提取script文件（如果是外部文件）。下载并执行完成后将在恢复解析HTML。

2.设置了defer属性

设置defer属性会在HTML解析的同时下载script，并在完成HTML解析和script下载之后执行该文件，同时设置了defer的脚本会按照他们在文档里面出现的顺序执行。

3.设置了async属性

设置async属性会在HTML解析期间下载script文件，并在完成下载后暂停HTML解析器以执行该文件。

JavaScript 输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

1.alert：您能够使用警告框来显示数据：在alert()的里写单引号或者双引号都可以

<!DOCTYPE html>
<html>
  <body>
      <script>
        	//和alert是一样的，后续window对象时候讲解
      		window.alert('故事里的小黄花');
      </script>
  </body>
</html>

2.document.write

1) 可以向HTML输出流中插入你传入的内容，浏览器会按着HTML元素依次顺序依次解析它们，并显示出来。

<!DOCTYPE html>
<html>
  <body>
      <script>
      		document.write('从出生那年就飘着');
      </script>
  </body>
</html>

2) 需要注意的是，如果在文档加载完成后（即HTML输出已完成），再使用document.write()方法来要求浏览器来解析你的内容，则浏览器就会重写整个document，导致最后的这个document.write()方法输出的内容会覆盖之前所有的内容

<!DOCTYPE html>
<html>
	<body>
		<h6>淡黄的长裙</h6>
		<h6>蓬松的头发</h6>
		<button onclick="document.write('<h1>什么玩意儿</h1>')">试一试</button>
	</body>
</html>

3.innerHTML：id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

<!DOCTYPE html>
<html>
	<body>
		<p id="demo"></p>
		<script>
			document.getElementById("demo").innerHTML = '我们的开始，是漫长的电影';
		</script>
	</body>
</html>

4. console.log，在浏览器中，可使用 console.log() 方法来显示数据。

<!DOCTYPE html>
<html>
	<body>
		<p id="demo"></p>
		<script>
			console.log('苍茫的天涯是的爱');
		</script>
	</body>
</html>

半夜删你代码·

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基本使用、JavaScript 输出

JavaScript是一种跨平台的脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。平台：一般指的是运行环境，这里指的是操作系统跨平台：就是在很多种操作系统中都可以运行脚本语言：特点是不能独立运行，需要依赖于网页。浏览器也是html解析器浏览器打开的都是html的页面javascript他必须写在html中和css一样ps：JavaScript程序的运行离不开HTML，HTML的运行离不开浏览器。JavaScript应用场景表单验证
复制链接

扫一扫