CH01_初识JavaScript

最新推荐文章于 2024-07-19 12:58:53 发布

功夫熊猫大侠

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量1k

点赞数 34

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_37631902/article/details/140121359

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

第1章：初识JavaScript编程语言

本章目标

了解为什么要学习JavaScipt编程语言
掌握JS的基本结构
掌握JS的执行原理
掌握JS的基本语法结构
掌握JS的几种输出方式
掌握JS的注释

课程回顾

什么是HTML？
HTML的标签分为块级元素和行级元素，他们的区别是什么？
HTML的表单元素有那些？
HTML的列表有那些？
CSS的作用有那些？
CSS盒子模型由几部分组成？

讲解内容

1. JavaScript的基本概念

为什么要学习JavaScript?、
1. 所有现代HTML网页中都要用到JavaScript
2. JavaScript是web前端开发必须具备的编程语言技术
3. JavaScript是web三大语言之一
  1. HTML：定义网页的内容
  2. CSS：实现网页的样式和实现布局
  3. JavaScript：控制网页的行为
4. JavaScript是所有前端开发框架的基础
JavaScript概念

概念：JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript特点：
1. JavaScript 是一种轻量级的编程语言。
2. JavaScript 是可插入 HTML 页面的编程代码。
3. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
4. JavaScript 严格区分大小写。
5. JavaScript 很容易学习。

JavaScript能做什么？（由老师演示，引起学生的兴趣）

直接写入 HTML 标签效果

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

JavaScript：对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

JavaScript：改变 HTML 内容

x=document.getElementById("demo");  //查找元素,Demo是网页标签的id
x.innerHTML="Hello JavaScript";    //改变内容

JavaScript：改变 HTML 图像

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/img/JavaScript/pic_bulboff.gif";
    }
    else
    {
        element.src="/img/JavaScript/pic_bulbon.gif";
    }
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/img/JavaScript/pic_bulboff.gif" width="100" height="180">

当点击灯泡看效果，效果如下：

改变前：
改变后：

JavaScript：改变 HTML 样式

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

JavaScript：验证输入

if isNaN(x) {
    alert("不是数字");
}

JavaScript用什么工具开发呢？

开发JS可以用很多工具，常用的工具如下：
1. 记事本，原始，无提示功能，不建议使用
2. WebStorm：是一款强大的JavaScript IDE。它支持多种框架和CSS语言，包括前端，后端，移动端以及桌面应用。WebStorm可以无缝整合第三方工具，例如构建构建、语法检查构建linter等等。它提供了代码补全，实时错误监测，导航，内置控制台，各种插件等一系统功能。
3. **Visual Studio Code：**简称：vscode，是微软开发的IDE，支持TypeScript。它提供了代码补全，语法高亮，支持Git命令等等。另外，它还有非常多的插件。
  
  vscode是目前公司最常用的工具，则本门课程我们使用的工具“vscode”

2. JavaScript的组成

JavaScript由三大部分组成：
1. ECMAScript：
  概念：是JavaScript的语法标准，简称：ES，现在版本为ES6.0
  
  语法标准：
  1. 语法
  2. 变量和数据类型
  3. 运算符
  4. 逻辑控制语句
  5. 关键字、保留字
  6. 对象
```
小知识：
	ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
```
2. DOM：
  
  概念：**通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。**简称：“文档对象”
3. BOM：
  
  概念：浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

3. JavaScript用法

语法：
```
<script type="text/javascript">
    
</script >
简写：
<script>
    javascript语句
</script>
```
注意事项：
1. HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
2. 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
3. 如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
4. <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
5. <script type="text/javascript">，那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的<body>或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
JavaScript的执行原理：

第一个JavaScript程序：

<html>
    <head>
		<title>输出Hello world</title>
		<script  type="text/javascript">  //type可以省略
			document.write("使用JavaScript脚本循环输出helloworld");
		</script>
	</head>
<body>页面主体内容</body>
</html>

JavaScript的使用方式

HTML页面内嵌JS代码
外部JS代码
```
<script src="hello.js" language="javascript"></script>
```
hello.js是js文件，没有HTML代码，属于外部JS

简短缩写方式

<input name="btn" type="button" value="弹出消息框"  onclick="javascript:alert('欢迎你');"/>

在这里插入图片描述

javascript核心语法：

在这里插入图片描述

4. JavaScript输出

JavaScript 没有任何打印或者输出的函数，但是可以通过不同的方式来输出数据。

使用 window.alert() 弹出警告框。

<script>
        alert("大家好，我是alert提示~");
</script>

在这里插入图片描述

使用 document.write() 方法将内容写到 HTML 文档中，以上代码中有演示。
使用 innerHTML 写入到 HTML 元素，后续讲。

使用 console.log() 写入到浏览器的控制台。

<script>
       console.log("控制台输出方式，hello log...");
</script>

在这里插入图片描述

5. JavaScript中的注释

什么是注释？

添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

浏览器不会去解析运行

JS中的注释

单行注释，以//开头，只能注释单行，//后面的会被注释

    <script>
        //演示控制台输出效果
       console.log("控制台输出方式，hello log...");
       document.write("hello"); //文档输出方式
    </script>

多行注释，多行注释以/*开始，以 */ 结尾。

    <script>
       /*
            以下代码
            可以在控制台输出
            也可以在文档输出
       */
       console.log("控制台输出方式，hello log...");
       document.write("hello"); 
    </script>