Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik

CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .

kurs tworzenie witryn www
szkolenie technik informatyk programista inf.03 ee.09 inf.04 egzamin przygotowanie

 

JavaScript DOM creation add delete website elements how to add www element using JavaScript

flag language

JavaScript DOM creation add delete website elements how to add www element using JavaScript

JavaScript DOM creation adding deleting web page elements

Creating Responsive pages with swap backgrounds CSS scroll

JavaScript is currently the best web technology. JavaScript Allows creating attractive, professional, responsive and fast-acting websites.

And after all: JavaScript together with HTML5 and CSS3 - "rules" on the internet!

JavaScript DOM creation adding deleting web page elements

To continue learning JavaScript, create two files: index.html and main.js.

JavaScript (short for: JS) - scripting programming language. JavaScript is mainly used in Internet technologies, although there are already solutions that allow you to create applications outside the online environment. Eg Electron enables the creation of desktop applications using JavaScript. JavaScripts are most often used to provide interactivity by reacting to events, validating forms and / or building navigation elements. JavaScript scripts run by websites have limited access to the user's computer. On the server side, JavaScript can also work in the form of various frameworks and libraries (e.g. React, Angularjs, node.js, jQuery).

index.html - in this part of the JavaScript tutorial I will base on the following website code - copy the following code:

<!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>

The main JavaScript file is main.js - upload the following explanations to it and you will see what JavaScript has. Note: JavaScript comments are set to

// JavaScript single line comment or

/ * multiline JavaScript comment * /

In this article, all comments start with: JavaScript: :), replace them in the editor with // and you will receive a fully working js file.

 

framework JavaScript poswojsku

Javascript: Changing CSS attributes

JavaScript: We create a variable to which we get the object

var we change = document.querySelector ('h1');

Javascript: We change the font size of the first h1

we change.style.fontSize = '52px';

we change.style.color = 'red';

we change.style.fontFamily = 'Arial';

we change.style.borderStyle = "solid";

we change.style.borderColor = 'green';

JavaScript: ADDING WEBSITE ELEMENTS

var existingElement = document.querySelector ('ul');

existingElement.innerHTML + = '<li> First new list item </li> <li> Second new list item </li>';

Javascript: I will download a list of existing element - substring (0.28) - it will download the first 28 characters

var download = existingElement.innerHTML.substring (0.28);

Javascript: I add a downloaded piece of the list to download to an existing element

existingElement.innerHTML + = downloading;

JavaScript: Creating a new element on a website

Javascript: 'element' = document.createElement ('type') - this will not add a new element to the page, just create a new element on the page and you will still need to add it

Javascript: I'm creating a new element on the page

nowyElement var = document.createElement (that);

Javascript: I create new text content assigned to a new element on the page

newElement.textContent = 'This is a new element created through document.createElement ()';

JavaScript: Now it's time to add the created element to the page using the appendChild () method

istniejacyElement.appendChild (nowyElement);

Javascript: And this again, but I will add li before existing li

wewnElement var = document.createElement (that);

wewnElement.textContent = 'This is a new point, inserted with createElement () to another point';

Javascript: insertedElement = ElementRodzic.insertBefore (newElement, givenElement)

Javascript: We're getting an array of objects - li

var existingElemnty = document.getElementsByTagName ('li');

Javascript: I specify where I want to insert a new element - I make a reference to the list item at index 5

var referencjaExistentElement = existingElement [5];

JavaScript: I add a newFromPoint element by reference

existingElement.insertBefore (internalElement, referenceExistentElement);

Javascript: Too many points created, I will remove one. We already have

JavaScript: var existingElement = document.querySelector ('ul');

Javascript: I have no reference to li

var referencjaLi = document.querySelector ('li');
Javascript: Thanks to JavaScript I will remove the first li - the first point just disappeared :)

istniejacyElement.removeChild (reference);

JavaScript: They will remove the second point

var referencjaLi = document.querySelector ('li');
istniejacyElement.removeChild (reference);

JavaScript: Let's remove the first h1 header now

var referencjaH1 = document.querySelector('h1');

referencjaH1.parentElement.removeChild(referencjaH1);

JavaScript: Maybe a deleted header will be useful? If so - you would have to add it :)

Javascript: I create a reference to pi and attach to p as a "child" header

var referdoP = document.querySelector('p');

referdoP.appendChild(referencjaH1);

JavaScript:  var referdoDiv = document.querySelector('div');

JavaScript:  referdoDiv.appendChild(referencjaH1);

JavaScript: Access to items - to be suspected in the JS console

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: Posted [object NodeList] or downloaded?

JavaScript: BLOCK element that changes position and color per click

 next week :) to continue - you are cordially invited;)

 

 STATIONARY TRAINING and IT CONSULTING

If you are interested

* JavaScript stationary training - I conduct both open and closed trainings and / or

* it consulting including JavaScript - I create responsive and mobile websites, I advise on necessary changes to existing websites

in the field of Creating responsive and mobile websites, including HTML5, CSS3, JavaScript, Drupal 7, JSON, jQuery, Angularjs, Backbonejs, nodejs - please contact: marketing@poswojsku.eu

More about JavaScript - see in the menu a similar article to: JavaScript DOM create add remove elements of a website

 

Angielski

Tags:

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