首页 > 编程语言 >CH01_初识JavaScript

CH01_初识JavaScript

时间：2024-07-02 11:28:00浏览次数：30  
标签：输出 JavaScript CH01 初识 JS HTML document 页面

第1章：初识JavaScript编程语言

本章目标

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

课程回顾

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

讲解内容

1. JavaScript的基本概念

  1. 为什么要学习JavaScript?、

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

  2. JavaScript概念

    概念：JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

  3. JavaScript特点：

    1. JavaScript 是一种轻量级的编程语言。
    2. JavaScript 是可插入 HTML 页面的编程代码。
    3. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
    4. JavaScript 严格区分大小写。
    5. JavaScript 很容易学习。

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

    1. 直接写入 HTML 标签效果

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

    2. JavaScript：对事件的反应

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

    3. JavaScript：改变 HTML 内容

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

    4. 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">

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

      1. 改变前：

        在这里插入图片描述

      2. 改变后：

        在这里插入图片描述

    5. JavaScript：改变 HTML 样式

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

    6. JavaScript：验证输入

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

  5. JavaScript用什么工具开发呢？

    开发JS可以用很多工具，常用的工具如下：

    1. 记事本，原始，无提示功能，不建议使用

    2. WebStorm：是一款强大的JavaScript IDE。它支持多种框架和CSS语言，包括前端，后端，移动端以及桌面应用。WebStorm可以无缝整合第三方工具，例如构建构建、语法检查构建linter等等。它提供了代码补全，实时错误监测，导航，内置控制台，各种插件等一系统功能。

      在这里插入图片描述

    3. **Visual Studio Code：**简称：vscode，是微软开发的IDE，支持TypeScript。它提供了代码补全，语法高亮，支持Git命令等等。另外，它还有非常多的插件。

      vscode是目前公司最常用的工具，则本门课程我们使用的工具“vscode”

      在这里插入图片描述

2. JavaScript的组成

  1. 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用法

  1. 语法：

    <script type="text/javascript">
    <!--
          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> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

  2. JavaScript的执行原理：

    在这里插入图片描述

  3. 第一个JavaScript程序：

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

  4. JavaScript的使用方式

    1. HTML页面内嵌JS代码

    2. 外部JS代码

      <script src="hello.js" language="javascript"></script>

      hello.js是js文件，没有HTML代码，属于外部JS

      在这里插入图片描述

    3. 简短缩写方式

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

      在这里插入图片描述

    4. javascript核心语法：

    在这里插入图片描述

4. JavaScript输出

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

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

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

    在这里插入图片描述

  2. 使用 document.write() 方法将内容写到 HTML 文档中，以上代码中有演示。

  3. 使用 innerHTML 写入到 HTML 元素，后续讲。

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

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

    在这里插入图片描述

5. JavaScript中的注释

  1. 什么是注释？

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

    浏览器不会去解析运行

  2. JS中的注释

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

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

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

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

6. VSCode的使用教程

  1. 下载安装VSCode工具：官网地址下载：https://code.visualstudio.com/

    在这里插入图片描述

  2. 直接安装VSCode工具，安装成功后在桌面有快捷方式

    在这里插入图片描述

  3. 在电脑上创建项目目录（文件夹），存放页面

    在这里插入图片描述

  4. 双击桌面VSCode快捷方式，打开程序

  5. 打开项目目录

    在这里插入图片描述

  6. 项目创建OK

    在这里插入图片描述

  7. 添加页面或目录，创建成功

    在这里插入图片描述

课后作业

  1. 安装VSCode，且成功创建项目
  2. 用文档方式输出你的姓名，年龄，爱好，家庭地址等信息
  3. 用提示框alert方式输出以下信息
  4. 练习注释代码，看看效果

标签：输出,JavaScript,CH01,初识,JS,HTML,document,页面
From： https://blog.csdn.net/m0_37631902/article/details/140121359

相关文章

  • 【JavaScript脚本宇宙】从发票生成到网页保存：JavaScript PDF库指南
    探索顶级JavaScriptPDF库：高效处理PDF文档的利器前言随着数字化信息的普及和无纸化办公理念的深入，PDF文档因其高度兼容性和稳定性成为了存储、分享和展示信息的首选格式。为了满足不同用户对PDF文档生成和处理的需求，各类功能强大的JavaScript库应运而生。这篇文章将详细介......
  • JavaScript 进阶之旅：Symbol 引领标识符新纪元
    个人主页：学习前端的小z个人专栏：JavaScript精粹本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！文章目录......
  • [Javascript] garbage collection
    Anytimewhenyouhavenon-primitivetype,it'sgoingtoberemovedfrommemoryanytimeifitisnolongerneeded.classTest{constructor(name){this.name=name}}constgloablTest=newTest("globalTest")constglobalString=......
  • JavaScript 编程语言【 数据类型】过滤|排序|映射|迭代
    文章目录将border-left-width转换成borderLeftWidth过滤范围原位（inplace）过滤范围降序排列复制和排序数组创建一个可扩展的calculator映射到names映射到对象按年龄对用户排序随机排列数组获取平均年龄数组去重从数组创建键（值）对象Iterableobject（可迭代对象）Symbol.......
  • 15.初识操作符 下
    单目操作符介绍~：按（二进制）位取反有关带符号整数的二进制的三种表示：原码，反码，补码int32个bit表示-1原码10000000000000000000000000000001（最左边是符号位，0正1负，剩余是数值位，数值为表示真值-1的绝对值） 反码:负数：在原码基础上数值位0改1,1改0（即按位取反），符号位不变正数：原......
  • 2024.7.1 初识Linux
    1、Linux安装：（1）VmwareWorkstation安装（2）Centos7系统安装（3）使用Mobaxterm远程操控Linux虚拟机2、Linux命令（1）ipaddress查看本机的ip地址（2）cal查看日历用法：cal[选项][[[日]月]年]选项：-1,--one只显示当前月份(默认)-3,--three显示上个月、当月和下......
  • [JavaScript]“复杂”的 this
    【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）https://www.cnblogs.com/cnb-yuchen/p/18277656出自【进步*于辰的博客】参考笔记二，P6.1；笔记三，P72、P73.1。先言我很早就知晓JS的这个知识点——this的重要性，并特意系统学习、理解并有所笔记，但限于平日用得少，对......
  • 初识Docker容器
    前言:Docker容器技术是一个强大而灵活的工具，用于构建、发布和运行分布式应用程序。以下是从入门到精通Docker容器的详细指南： 一、Docker容器基础Docker概述Docker是一个开源的应用容器引擎，它基于Go语言开发并遵循Apache2.0协议。Docker允许开发者将应用程序及其依赖打包到一个......
  • 初识Kubernetes
    前言：Kubernetes（通常简称为K8s）是一个开源的容器编排系统，用于自动化部署、扩展和管理容器化应用程序。以下是从入门到精通Kubernetes的详细指南：一、Kubernetes基础概述Kubernetes由Google开源，旨在自动化容器的部署、扩展和管理。它提供了一个平台，用于运行分布式系统，具有出色......
  • 【JavaScript脚本宇宙】打造完美用户体验：必备JS图形库指南
    探索顶尖JavaScript图形库：从jsPlumb到mxGraph前言在现代的Web开发中，交互式图形和数据可视化库成为了不可或缺的工具。这些库不仅提供了丰富的功能，还大大简化了开发人员的工作流程。本文将介绍和比较六个流行的JavaScript图形和数据可视化库：jsPlumb、GoJS、draw2d、Cytosca......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99