Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Javascript1 4

    Hochgeladen von

    postscript
    84 Ansichten2 Seiten
    Javascript is a programming language that is normally embedded in Web pages. It has no relation to the Java programming language. Web pages containing programs are no longer static - hence the term Dynamic HTML.

    Originalbeschreibung:

    Originaltitel

    javascript1-4

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PS, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Javascript is a programming language that is normally embedded in Web pages. It has no relation to the Java programming language. Web pages containing programs are no longer static - hence the term Dynamic HTML.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PS, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    84 Ansichten2 Seiten

    Javascript1 4

    Hochgeladen von

    postscript
    Javascript is a programming language that is normally embedded in Web pages. It has no relation to the Java programming language. Web pages containing programs are no longer static - hence the term Dynamic HTML.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PS, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 2

    Relationship between CSS and Javascript

    Javascript
    Remember :
    Javascript (ECMAScript) is a programming language that is normally embedded in
    • CSS allows us to change rules regarding when particular properties are applied to
    Web pages.
    the layout of our HTML elements;
    • It has no relation to the Java programming language.
    • Javascript can change attributes of elements in the DOM model of our HTML;
    • Javascript can change the class= attribute of an element in order to change its
    Web pages containing programs are no longer static - hence the term Dynamic
    CSS-inspired layout;
    HTML (DHTML).
    • An element may have only one class= attribute, but it may be surrounded by a
    Javascript implementations on different platforms & browsers show many differences.
    <div> or a <span> element which may have its own class= attribute.
    Javascript is big and complicated - we will just look at three main applications to
    obtain a flavour of its power:
    • Mouse movement actions;
    • Validation of form contents;
    • Generation of Web page text;
    • Animation by attribute changing.

    - - javascript1 - 1 - © RMAP 2006 - - javascript1 - 2 - © RMAP 2006

    Javascript example - 1 Javascript example - 2a - functions


    Javascript can change attributes: Javascript can change attributes:

    <html> <html>
    <head> <head>
    <title> Javascript Mouseover example </title> <meta http-equiv="Content-Type" content="text/ html; charset=UTF-8">
    </head> <script type="text/javascript" language="javascript">
    <body> function chg1()
    <p> { document.getElementById("two").setAttribute("class","yyy");
    This is a paragraph of text. }
    <a href="#" onmouseover="document.bgColor=’#a0c0e0’;" function chg2()
    onmouseout="document.bgColor=’#e0c0a0’;" > { document.getElementById("two").setAttribute("class","xxx");
    Roll your mouse over here to change the background colour }
    </a> </script>
    </p> <style type="text/css">
    </body> p {color:blue}
    </html> p.xxx {color:red}
    p.yyy {color:green}
    </style>
    Some user input elements can have onmouseover and onmouseout attributes. </head>
    These are triggered when the cursor is moved over them.
    • The action value is a piece of Javascript. • <script> sits inside <head> ... </head> and contains the Javascript.

    - - javascript1 - 3 - © RMAP 2006 - - javascript1 - 4 - © RMAP 2006


    Javascript example - 2b - calling the functions Javascript example - 3
    Javascript can change attributes: Javascript can run algorithms and generate text:

    <body> <html>
    <p> <head>
    This is a paragraph of text. <script type="text/javascript" language="javascript">
    <a href="#" onmouseover="document.bgColor=’#a0c0e0’;" function addit()
    onmouseout="document.bgColor=’#e0c0a0’;" > {
    Roll your mouse over here to change the background colour var v1 = parseInt(document.myform.val1.value);
    </a> var v2 = parseInt(document.myform.val2.value);
    </p> alert ("The sum of " + v1 + " and " + v2 + " is " + (v1+v2) );
    <p id="two" class="zzz"> }
    This is a second paragraph. </script>
    </p> </head>
    <p id="three" class="zzz"> <body>
    This is the third paragraph. <form name="myform">
    <a href="#" onmouseover="chg1();" A = <input type="text" name="val1" size="5">
    onmouseout="chg2();" > <br>
    Roll your mouse over here to change the class B = <input type="text" name="val2" size="5">
    </a> <br>
    </p> <input type="button" value="Add Values" onClick="addit()">
    </body> </form>
    </html> </body>
    </html>

    - - javascript1 - 5 - © RMAP 2006 - - javascript1 - 6 - © RMAP 2006

    Javascript example - 4a Javascript example - 4b


    Javascript can create new elements:
    <body>
    <form name="myform">
    <html> A = <input type="text" name="val1" size="5">
    <head> <br>
    <script type="text/javascript" language="javascript"> B = <input type="text" name="val2" size="5">
    function addit() <br>
    { <input type="button" value="Add Values" onClick="addit()">
    var v1 = parseInt(document.myform.val1.value); </form>
    var v2 = parseInt(document.myform.val2.value); <p id="xx">
    node=document.getElementById("xx"); </p>
    newText=document.createTextNode </body>
    ("The sum of " + v1 + " and " + v2 + " is " + (v1+v2)); </html>
    node.appendChild(newText);
    }
    </script>
    • <p> is the element that is changed by the Javascript function addit().
    </head>
    • <input type="button"> is a button that calls the specified onClick= function
    when it is clicked.

    - - javascript1 - 7 - © RMAP 2006 - - javascript1 - 8 - © RMAP 2006

    Das könnte Ihnen auch gefallen