Использование js для создания «частей страницы» для веб-сайта - PullRequest
0 голосов
/ 23 апреля 2020

Итак, я учусь JavaScript и хотел взять то, что я изучаю, и создать личный веб-сайт для тестирования. Мне нравится использовать темы, потому что это меня интересует, я основывал свой веб-сайт на терминальных компьютерах из вселенной Fallout (видеоигры).

Короче говоря: я хотел бы знать, как «вызвать» Файл js на страницу html. Я хочу показать код js на странице html. Меня не очень беспокоит, правильный ли мой код js, насколько файлы js. Я все еще тренируюсь в этом. Я просто очень не понимаю, как отобразить мой код html, который я написал в документе javascript, с целью отображения на каждой странице html, которую я пишу. Я надеюсь, что это имеет смысл, лол. Мне нравится организация и поход в одно место, чтобы что-то изменить в случае необходимости. В моей голове это было бы возможно сделать с html + javascript.

Вот как я бы хотел, чтобы это работало (по крайней мере, в моей голове):

ФАЙЛЫ

RobCo (файлы root путь):

index. html

о нас. html

стили. css

Путь к файлу pageParts (Robco / pageParts):

SiteHeading. js

SiteFooter. js

Я хотел бы go в индекс. html и получить код / ​​информацию для отображения из SiteHeading. js для отображения.

В настоящее время я изучаю js, особенно об использовании тегов html и о том, что не так, мне не нужна информация об этом.

Я хотел бы знать, как "вызвать" файл js на странице html.

Я думал, что что-то подобное будет работать, но это не так, <script>document.write(robcoSiteHeading.js)</script>

В целях тестирования я переместил robcoSiteHeading в папку RobCo, чтобы все файлы были в одной папке. Просто чтобы убедиться, что код правильный, а не проблема с путями к файлам. Все еще нет радости.

Вот несколько примеров моего кода:

index. html

<!DOCTYPE html>
<!-- RobCo Home Page when the site is loaded initially -->
<html>
<head>
<title>RobCo Terminal Home</title>
<link rel="stylesheet" href="styles.css">

</head>
<body>

  <!-- Terminal Header; used as the terminal's Header or first text. [InsertPageHeadingHere]-->
  <script>document.write(robcoSiteHeading.js)</script>



<!-- Main Text -->
  <p>STATUS: Unit(s) Active
  <br/>
  CONNECTED: 1 Unit(s) Connected to this terminal.
  <br/><br/>
  Please choose an option:
  <br/>

  <!-- Clickable Options -->
  <p>
  <a href="login.html">[Login]</a>
  <br/>
  <a href="DefenseProtocol.html">[Engage Defense Protocal]</a>
  <br/>
  <a href="SelfDestruct.html">[Initiate Self Destruct]</a>
  <br/>
  <a href="aboutUs.html">[About Us]</a>
  </p>

</body>

robcoSiteHeading. js раздел тестирования, если это сработает, я могу выяснить остальную часть кода js во время обучения.

// Terminal Header; used as the terminal's Header or first text on nearly every page.

let siteHeading;
let testing;

// //siteHeading = `
//   <p>
//   ==================================================
//   </p>
//   <p>Welcome to ROBCO Industries (TM) Termlink</p>
//   <p>USAF Terminal Controler v0.01 </p>
//   <p>
//   ==================================================
//   </p>
//   <p>
//   This interface should be used by RobCo-licensed technicians only. The client
//    must only be operated by official personal of USAF or by pre-approved clients.
//   <br/><br/>
//   </p>
// `;

testing = '
  <p> ================================================== </p>

  <p> USAF Terminal Controler v0.01 </p>
';

Ответы [ 2 ]

0 голосов
/ 23 апреля 2020

Если я прав, я думаю, что вы хотите встроить HTML, который вы написали в файле JavaScript, на свою страницу HTML.

Если это так, вы можете сделать это :

Включите ваши js файлы

<script src="your-js-file-name.js"></script>

Создайте контейнер, который получает содержимое JavaScript на вашей HTML странице

<div id="js-content"></div>

В вашем JavaScript файле:

const container = document. querySelector("#js-content"); container.innerHTML = testing //the content you want to embed.

Я надеюсь, что это то, что вы хотите ..

0 голосов
/ 23 апреля 2020

Вам необходимо связать файл javascript со страницей html. Метод записи не знает, что такое robcoSiteHeading.js.

<script src="robcoSiteHeading.js"></script>

Поместите его перед закрывающим тегом </body>. Теперь в вашем файле robcoSiteHeading.js вы можете создать функцию, которая записывает html на страницу. Теперь вы можете в своем теге body использовать событие onload, например,

После загрузки страницы она запустит функцию внутри вашего файла javascript.

<!DOCTYPE html>
<html>
<body onload="myFunction()">
        
    <script>
        function myFunction() {
           document.write("<h1>Hello World!</h1><p>Have a nice day!</p>")
        }
    </script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...