JavaScript DOM tworzenie dodawanie usuwanie elementów strony www

JavaScript to jedna z wielu technologii internetowych, która umożliwi tworzenie atrakcyjnych, profesjonalnych i szybko działających stron www. JavaScript (skrót: JS) – skryptowy język programowania, stosowany głównie w technologiach internetowych. Skrypty js służą najczęściej do zapewnienia interaktywności powodując reagowanie na zdarzenia, sprawdzanie poprawności formularzy i/lub budowanie elementów nawigacyjnych. Skrypty JavaScript uruchamiane przez strony internetowe mają ograniczony dostęp do komputera użytkownika. Po stronie serwera może także działać JavaScript w postaci różnorodnych framworków i bibliotek (np. Angularjs, node.js, jQuery).
A tak poswojsku: JavaScript wspólnie z HTML5 i CSS3 - „rządzi” w internecie!

JavaScript DOM tworzenie dodawanie usuwanie elementów strony www

Aby kontynuować naukę utwórz dwa pliki: index.html oraz main.js.

index.html - w tej części poradnika będę się opierał o następujący kod strony www - wkopiuj poniższy kod:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document Object Model DOM poswojsku</title>

</head>
<body>
    <div id="block"></div>

    <h1>Section 1</h1>
    <p class="first_paragraph">This is first paragraph.</p>
    <p>This is second paragraph.</p>
    <p>This is third paragraph.</p>

    <h1>Section 2</h1>
    <p class="first_paragraph">This is first paragraph in Section 2.</p>
    <p>This is second paragraph in Section 2.</p>
    <p><span class="okay">Okay or not? </span>This is third paragraph in Section 2.</p>

    <ul>
        <li>Item 1 poswojsku.info</li>
        <li>Item 2 poswojsku.pl</li>
        <li>Item 3 poswojsku.com</li>
        <li>Item 4 poswojsku.eu</li>
        <li>Item 5 poswojsku.com.pl</li>
        <li>Item 6 poswojsku.org</li>
    </ul>
    <script type="text/javascript" src="main.js"></script>   
</body>
</html>

Drugim plikiem jest main.js - wgraj do niego poniższe wyjaśnienia, a zobaczysz jakie możliwości posiada JavaScript. Uwaga: komentarze w JavaScript ustawia się jako

// komentarz jednolinikowy JavaScript lub

/*  komentarz wielowierszowy JavaScript */

W tym artykule wszystki komentarze zaczynają się od: JavaScript: :), zamień je w edytorze na // a otrzymasz w pełni działający plik js.

 

framework JavaScript poswojsku

JavaScript:  Zmiana atrybutów CSS

JavaScript:  Tworzymy zmienną do której pobieramy obiekt
var zmieniamy = document.querySelector('h1') ;
JavaScript:  Dokonujemy zmiany wielkości fontów pierwszego h1
zmieniamy.style.fontSize = '52px';
zmieniamy.style.color = 'red';
zmieniamy.style.fontFamily = 'Arial';
zmieniamy.style.borderStyle = "solid";
zmieniamy.style.borderColor = 'green';

JavaScript:  DODAWANIE ELEMENTÓW STRONY WWW

var istniejacyElement = document.querySelector('ul');
istniejacyElement.innerHTML += '<li>Pierwszy nowy element listy </li><li>Drugi nowy element listy </li>';

JavaScript:  Pobieram kawałek listy istniejacyElement - substring(0,28) - pobierze 28 pierwszych znaków
var pobieram = istniejacyElement.innerHTML.substring(0,28);
JavaScript:  Dodaję pobrany kawałek listy pobieram do istniejacyElement
istniejacyElement.innerHTML += pobieram;

JavaScript:  Tworzenie nowego elementu na stronie www
JavaScript:  'element' = document.createElement('typ') - nie spowoduje to dodanie nowego elementu na stronie, tylko stworzenie nowego elementu na stronie i jeszcze trzeba będzie go dodać
JavaScript: Tworzę nowy element na stronie
var nowyElement = document.createElement('li');
JavaScript:  Tworzę nową zawartość tekstową przypisaną do nowego elementu na stronie
nowyElement.textContent = 'To jest new element stworzony poprzez document.createElement()';
JavaScript:  Teraz czas na dodanie stworzonego elementu do strony, wykorzystując metodę appendChild()
istniejacyElement.appendChild(nowyElement);

JavaScript:  I jeszcze raz to sam, ale dodam li przed istniejącym li
var wewnElement = document.createElement('li');
wewnElement.textContent = 'To jest nowy punkt, wstawiony za pomocą createElement() do innego punktu';
JavaScript:  wstawionyElement = elementRodzic.insertBefore(nowyElement,danyElement)

JavaScript:  Pobieramy tablicę obiektów - li
var istniejaceElemnty = document.getElementsByTagName('li');
JavaScript:  Określam gdzie chcę wstawić nowy element - wykonuję referencję do pozycji listy o indexie 5
var referencjaDoistniejacyElement = istniejaceElemnty[5];
JavaScript:  Dodaję przez określoną referencję nowy elementFromPoint
istniejacyElement.insertBefore(wewnElement, referencjaDoistniejacyElement);

JavaScript:  Powstało za dużo punktów, jednego usunę. Mamy już
JavaScript:  var istniejacyElement = document.querySelector('ul');
JavaScript:  Brakuje mi referencji do li
var referencjaLi = document.querySelector('li');
JavaScript:  Usunę dzięki JavaScript pierwszy li - pierwszy punkt właśnie zniknął :)
istniejacyElement.removeChild(referencjaLi);
JavaScript:  Usuną jeszcze drugi punkt
var referencjaLi = document.querySelector('li');
istniejacyElement.removeChild(referencjaLi);

JavaScript:  Usuńmy teraz pierwszy nagłówek h1
var referencjaH1 = document.querySelector('h1');
referencjaH1.parentElement.removeChild(referencjaH1);

JavaScript:  Może jednak przyda się usunięty nagłówek? Skoro tak - trzeba by go dodać :)
JavaScript:  Tworzę referencję do p i dołączam do p jako "dziecko"-child nagłówek
var referdoP = document.querySelector('p');
referdoP.appendChild(referencjaH1);

JavaScript:  var referdoDiv = document.querySelector('div');
JavaScript:  referdoDiv.appendChild(referencjaH1);
JavaScript:  Dostęp do elementów - do podejrzenia w konsoli JS
var writting1 = istniejacyElement.childNodes;
console.log(writting1);
console.log(istniejacyElement.lastChild);
console.log(istniejacyElement.firstChild);
console.log(istniejacyElement.lastElementChild);
console.log(istniejacyElement.firstElementChild);
console.log(istniejacyElement.firstElementChild);
console.log(istniejacyElement.children[2]);
console.log(istniejacyElement.children[5]);
console.log(istniejacyElement.nextSibling);
console.log(istniejacyElement.previousSibling);
console.log(istniejacyElement.nextElementSibling);
console.log(istniejacyElement.previousElementSibling);
JavaScript:  Napisało [object NodeList] czyli pobraliśmy coś?

JavaScript:  BLOCK element zmieniający położenie i kolor na kliknięcie

 już w przyszłym tygodniu :) ciąg dalszy - serdecznie zapraszam ;)

 


 SZKOLENIE STACJONARNE a także DORADZTWO IT

Jeżeli jesteś zainteresowana/y

* szkoleniem stacjonarnym- przeprowadzam szkolenia zarówno otwarte jak i zamknięte  i/lub

* doradztwem it- tworzę responsywne i mobilne strony www, doradzam w zakresie niezbędnych zmian odnośnie już istniejących  stron www

z zakresu Tworzenie responsywnych i mobilnych stron www, w tym HTML5, CSS3, JavaScript, Drupal 7, JSON, jQuery, Angularjs, Backbonejs, nodejs - zapraszam do kontaktu: marketing@poswojsku.eu


 

Zobacz w menu podobny artykuł do JavaScript DOM tworzenie dodawanie usuwanie elementów strony www

<
  • DANE ADRESOWE

     

    w czym mogę pomóc?

    biuro(at)gddm.com.pl

    Zd Wola Paprocka 86

    znajdź mnie na Youtube

  • PROGRAMOWANIE

     

    JavaScript HTML CSS

    jQuery jQuery Mobile

    node.js React Angular

    ES6 babel rollup karma

  • GRAFIKA ANIMACJA

     

    grafika na strony www

    grafika reklamowa

    animacja 2D i 3D

    grafika 2D i 3 D

  • DORADZTWO

     

    doradztwo IT

    doradztwo biznesowe

    usługi IT

    analizy biznesowe i IT

  • SZKOLENIA

     

    technologie IT

    marketing

    zarządzanie

    projekty metodologia

>