首页 > 其他分享 >vsode (Visual Studio Code) JS -- HTML 教程

vsode (Visual Studio Code) JS -- HTML 教程

时间:2024-06-07 19:33:27浏览次数:22  
标签:Code -- 代码 JavaScript JS HTML let Hello

vsode (Visual Studio Code) JS – HTML 教程

  • JavaScript 是什么

-JavaScript 是一种基于对象和事件驱动的脚本语言,广泛用于在网页上实现动态交互效果JavaScript 可以嵌入到 HTML 页面中,通过在脚本标签中编写 JavaScript 代码来实现各种功能。它主要用于处理用户交互、操作网页元素、验证表单数据、发送网络请求等。

参考资料~


年轻人的第一个程序 “Hello World!”

-javaScript 比 HTML 和 CSS 学习起来更加复杂一点,所以必须一步一个脚印地学习。首先,来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个“Hello world!”示例一切始于 Hello World

-打开你的测试站点,创建一个名为 scripts 的文件
下一步,在 index.html 文件< /body > 标签前的新行添加以下代码

<script src="scripts/main.js" defer></script>

CSS< link > 元素类似,它将 JavaScript 引入页面以作用于 HTML
现在将以下代码添加js 文件中

let myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

最后,保存 HTML 和 JavaScript 文件,用浏览器打开 index.html。可以看到如下内容

在这里插入图片描述

  • 备注
    我们将 < script > 放在 HTML 文件的底部附近的原因是浏 览器 会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。因此,将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略,不过还是建议在HTML内部写JS代码,有时候外部会出现问题

-比如我写在HTML

在这里插入图片描述

——————————————————————————————————————————————

HTML 网页发生了什么?

  • JavaScript 把页面的标题改成了“Hello world!”
工作原理:
  • querySelector(). 函数获取标题的引用
  • myHeadin querySelector().储存在 myHeading 变量中
  • 之后,把 myHeading 变量的属性 textContent (标题内容)修改为“Hello world!”

-这与 CSS 选择器的用法非常相像:若要对某个元素进行操作,首先得选择它

-我们来学习一些 JavaScript 的核心特性,从而更好地理解它的运行机制。学习这些知识很有意义,因为这些原理普遍适用于所有编程语言,掌握好它们,可以做到融会贯通

学习本节时,请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么


变量 — Variable

-变量存储值的容器。要声明一个变量,先输入关键字 letvar,然后输入变量名

let my_var;

-变量定义后赋值

my_var = "CSDN -熟 禁止

标签:Code,--,代码,JavaScript,JS,HTML,let,Hello
From: https://blog.csdn.net/liye100866/article/details/139030128

相关文章

  • 字符数组与字符串
    一、字符数组字符数组初始化类型数组名[长度]={元素1,元素2...};类型数组名[长度]="abcde";chara[5]={'a','b','c','d','e'};charb[5]="abcde";//错误:结尾还需要存放\0for(inti=0;i<5;i++)cout<<a[i];cout<<......
  • 深入理解序列化:概念、应用与技术
    在计算机科学中,序列化(Serialization)是指将数据结构或对象状态转换为可存储或传输的格式的过程。这个过程允许将数据保存到文件、内存缓冲区,或通过网络传输至其他计算机环境,不受原始程序语言的限制。相对地,反序列化(Deserialization)则是将这种格式变回原来的数据结构或对象的......
  • 盘点学习Python常犯一些错误,你中了几个
    对于刚入门的Pythonista在学习过程中运行代码是或多或少会遇到一些错误,刚开始可能看起来比较费劲。随着代码量的积累,熟能生巧当遇到一些运行时错误时能够很快的定位问题原题。下面整理了一些常见的17个错误,等你写出的代码不怎么出现这些错误的时候,你的Python功力就上......
  • 新笔记 python 面试
    1.python的数据类型(可变和不可变)1).可变数据类型:列表list字典dict集合set2).不可变类型:整型int字符串str浮点型float元组tuple数值类型如:复数complex布尔类型bool2.python的去重排序1).去重set:numbers=[1,2,2,3,4,4,5]uniq......
  • 计算机语言python发展历史进程
    Python语言之父,荷兰人GuidovanRossum。他于1982年从阿姆斯特丹大学取得了数学和计算机硕士学位。20世纪80年代中期,Python之父GuidovanRossum还在CWI(数学和理论计算机科学领域的研究中心,位于阿姆斯特丹)为ABC语言贡献代码。ABC语言是一个为编程初学者打造的研究项目。A......
  • 如何自学Python?一文讲清楚
    作为996社畜,应该如何自学python?今天就给大家分享一下,工作之余,应该如何学习Python?明确目标对于零基础的学员而言,要明确你学习Python仅仅是为了满足好奇心?还是有工作需要,比如办公自动化的需要,转行的需要。不同的目标,所选用的学习内容和相应的学习方法也就会有所不同。比如,......
  • Ctranslate2 调用翻译模型 M2M100
    点击下载完整代码:完整代码importctranslate2importsentencepieceasspmimportosdeftokenize(sp,queries):ifisinstance(queries,list):returnsp.encode(queries,out_type=str)else:return[sp.encode(queries,out_type=str)]def......
  • 「动态规划」如何求地下城游戏中,最低初始健康点数是多少?
    174.地下城游戏https://leetcode.cn/problems/dungeon-game/description/恶魔们抓住了公主并将她关在了地下城dungeon的右下角。地下城是由mxn个房间组成的二维网格。我们英勇的骑士最初被安置在左上角的房间里,他必须穿过地下城并通过对抗恶魔来拯救公主。骑士的初始健康点......
  • 门面模式Api网关(SpringCloudGateway)
    1.前言        当前通过Eureka、Nacos解决了服务注册和服务发现问题,使用SpringCloudLoadBalance解决了负载均衡的需求,同时借助OpenFeign实现了远程调用。然而,现有的微服务接口都直接对外暴露,容易被外部访问。为保障对外服务的安全性,通常在服务端实现的微服务接口会......
  • 计算机视觉顶会和顶级期刊
    一、计算机视觉顶会(1)ICCV:InternationalConferenceonComputerVisionInternationalComferenceonComputerVision,国际计算机视觉会议,是公认的三个会议中级别最高的,收录率一般在20%左右,由IEEE主办。【收录论文的内容:底层视觉与感知,颜色、光照与纹理处理,分割与聚合,运动与跟......