JavaScript DOM tworzenie dodawanie usuwanie elementów strony www

flag language

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

JavaScript DOM tworzenie dodawanie usuwanie elementów strony www

Tworzenie Responsywnych stron z podmienianymi tłami przewijaniem tła CSS scroll

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="//www.poswojsku.info/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

 

Polski

Tags:

Budowa responsywnych i mobilnych stron internetowych

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

Budowa responsywnych i mobilnych stron internetowych

Budowa responsywnych i mobilnych stron internetowych

Budowa responsywnych i mobilnych stron internetowych

Znaczniki blokowe - budowa responsywnych i mobilnych stron internetowych

Znaczniki - budowa responsywnych i mobilnych stron internetowych

JavaScript obiektowy język programowania kurs budowa responsywnych i mobilnych stron internetowych

JavaScript obiektowy język programowania kurs budowa responsywnych i mobilnych stron internetowych

JavaScript obiektowy język programowania kurs budowa responsywnych i mobilnych stron internetowych

szkolenia bezpłatne kolejne lekcje
kursy, porady, artykuły znajdziesz w Menu Tematycznym