Programming Homework Help

Alabama Aviation College HTML Pages and Visual Studio Code Project

 

QUES 1. Instructions

Download the JSLab.zip file (attached in word just copy and paste it in Visual studio and follow the instructions where it says your turn.) and take the necessary steps to open it up in Visual Studio Code. YOU can name it lab15

Explanation

In the past, we have been including our script element in the head of our html page, but now we will have to rethink this.

Since we aim to interact with the elements on the page, we must consider how html pages are rendered. 

HTML pages are processed and rendered top-bottom, so where you place your <script> element actually matters. 

If you place a <script> element in the <head>, a page might take longer to “load” (visually render content) because the browser has to interpret the script before it renders content in the <body> element. However, if that content depends on the output of some JavaScript code, that code will have to finish before the content can be rendered correctly.

On the other hand, if your JavaScript code depends on certain html elements existing, then you must ensure that the elements load first (one way to accomplish this is by adding the <script> element at the end of the file).

Additionally, if you place the <script> element at the bottom of an HTML document, the page will appear to load faster (the content will be visually rendered before the scripts are interpreted), but the page content therefore cannot depend on the output of any JavaScript.

In this case because we are going to access html elements in our index.html, we want to move our script element from the head to the bottom of the body. 

Together

Move the script element from the top of index.html to the bottom so that now your index.html looks like this: attached is HTML file copy and past in Visual Studio Code. just follow this instructions and send it in zip file to me . u can name it in the vsc as index.html

<!DOCTYPE html> 

<html>
     <head>
          <title>DOM Manipulation</title>
          <link rel=”stylesheet” href=”styles/style.css”>
     </head>
     <body>
          <div class = “row” id =”pageHeaderRow”>
                 <div class = “col-12” id = “pageHeaderDiv”>
                        <h1 id=”pageHeader”>DOM Manipulation</h1>
                 </div>
          </div>
          <div class= “row”>
                  <div class= “col-12” id = “activityListDiv”>
                            <h2 id=”activityListHeader”>Activities:</h2>
                           <ol id = “activityList”>
                                 <li>Modify existing elements
                                       <ol>
                                           <li>Change content </li>
                                           <li>Change attribute values</li>
                                       </ol>
                                   </li>
                                    <li>Add elements</li>
                                    <li id = “modifyMe”>Modify me!</li>
                                    <li id=”removeMe”>Remove Me!</li>
                              </ol>
                      </div>
                </div>
               <script src= “scripts/script.js”></script>
        </body>
</html>

QUES 2. 

Begin writing your own JavaScript functions. 

Instructions

Download the JSLab16.zip file (attached below) and take the necessary steps to open it up in Visual Studio Code.

Complete the exercises in the script.js file.  name the file script.js in vsc

Ques 3. 

Instructions

Download the JSLab.zip (attached)file and take the necessary steps to open it up in Visual Studio Code.

Complete the exercises in the script.js file. 

Ques 4. Explore functions as objects and constructor functions.

Instructions

Download the JSLab.zip (attached) file and take the necessary steps to open it up in Visual Studio Code.

Complete the exercises in the script.js file. 

Ques 5. Follow the instructions below

Then progress through the examples and your turn activities. copy and paste  in Visual Studio below instructions.

//Your work goes here.

/*Explanation

Comparison operators 

==, ===, <, >, <=, >= 

Boolean operators 

|, &, ||, &&, !

*/

/*Example 

== operator */

console.log(“== operator:”);

let a = 5; 

let b = 5; 

console.log(“5 == 5”, a==b);

b = “5”; 

console.log(“5 == ‘5’”, a==b);

/*Explanation

== tests if two values are equal. But JavaScript will

coerce (change the datatype) of certain values before 

performing the comparison. */

/*Your turn

Assign ‘b’ a string that contains numerical digits. Assign the variable ‘a’

a number that the will cause == to consider the two 

variables equal. 

Print the result to the console. */

/*Example 

=== 

Comparison operator that compares the type as well as the 

value. */

console.log(“nn=== operator”)

a = “5”;

b = 5; 

console.log(“5 === ‘5’”, a===b);

/*Example

>, >= */

//Works as expected with numbers 

console.log(“nn > , >= operators”)

console.log(“5>5”,a>b);

console.log(“5>=5”,a>=b);

//Can be used with strings 

console.log(“n”)

console.log(“‘b’>’a'”, “b”>”a”);

console.log(“‘a’>=’a'”, “a”>=”a”);

console.log(“‘abc’>’abb'”, “abc”>”abb”);

/*Your turn

Compare two numbers using the less than operator.

Print the result. 

Compare two strings using the less than operator. 

*/

/*Example 

The or opertor 

|| 

*/

console.log(“nnBoolean operators:”);

a = false;

b = 5>0;

let solution = a || b;

console.log(“false || true”, solution);

/*Your turn

Assign solution the result of a and b*/

console.log(“false && true”,solution);

/*Example

The not operator

*/

solution = !(5>0);

console.log(“!(true expression)”,solution);

/*Example

What if we apply boolean operations to

nonboolean values? */

console.log(“!’somestring'”,!(“string”));

console.log(“false || 56”, false || 56);

/*Explanation

Turns out everything in JavaScript essentially has some

boolean value. Everything is truthy unless it’s falsy

The values that are falsey are: 

false, 0, null, undefined, “”, NaN */

/*Your turn

Copy and paste the next line out of the comment

console.log(“!(falsy value)”, !____);

Fill in the blank with a falsy value that isn’t the keyword false.

*/

//Finished! Nice work! Remeber these things for 

//the conditional blocks lab.