Scribd Logo
Upload

Welcome to Scribd!

  • Activity 1 - Javascript Basic.

    Uploaded by

    idanshah58
    3 views14 pages

    Original Title

    Activity 1 _Javascript Basic.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views14 pages

    Activity 1 - Javascript Basic.

    Uploaded by

    idanshah58

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 14

    SHAHRIDAN NORIMAN BIN BAHARUD DIN

    13DDT22F1095

    LAB ACTIVITY 13: JavaScript Basic


    Duration: 2 Hours

    Learning Outcomes
    By the end of this laboratory session, you should be able to:
    1. Create a simple Javascript.
    2. Embed Javascript in HTML page.
    3. Create Javascript program using variables.
    4. Apply operators in Javascript.
    Hardware/ Software: HTML Editor (e.g.: Notepad/Notepad++/Eclipse/Adobe Dreamweaver/
    Visual Studio)

    Note:
    JavaScript is one of the 3 languages all web developers must learn:
    1. HTfillL to define the content of web pages
    2. CSS to specify the layout of web pages
    3. JavaScriR• to program the behavior of web pages

    What JavaScript Can Do to the HTML Page ?


    1. JavaScript can change the HTML Content
    document.getElementById(”ceno").innerHTML = ”Hello Ja'.:ascriut”;

    2. JavaScript can change the HTML attributes

    Turn an the light T r th gh

    3. JavaScript can change the HTML Style (CSS)


    document.g9tElementById(”Ue,o”).style.font5i:e - ’JSpx”;
    4. JavaScript can hide the HTML element

    5. JavaScrpt can show the HTML element

    document.getElenert8yId(”c-n: !.st;•le.oispla; = ” :• ;

    Activity 13A (i)

    Activity Outcome: Create a simple Javascript.

    This activity shows how JavaScript can change the HTML content.

    Step 1: Open a HTML editor file and type the following. Save code as act13a.html.

    <!DOCTYPE html>
    <html>
    <body>
    <h2>JavaScript in Bcdy</h2>

    <script language="javascript” type="text/javascript">


    document.getElementById(”demo").innerHTML = "My First JavaScript";
    </scripts
    </bcdy></html>

    Step 2: Preview act13a.html in the browser. State or draw your observation.

    Step 3: On act13a.html, modify the/avascrfpt code by remove the language and type.
    <!DOCTYPE html>
    <html><body>
    <h2>JavaScript in Bcdy</h2>

    <script>
    document.getElementById(”demo").innerHTML = "My First JavaScript";
    </scripts
    </bcdy></html>
    Step 4: Preview act13a.html again. Does it show the same output?

    In HTML, JavaScript code must be inserted between <sckipt> and </sczipt> tags. Codes in
    the first of act13a.html use the old version of JavaScript which use type and language attribute
    as below:
    <script language=”javascript" type="text/javascript">
    But the use type and language attribute are not compulsory because JavaScript is the default
    scripting language in HTML.

    Activity 13A (ii)

    Activity Outcome: Change the HTML attributes using JavaScript

    Step 1: Open a HTML editor file and type the following. Save code as act13a(ii).html.

    <!DOCTYPE html> <html><body>

    <p>JavaScript can change HTML attributes.</p>


    <buttcn
    onclick="document.getElementById('myImage').src='pic bulbon.gif'">T
    urn on the light</buttons

    <img id="myImage" src=”pic bulboff.gif” style=”width:100px">

    <buttcn
    onclick="document.getElementById('myImage').src='pic bulboff.gif'">
    Turn cff the lights/buttons
    </bodys </html>

    Step 2: Download the image pic_buIbon.gif and pic_buIboff.gif form URL


    https://goo.gI/H5Q9XF and save at the same location as your code.

    Step 3: Preview act13a(ii).html in the browser. State or draw your observation. Which HTML
    Tag attribute has been change by the JavaSript ?
    Activity 13A (iii)
    Activity Outcome: Change the HTML Style (CSS) using JavaScript

    Step 1: Open a HTML editor file and type the following. Save code as act13a(iii).html.

    <!DOCTYPE html><html><body>

    <h2>What Can JavaScript Dc?</h2>


    <p id="demo">JavaScript can change the style cf an HTML
    element.</p>

    <button type="button"
    cnclick="document.getElementById('demc').style.fontSize='35px'”>Cli
    ck Me!</buttons
    </body></html>

    Step 2: Preview act13a(iv).html in the browser. State or draw your observation.

    Step 3: Write code to create button and reset the font size to the original size(12px)

    4
    Activity 13A (iv)
    Activity Outcome: Show and Hide the HTML element using JavaScript

    Step 1: Open a HTML editor file and type the following. Save code as act13a(iv).html.

    <!DOCTYPE html><html><body>

    <h2>What Can JavaScript Do?</h2>

    <p id="demo">JavaScript can hide HTML elements.</p>


    <button type=”button"
    cnclick="document.getElementById('demc').style.display='ncne'">click
    Me!</buttons

    </bodys </html>

    Step 2: Preview act13a(v).html in the browser. State or draw your observation.

    Step 3: Open a HTML editor file and type the following. Save code as act13a(iv).html.

    <!DOCTYPE html><html><body>

    <h2>What Can JavaScrípt Do?</h2>


    <p>JavaScript can shcw híóden HTML elements.</p>
    <p íd="demo" style="display:none">Hello JavaScript!</p>
    <button type=”button"
    cnclíck="document.getElementById('demc').style.dísplay='block'”>Cli
    ck Me!</buttcn>

    </body></html>

    Step 4: Preview act13a(iv)_b.html in the browser. State or draw your observation.

    5
    Activity 13B
    Activity Outcome: Embed Javascript in HTML page.

    You can place any number of scripts in an HTML document. Scripts can be
    placed in the <body>, or in the <head> section of an HTML page, or in both. In this activity, a
    JavaScript function is placed in the <head> section of an HTML page. The function is invoked
    (called) when a button is clicked.

    Step 1: Open a HTML editor file and type the following. Save code as act13b(i).html.

    <!DOcTYPE html><html>
    <head>
    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML "Paragraph
    changed! ! !";

    </script></heads
    <bcdy>
    <hl>A Web Pages/his
    <p id="demc”>A Paragraphs/p>
    <button type="button" onclick="myFunction()">Try it</button>
    </body></html>

    Step 2: Preview act13b(i).html in the browser. State or draw your observation.

    Step 3: On act13b(i).html, change the position of javascript and put it in <body> section and
    save it as act13b(ii).html.
    <!DOCTYPE html>
    <html><body>
    <h2>JavaScript in Bcdy</h2>
    <p id="demo">A Paragraph.</p>
    <button type="button” onclick="myFuncticn()">Try it</buttons
    <script>
    function myFunction() (
    document.getElementById(”demo").innerHTML ”Paragraph
    changed! ! !";

    </scripts
    </bcdy></html>
    Step 4: Preview act13b(ii).html. Does it show the same output with lab activity act13b(i).html.

    Step 5: JavaScript can also be placed in external files. On act13b(ii).html, change the code of
    javascript and save it as act13b(iii).html.
    <!DOCTYPE html>
    <html><body>
    <h2>External JavaScript</h2>
    <p id="demo">A Paragraph.</p>
    <button type=”button" onclick="myFunction()">Try it</buttons
    <p>myFunction is stored in an external file called "myScript.js"</p>
    <script src="myScript.js"></scripts
    </bcdy></html>

    Step 6: Open the new document, type the code below and save it as myScript.js.

    function myFunction() {
    document.getElementById(”demo").innerHTML ”Paragraph
    changed! !!”;

    Step 7: Preview act13b(iii).html. Does it show the same output with lab activity act13b(i).html
    and lab activity act13b(ii).html.

    7
    JavaScript can be place either at <head> or <body>, find it also can be placed in external files.
    External scripts are practical when the same code is used in many different web pages.
    JavaScript files have the file extension ”.ys. To use an external script, put the name of the script file
    in the src (source) attribute of a <sckipt> tag. The advantages of using external
    JavaScript:

    • It separates HTML and code.


    • It makes HTML and JavaScript easier to read and maintain.
    • Cached JavaScript files can speed up page loads.

    To add several script files to one page - use several script tags:

    <script src="myScriptl.js”></scripts
    <script src="myScript2.js”></scripts

    External scripts can be referenced with a full URL or with a path relative to the current web
    page. This example uses a full URL to link to a script:

    <script src="https://www.w3schccls.com/js/myScript1.js"></scripts

    Notes : JavaScript can "display" data in different ways:


    • Writing into an HTML element, using innerHTML.
    • Writing into the HTML output using document.write().
    • Writing into an alert box, using window.alert().
    • Writing into the browser console, using console.log().

    8
    Activity 13C(i)
    Activity Outcome: Writing into an HTML element, using innerHTML
    Step 1: Open a HTML editor file and type the following. Save code as
    act13c(i).html.

    <!DOcTYPE html>
    <html><body>

    <p>My First Paragraph.</p>


    <p id="demc”></p>

    <script>
    document.getElementById("demo").innerHTML = 5 + G;
    </scripts
    </body></html>

    Step 2 : Preview act13c(i).html in the browser. State or draw your observation.

    Activity 13C(ii)
    Activity Outcome: Writing into an HTML element, using document.write
    Step 1: Open a HTML editor file and type the following. Save code as act13c(i).html.
    <!DOcTYPE html>
    <html><body>

    <p>My first paragraph.</p>

    <script>
    document.write(5 + 6);
    </scripts

    </body></html>

    Step 2 : Preview act13c(ii).html in the browser. State or draw your observation.

    FOR testing PURPOPES, it is convenient to use zfocument.wrfte{j


    9
    Activity 13C(iii)
    Activity Outcome: Writing into an HTML element, using window.alert()

    Step 1: Open a HTML editor file and type the following. Save code as
    act13c(iii).html.

    <!DOCTYPE html>
    <Iitml><bcdy>

    <p>My first paragraph.</p>

    <script>
    windcw.alert(5 + 6);
    </scripts
    </body></html>

    Step 2 : Preview act13c(iii).html in the browser. State or draw your observation.

    Activity 13C(iv)
    Activity Outcome: Writing into an HTML element, using console.log()

    Step 1: Open a HTML editor file and type the following. Save code as act13c(iv).html.

    <!DOCTYPE html>
    <Iitml><bcdy>

    <h2>Activate debugging with Fl2</h2>


    <p>Select "console” in the debugger menu. Then click Run again.</p>

    <script>
    console.log(5 + 6);
    </scripts

    Step 2 : Follow the instruction to run in console.log as stated in the output.


    Step 3 : Preview act13c(iv).html in the browser. State or draw your observation.

    10
    Activity 13D
    Activity Outcome: Create Javascript program using variables.

    JavaScript variables are containers for storing data values. In this lab activity, x, y, and z, are
    variables:
    Step 1: Open a HTML editor file and type the following. Save code as act13d(i).html.

    <!DOCTYPE html>
    <html><body>
    <h2>JavaScript Variables</h2>
    <p>In this example, x, y, and z are variables</p>

    <script>
    var x = 5;
    var y = 6;
    var z = x + y;
    document.getElementById(”demo").innerHTML z;
    </scripts
    </bcdy></html>

    From the activity act13d(i) above, you can expect:

    x stores the value 5


    y stores the value 6 z
    stores the value 11
    Step 3 : Open a HTML editor file and type the following. Save code as act13d(ii).html.

    <scrîpt>

    </script>

    </body></html>

    Step 4 : Preview act13d(ii).html in the browser. State or draw your observation.

    JavaScript variables are containers for storing data values. In programming, just like in algebra,
    we use variables (like price1) to hold values. In programming, just like in algebra, we use
    variables in expressions (total = price1 + price2). From the activity above, you can calculate the
    total to be 11. It’s a good programming practice to declare all variables at the beginning of a
    script. You can declare many variables in one statement. Start the statement with var and
    separate the variables by comma:

    var perscn = "John Dce", carName = "Volvc", price = 200;

    A declaration also can span multiple lines:


    var perscn = "John Dce",
    carName = "Vclvo",
    price = 200;

    t2
    Activity 13E
    Activity Outcome: Apply operators in Javascript.

    There are several type operators in JavaScript, but in this lab we will look at Arithmetic
    operators. Arithmetic operators are used to perform arithmetic on numbers.

    Operator Description

    Addition

    S ubLra ction

    Multiplication

    Di visio n

    Modulus

    ++ Increment

    Decrement

    Table 1: JavaScript Arithmetic Operators

    Step 1: Open a HTML editor file and type the following. Save code as act13e(i).html.
    <!DOcTYPE html>
    <html><body>
    <h2>JavaScript Operators</h2>
    <p>x = 5, y = 2, calculate z = x + y, and display z:</p>
    <p id="demc"></p>
    <script>
    var x = 5;
    var y = 2;
    var z = x + y;
    document.getElementById(”demo").innerHTML z;
    </scripts
    </body></html>

    Step 2 : Preview act13e(i).html in the browser. State or draw your observation.

    13
    Step 3: The assignment operator (=) assigns a value to a variable. The addition operator (+)
    adds numbers. Open a HTML editor file and type the following. Save code as act13d(ii).html.

    <!DOCTYPE html>
    <html><body>
    <h2>The + Operators/h2>
    <p id=”demo"></p>
    <script>
    var x = 5;
    var y = 2;
    var z = x + y;
    document.getElementById("demo").innerHTML z;
    </scripts
    </bodv></html>
    Step 4 : Preview act13e(ii).html in the browser. State or draw your observation.

    Step 5: The multiplication operator (*) multiplies numbers. Open a HTML editor file and type
    the following. Save code as act13d(iii).html.

    <!DOCTYPE html>
    <html><body>
    <h2>The * Operators/h2>
    <p id=”demo"></p>
    <script>
    var x = 5;
    var y = 2;
    var z = x * y;
    document.getElementById("demo").innerHTML z;
    </scripts
    </body></html>

    Step 7 You can try to use other JavaScript Arithmetic Operators and observe the output of
    codes.

    14

    You might also like