Како користити ЈаваСцрипт у ХТМЛ-у за креирање интерактивних веб страница

by
Tweet
Share
Share
Pin

ХТМЛ, ЦСС и ЈаваСцрипт су три главна језика која се користе у фронт-енд развоју. ХТМЛ је језик за означавање, док је ЦСС језик за стилизовање.

ЈаваСцрипт је објектно оријентисани програмски језик који се углавном користи у креирању клијентске стране веб и мобилних апликација. Овај динамички језик отвореног кода постао је један од најчешће коришћених програмских језика због своје флексибилности и лакоће разумевања.

Помоћу ХТМЛ5 и ЦСС3 можете креирати статичне веб странице. Међутим, да бисте додали интерактивност таквом сајту, морате користити програмски језик као што је ЈаваСцрипт који претраживачи разумеју.

Овај чланак ће објаснити зашто треба да користите ЈаваСцрипт са ХТМЛ-ом, различите приступе додавању ЈаваСцрипт кода у ХТМЛ и најбоље праксе за комбиновање два језика.

Зашто је кључно користити ЈаваСцрипт у ХТМЛ-у

  • Додајте интерактивност: Интерактивност одговара на корисничке уносе/акције у реалном времену без поновног учитавања претраживача. На пример, можете имати бројач који се повећава за један сваки пут када се кликне. Други пример може бити одговор који каже корисницима да су њихове повратне информације послате сваки пут када кликну на дугме за слање.
  • Провера ваљаности на страни клијента: Можете да користите ЈаваСцрипт да бисте забележили тачне податке на обрасцима. На пример, можете користити овај програмски језик да потврдите корисничке уносе на страници за регистрацију помоћу формата е-поште, дужине лозинке и комбинације знакова које треба користити.
  • Манипулација ДОМ-ом: ЈаваСцрипт нуди модел објекта документа (ДОМ), који олакшава динамичку промену садржаја веб странице. Са овом технологијом, садржај странице се аутоматски ажурира на основу корисничких уноса без поновног учитавања веб странице.
  • Компатибилност међу претраживачима: ЈаваСцрипт је компатибилан са свим модерним претраживачима. Веб странице креиране помоћу ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а ће стога савршено функционисати у различитим претраживачима.
  Како проверити употребу података на иПхоне-у

Предуслови

  • Основно разумевање ХТМЛ-а: Разумете основне ХТМЛ ознаке, можете да додајете дугмад и креирате обрасце користећи ХТМЛ.
  • Основно разумевање ЦСС-а: Разумете ЦСС концепте као што су ид, класа и селектори елемената.
  • Едитор кода: Можете користити уређивач кода као што је ВС Цоде или Атом. Такође можете да користите онлајн ЈаваСцрипт компајлер ако не желите да инсталирате софтвер на свој систем.

Како користити ЈаваСцрипт у ХТМЛ-у

Можете користити три главна приступа за додавање ЈаваСцрипт кода у ХТМЛ. Истражујемо сваки приступ и где најбоље одговара.

#1. Уграђивање кода између ознаке <сцрипт> и

Овај приступ вам омогућава да имате ЈаваСцрипт и ХТМЛ кодове у истој датотеци (ХТМЛ датотеци). Можемо почети тако што ћемо креирати фасциклу пројекта у којој ћемо показати како функционише. Можете користити ове команде да бисте започели;

mkdir javascript-html-playground

cd javascript-html-playground

Направите две датотеке; индек.хтмл и стиле.цсс

Додајте овај почетни код у ХТМЛ датотеку;

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>

Додајте овај почетни код у своју ЦСС датотеку;

.form-container {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh; 

  }

  label {

    display: block;

    margin-bottom: 5px;

    font-weight: bold;

  }

  input[type="text"],

  input[type="email"],

  textarea {

    display: block;

    margin-bottom: 10px;

    padding: 5px;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-size: 8px;

  }

  input[type="submit"] {

    background-color: #4CAF50;

    color: white;

    padding: 5px 10px;

    border: none;

    border-radius: 2.5px;

    font-size: 8px;

    cursor: pointer;

  }

  input[type="submit"]:hover {

    background-color: #3e8e41;

  }

Када се веб страница прикаже, имаћете нешто овако;

Сада можемо да додамо једноставан ЈаваСцрипт код који каже „послато“ када кликнете на дугме за слање. Рефакторисани ХТМЛ код са ЈаваСцрипт-ом ће бити;

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="submitted()" />

      </form>

    </div>

    <script>

      function submitted() {

        alert("submitted");

      }

    </script>

  </body>

</html>

Када кликнете на дугме за слање, добићете нешто слично овоме;

  Како инсталирати Убунту Цоре на Распберри Пи

Pros of embedding JavaScript code between <script> … </script> tags


  • Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file. 
    • 

  • Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug. 
    • 

Cons of embedding JavaScript code between <script> … </script> tags


  • Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
    • 

  • Slows performance: Big code blocks on the HTML document can slow loading speeds. 
    • 

#2. Inline Code by using JavaScript code directly inside HTML


Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css). 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="alert('inline submit')" />

      </form>

    </div>

  </body>

</html>


Када кликнете на пошаљи, појавиће се мали прозор на вашем претраживачу са речима „инлине субмит“. 


Предности додавања ЈаваСцрипт-а као уграђеног кода


    

  • Брза имплементација: Не морате да прелазите са једног документа на други да бисте написали ХТМЛ и ЈаваСцрипт код. 
    • 

  • Савршено за малу апликацију: Ако имате малу апликацију која не захтева много интерактивности, уграђени ЈаваСцрипт је савршен избор. 
    • 



Недостаци додавања ЈаваСцрипт-а као уграђеног кода


    

  • Код се не може поново користити: ако ваша апликација има неколико образаца, креираћете ЈаваСцрипт код за сваки образац.
    • 

  • Успорава перформансе: Велики блокови кода у ХТМЛ документу могу успорити брзину учитавања. 
    • 

  • Читљивост кода: Како база кода наставља да расте, читљивост кода се смањује. 
    • 



#3.  Креирање екстерне ЈаваСцрипт датотеке


Како ваша апликација расте, приметићете да додавање ЈаваСцрипт кода директно у ХТМЛ датотеку није добра идеја.  Такође је вероватно да ћете имати веб странице са малим брзинама учитавања када имате много кода у ХТМЛ датотеци. 


  Све што је Аппле најавио на свом „Сцари Фаст“ Мац догађају
Направите нову датотеку сцрипт.јс која ће носити ваш ЈаваСцрипт код. 


Увезите датотеку сцрипт.јс у ХТМЛ датотеку;


<head>

   <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

</head>


Нова ажурирана ХТМЛ страница ће имати овај код;


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

    <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>


Додајте овај код у датотеку сцрипт.јс;


document.addEventListener("DOMContentLoaded", function() {

    const form = document.querySelector("form");

    form.addEventListener("submit", function(event) {

      event.preventDefault();

      alert("external JS sheet submit");

    });

  });


Овај ЈаваСцрипт ради следеће;


    

  • Имамо слушалац догађаја који чека да се покрене догађај ДОМЦонтентЛоадед. 
    • 

  • Функција повратног позива се извршава након што се покрене догађај ДОМЦонтентЛоадед.
    • 

  • Код користи куериСелецтор за одабир обрасца.
    • 

  • Користимо евент.превентДефаулт() да спречимо ДОМ да изабере подразумевано понашање (освежи страницу или пређе на нову страницу) када се покрене догађај слања. 
    • 

  • Порука „спољно слање ЈС листа“ се покреће када се покрене догађај слања. 
    • 





ЈаваСцрипт у ХТМЛ-у: најбоље праксе


    

  • Смањите величине датотека: Што је већа величина датотеке, то је више времена потребно за учитавање у претраживач.  Умањивање уклања све нежељене знакове у изворном коду без промене његовог значења или перформанси.  Можете користити алате као што су Иахоо ИУИ Цомпрессор и ХТМЛМинифиер да бисте креирали компактну базу кодова. 
    • 

  • Нека ваш код буде организован: Ово ће учинити ваш код лаким за читање и одржавање.  Можете користити екстензије као што је Преттиер да организујете свој код. 
    • 

  • Користите спољне библиотеке: Ако библиотека може да изврши одређени задатак за вашу апликацију, нема потребе да пишете код од нуле.  Међутим, избегавајте коришћење више библиотека које постижу исте циљеве на истом пројекту. 
    • 

  • Оптимизујте ЈаваСцрипт пласман: Ако намеравате да додате ЈаваСцрипт код у своју ХТМЛ датотеку, уверите се да долази после ХТМЛ кода.  Поставите ЈаваСцрипт између ознака <сцрипт> пре него што затворите ознаку .  Ово осигурава да се ХТМЛ садржај као што су текст, слике и табела учитава прво пре ЈаваСцрипт-а, побољшавајући брзину учитавања. 
    • 



Окончање 


Сада можете удобно да користите ЈаваСцрипт са ХТМЛ-ом за креирање интерактивних веб страница.  Приступ који ћете користити за спајање две технологије зависиће од природе веб апликације коју креирате.  На пример, можете да користите уграђени код када правите малу апликацију.  С друге стране, великој апликацији је потребна спољна ЈаваСцрипт датотека коју ћете увести у своју ХТМЛ датотеку. 


Погледајте ЈаваСцрипт библиотеке табела које можете да користите данас.