Scribd Logo
Hochladen

Willkommen bei Scribd!

  • DOM Representation

    Hochgeladen von

    Achraf Sallem
    14 Ansichten5 Seiten

    Originaltitel

    cours5 DOM.docx

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    DOCX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    14 Ansichten5 Seiten

    DOM Representation

    Hochgeladen von

    Achraf Sallem

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 5

    What is DOM

    In the last skill, we have learned the basics of JavaScript language. But, we have never seen the
    relation between JavaScript and the web page. Here we are going to start, so in this super skill,
    we are going to see:
    What’s DOM?
    How to access DOM elements?
    How to manipulate the DOM elements?What are the events and how to treat them in JavaScript?
    How to treat form in JavaScript?

    DOM representation
    JavaScript is most commonly used to get or modify the content or value of the HTML elements on
    the page, as well as to apply some effects like show, hide, animations etc. But, before you can
    perform any action we need to find or select the target HTML element.
    Here is some definition before we start:
    Document interface represents any web page loaded in the browser and serves as an entry point
    into the web page's content, which is the DOM tree. The DOM tree includes elements such as
    <body> and <table>, among many others. It provides functionality globally to the document, like
    how to obtain the page's URL and create new elements in the document.

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <script>

    console.log(document);

    </script>

    <title>Document</title>

    </head>

    <body>

    <h1>Hello from Mars!</h1>

    </body>

    </html>
    What's DOM Attributes?
    The attributes are special words used inside the start tag of an HTML element to control the tag's
    behavior or provides additional information about the tag.
    JavaScript provides several methods for adding, removing or changing an HTML element's
    attribute. In the following sections we will learn about these methods in details.

    Styling DOM elements


    We can also apply style on HTML elements to change the visual presentation of HTML
    documents dynamically using JavaScript.
    We can set almost all the styles for the elements like, fonts, colors, margins, borders, background
    images, text alignment, width and height, position, and so on.

    <body>

    <p id="intro">This is a paragraph.</p>

    <p>This is another paragraph.</p>

    <script>

    // Selecting element

    var elem = document.getElementById('intro');

    // Appling styles on element


    elem.style.color = 'blue';

    elem.style.fontSize = '18px';

    elem.style.fontWeight = 'bold';

    console.log('elem:', elem);

    </script>

    </body>

    The output would be :

    Add Events
    Events refer to what happens to an HTML element, such as clicking, focusing, or loading, to
    which we can react with JavaScript.
    We can assign JS functions to listen for these events in elements and do something when the
    event has occurred.

    Here is a list of events. There are three ways you can assign a function to a certain event.
    If foo() is a custom function, you can register it as a click event listener (call it when the button
    element is clicked) in three ways:

    // first way

    <button onclick=foo>Alert</button>

    // the second way

    <div id="main">

    <button>Alert</button>

    </div>

    <script>

    // Getting the button

    var btn = document.querySelector('button');

    btn.onclick=foo;

    </script>
    // the third way

    <div id="main">

    <button >Alert</button>

    </div>

    <script>

    // Getting the button

    var btn = document.querySelector('button');

    btn.addEventListener('click', foo);

    </script>

    Form validation
    The form validation process typically consists of two parts— the required fields validation which is
    performed to make sure that all the mandatory fields are filled in, and the data format validation
    which is performed to ensure that the type and format of the data entered in the form is valid.
    Well, let's get straight to it and see how this actually works.

    HTML
    <form name="loginForm" onsubmit="return validateForm(event) ">

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

    <input type="text" name="name" placeholder="example@example.com" />

    <label for="password">Password:</label>

    <input type="password" name="password" placeholder="*********" />

    <button type="submit">Login</button>

    <button type="reset">cancel</button>

    </form>

    </body>

    JavaScript
    function validateForm(e) {
    e.preventDefault()

    var name = document.loginForm.name.value

    var password = document.loginForm.password.value

    if (name.length==0)

    return alert(`name is required`)

    if (password.length<5)

    return alert(`password length should more than 5`)

    DOM RECAP
    Congrats !
    For the present; we have learned to define the structure and the content using HTML, add to our
    structure same design, and manipulate what we have produced using DOM and JavaScript.
    See you in the next part of this course.

    Das könnte Ihnen auch gefallen