JavaScript DOM tworzenie dodawanie usuwanie elementów strony www

szkolenia bezpłatne kursy
lekcje, porady, artykuły znajdziesz w bocznym menu
 
 

Responsywne mobilne strony internetowe kurs bezpłatny

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć

Budowa responsywnych i mobilnych stron internetowych

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć

JavaScript DOM tworzenie dodawanie usuwanie elementów strony www jak dodać element www za pomocą JavaScript

JavaScript to obecnie najlepsza technologia webowa. JavaScript Umożliwia tworzenie atrakcyjnych, profesjonalnych, responsywnych i szybko działających stron www.

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ę JavaScript utwórz dwa pliki: index.html oraz main.js.

JavaScript (skrót: JS) – skryptowy język programowania. JavaScript stosowana jest głównie w technologiach internetowych, choć obecnia są już rozwiązania, które umożliwiają tworzenie aplikacji poza środowiskiem internetowym. Np. Electron umożliwia tworzenie za pomocą JavaScript aplikacji desktopowych. Skrypty JavaScript 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. React, Angularjs, node.js, jQuery).

index.html - w tej części poradnika JavaScript 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 poradnika JavaScript 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 JavaScript- przeprowadzam szkolenia zarówno otwarte jak i zamknięte  i/lub

* doradztwem it w tym JavaScript- 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


Więcej o JavaScript - 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

>