铁人赛 Day23 -- JavaScript 初体验(一) -- Hellow World

前言

一直很想学 JavaScript 但我觉得很难的感觉一直迟迟不敢去碰它,事到如今还是来了,该面对的还是要面对XD

一、引用 JavaScript 档案

直接创一个副档名为js的档案後,将我们的 JavaScript 程序码写在副档名为js的档案中
(此篇先以名为 main.js 的档案为主)

接着在.html的档案中,复制贴上下列程序码,让我们的html可以抓取到我们的js档案

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

二、Hellow World 范例试做

--> 将 Test Title 透过 JavaScript 转变成 Hellow World
https://ithelp.ithome.com.tw/upload/images/20210922/20141189pRYtHDvGe7.jpg

.html的程序码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    <link href="styles/style.css" rel="stylesheet" type="text/css">

    <style>
      html{
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <h1>Test Title</h1>
    <script src="scripts/main.js"></script> 
 </body>
</html>

.js的程序码

var myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

最後就换变成
https://ithelp.ithome.com.tw/upload/images/20210922/20141189zx39s8AhGD.jpg

在 JavaScript 中,我们使用了 querySelector('h1') 来抓取我们的标题h1
接着将我们抓到的标题存在 myHeading 变数里,最後再将变数 myHeading 变更为 Hello world!

那今天先到这边,我们铁人赛Day24见罗!!


<<:  DAY8 Kotlin的第一步

>>:  关於报错这档事

CPE 一颗星解答 - Java 笔记与心得分享

以下是自己的 CPE 一颗星选集解题纪录,共有 49 题 重点笔记整理如下, https://gre...

Flutter学习Day3 Widget 观念 StatelessWidget (下)

大家安安,小弟弟要来接续上一篇的结尾 上一篇的进度是列出了宠物的清单 而现在我们想实现在点击清单的时...

19. STM32-CAN-BUS (下)

结构体介绍 CAN_FilterTypeDef typedef struct { uint32_t ...

Day 21 例外及堆叠的处理方式

大部分的处理器都有以下四种例外的类型,优先权由高至低排列: 1.非同步不可遮罩 2.同步精确 3.同...