JavaScript

Weblaunch

A dynamic , interpreted and high-level programming language.

Recap

Cheong Pui Yien

📖  BSc (Hons) in Computer Science

       ( Year 2 )

 

🧩  Vice President of Sunway Tech

       Club

 

 

Chai Chang Cheng

  • Software developer @ Map72
  • AWS Student Ambassador
  • Freelance Web/Mobile developer
  • Head of Marketing of Sunway Tech Club
  • A first-year student in Computer science (Technically😏)

 

JavaScript

Weblaunch

A dynamic , interpreted and high-level programming language.

Resources:

Help!!!

Materials for JavaScript Workshop

Whatsapp Web Launch Help Group

Javascript Workshop Guide

🚩   How to write JS in HTML
🚩   Basics of JavaScript

Control Flow   🚩
🎯   Exercise

    🔓  Variables
    🔓  Constant
    🔓  Primitive Types
    🔓  Array

    🔓 Arithmetic Operators

     Conditional Statements: 🔓     
                If Else  🔑
            Switch Case  🔑
Comparison Operators 🔓
           Loops:  🔓
      While  🔑
       For    🔑
    Object 🔓
      Array🔓
   Function🔓

🚩  How to write JavaScript in HTML

>

✔️ How to write JavaScript in HTML?

We need to include <script> </script> in the <body> of the HTML element.

<!DOCTYPE html>
<html>
    <head>
        <title>This is the HTML Page</title>
    </head>

    <body>
        <p>Let's try writing JavaScript in HTML!</p>
        <p id='this'>Try This!</p>

        <script>
            alert('Hello World');
            document.write('I love WebLaunch');
            document.getElementById('this').innerHTML='Change to This!';
            
        </script>

    </body>
</html>
🚩How to write JavaScript in HTML
>
<!DOCTYPE html>
<html>
    <head>
        <title>This is the HTML Page</title>
    </head>

    <body>
        <p>Let's try writing JavaScript in HTML!</p>
        <p id='this'>Try This!</p>
			
	<script src="webLaunch_js.js"></script>

    </body>
</html>
🚩How to write JavaScript in HTML
>
alert()
alert('Hello World');

For example:

Output:

✔️ How to write a message in JavaScript

>
🚩How to write JavaScript in HTML
document.write()
document.write("Hello World");

For example:

Output:

>
🚩How to write JavaScript in HTML
innerHTML
<!DOCTYPE html>
<html>
    <head>
        <title>InnerHTML</title>
    </head>

    <body>
        <p>This is line 1</p>
        <p id='change'>This is line 2</p>

        <script>
            document.getElementById('change').innerHTML = 'Hello World';
        </script>

    </body>
</html>

innerHTML has to be tagged along with the element that you want to change using a query selector i.e. getElementById()

For example:

🚩How to write JavaScript in HTML
🚩   Basics of JavaScript

Control Flow   🚩
🎯   Exercise

    🔓  Variables
    🔓  Constant
    🔓  Primitive Types
    🔓  Array

    🔓  Arithmetic Operators

     Conditional Statements: 🔓     
                If Else  🔑
            Switch Case  🔑
Comparison Operators 🔓
           Loops:  🔓
      While  🔑
       For    🔑
    Object 🔓
      Array🔓
   Function🔓
🚩   How to write JS in HTML

Basics of JavaScript

🚩

Programming is all about processing the data

🔓  Variables

( Give a name to your data! )

🚩Basics of JavaScript 
>
🚩Basics of JavaScript  🔓 Variables
var surname = 'Cheong';
let name = 'Yien';
let birthDate = 10;

console.log(surname);
console.log(name);
console.log(birthDate);

To print to variables that you have keyed in to the console you can use console.log() 

For Example:

console.log(surname);

🔓 Constant

( You can't change me! )

🚩Basics of JavaScript  🔓 Constant
>

To fix the value of a variable or disable change

const birthMonth = 10;
console.log(birthMonth);
🚩Basics of JavaScript  🔓 Constant

Data types

( Different type of data! )

🔓 Primitive Types

🚩Basics of JavaScript  🔓 Primitive Types
>

  • String

  • Number

  • Boolean

  • Undefined

  • Null

let name = "My Name";
let age = 18;
let choice = true;
let lastName = undefined;
let firstName = null;

Check the type of the data using typeof in the console:

🔓 Arithmetic Operators

🚩Basics of JavaScript  🔓 Arithmetic Operators

📃 Collection of data

( Basically grouping them )

🔓 Array

🚩Basics of JavaScript  🔓 Array
>

To store list of items.

Let's try making a list of colour using array !
let colours = [];
let colours = ['red','orange','yellow','green','violet'];
console.log(colours);
console.log(colours[4]);
colours[5]='blue';
🚩Basics of JavaScript  🔓 Array
🚩   Basics of JavaScript

Control Flow   🚩
🎯   Exercise
    🔓  Variables
    🔓  Constant
    🔓  Primitive Types
    🔓  Array

      🔓  Arithmetic Operators

     Conditional Statements: 🔓     
                If Else  🔑
            Switch Case  🔑
Comparison Operators 🔓
           Loops:  🔓
      While  🔑
       For    🔑
    Object 🔓
      Array🔓
   Function🔓
🚩   How to write JS in HTML

Control Flow

🚩

Handling of data

🔓 Conditional Statements

🚩Control Flow

🔑 If and Else (if....else)

>

🔑 Switch and Case

🚩Control Flow  🔓 Conditional Statements
  • If and Else

 

if (condition){
    action
}else (condition){
    action
}else{
    action
};
  • Switch and Case
switch (input){
    case input1
        action
        break;
    case input2
        action
        break;
    case input3
        action
        break;
    default:
        action
}
🚩Control Flow  🔓 Conditional Statements
  🎯  Try This!

🔑 If and Else (if....else)

Create a simple if and else statement that checks the score.

If the score is more than or equal 80, let's print 'Congratulations!' . Else, print 'It's ok, try harder next round.'

  ❗  Initialise the score first!
let score = 40;
if (score >= 80){
    console.log("Congratulations!!!");
}
else
    console.log("It's ok, try harder next round.");
>
🚩Control Flow  🔓 Conditional Statements
  🎯  Exercise

If i'm hungry, I want the application to print " I'm hungry!!!Feed me now!!!! ". If i'm not, i want it to print " I'm not hungry ".

let hungry = false;
if (hungry){	//hungry === true
    console.log("I'm hungry!!!Feed me now!!!!");
}
else
    console.log("I'm not hungry");
>
🚩Control Flow  🔓 Conditional Statements  🔑 If and Else
  🎯  Try this!

🔑 Switch and Case

Print out the choice that you / the user input using a switch case. 

let choice;
switch (choice){
    case 'A':
        console.log('I chose A');
        break;
    case 'B':
        console.log('I chose B');
        break;
    case 'C':
        console.log('I chose C');
        break;
    default:
        console.log('Please make a choice');
}
🚩Control Flow  🔓 Conditional Statements

I have strawberries, mango, durian. I want the application to print out "I Love Strawberries!" if I choose A , and mango if i choose B, vice versa.

  🎯  Exercise
let choice;

switch (choice){
    case 'A'
        console.log("I LOVE Strawberries!");
        break;
    case 'B'
        console.log("I LOVE Mango!");    
        break;
    case 'C'
        console.log("I LOVE Durian!");
        break;
    default:
        console.log("Please make a choice.");
}

🚩Control Flow  🔓 Conditional Statements
if (choice === 'A'){
    console.log('I chose A');
}
else if (choice === 'B'){
    console.log('I chose B');
}
else (choice === 'C'){
    console.log('I chose C');
}
else{
    console.log('Please make a choice');
 If and else vs Switch and Case
let choice;

switch (choice){
    case 'A':
        console.log('I chose A');
        break;
    case 'B':
        console.log('I chose B');
        break;
    case 'C':
        console.log('I chose C');
        break;
    default:
        console.log('Please make a choice');
    
}
if (choice === 'A'){
    console.log('I chose A');
}
else if (choice === 'B'){
    console.log('I chose B');
}
else (choice === 'C'){
    console.log('I chose C');
}
else{
    console.log('Please make a choice');
🚩Control Flow

🔓 Comparison Operators

🚩Control Flow

🔓 Loops

🔑 While Loop

>

🔑 For Loop

🚩Control Flow  🔓 Conditional Statements

To repeat the action stated in the { }

  • While 
  • For

Example:

Example:

while (condition) {
  // code block to be executed
}
let counter = 0
while(counter < 5){
    console.log('Hi');
    counter ++;
}
for (statement 1; statement 2; statement 3) {
  // code block to be executed
}
for ( let counter = 0; counter <=5; counter ++ ){
    console.log('HI');
}
>
🚩Control Flow  🔓 Loops

To simplify my work

🔑While Loop

let count = 1;
while(count <=100){
    console.log("I Love WebLaunch!");
    count ++;
}
>
🚩Control Flow  🔓 Loops

🔑For Loop

for (let count = 1; count <=100; count ++){
    console.log('I love WebLaunch!');
}
🚩Control Flow  🔓 Loops
🚩Control Flow

🔓 Object

Has characteristics and behaviour

A person has : 

let name = 'Cheong';
let age = 18;
let dob = '01/01/2002';

✔️ Create an Object

let person = {
    name: 'Cheong',
    age: 18,
    dob: '01/01/2002'
};
>
🚩Control Flow  🔓 Object

✔️  To print properties and values of an object

✔️ To print the properties of an object

for (let properties in person ){
    console.log(properties); 
}
for (let properties in person ){
    console.log(properties,person[properties]);
}
🚩Control Flow  🔓 Object
🚩Control Flow

🔓 Array ( Continue )

Print the items in the array using for loop:

const colours = ['red','orange','yellow','green','blue','indigo','purple'];
for (let count = 0; count < colours.length; count ++){
    console.log(colours[count]);
}
🚩Control Flow  🔓 Array ( continue )

Handling of data (2)

(In a cooler way!)

🚩Control Flow

🔓 Function

Me doing lazy work hehe 🤭

A block of code designed to perform a particular task.

function name_of_function (parameters){
    //code to be executed
}
function greet (name){
    alert("Hi, " + name);
}
🚩Control Flow  🔓 Function

❗  Document Object Model

( The reason why we learn JavaScript )

Select the "Object" in the document

>

Types of operation

CRUD:

  1. Create
  2. Read
  3. Update
  4. Delete

Read ( or get ) the HTML Element

>

Ways we can do

document.getElementById

document.getElementsByTagName

document.getElementsByClassName

>

Ways we can do (Better!)

🌟document.querySelector🌟

Create new HTML Element!

document.createElement

Update HTML Element!

<element>.style.width = "500px";

Delete HTML Element!

document.removeChild

🚩   Basics of JavaScript

Control Flow   🚩
🎯   Exercise
    🔓  Variables
    🔓  Constant
    🔓  Primitive Types
    🔓  Array
    🔓  Arithmetic 
        Operator

 

     Conditional Statements: 🔓     
                If Else  🔑
            Switch Case  🔑
Comparison Operators 🔓
           Loops:  🔓
      While  🔑
       For    🔑
    Object 🔓
      Array🔓
   Function🔓
🚩   How to write JS in HTML

🎯 Exercise

Create a function named sum, that will return the total,that was calculated by adding the numbers within the range of the value stated, that are divisible by either 3 or 5.

  🎯  Exercise 1
For instance:
sum(5)

Output:
8

Output = 3 + 5

within 0 to 5 only 3 and 5 are divisible by 3 or 5
>

Create a function named sum, that will return the total,that was calculated by adding the numbers within the range of the value stated, that are divisible by either 3 or 5.

  🎯  Exercise 1 ( Answer )
function sum (num){
    let total = 0;
    for (let count = 0; count <= num; count++)
        if (count%3===0 ||count%5===0)
            total += count;
    
    return total;
}

Create a button that will add a new text node when it is clicked.

  🎯  Exercise 2
  🎯  Exercise 2 ( Answer )
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicon.png" />
    <title>WebLaunch 2020 : JavaScript</title>
  </head>

  <body>
      <h1>
        Welcome to Sunway Tech Club WebLaunch 2020 JavaScript Workshop
      </h1>
      <div id="content">
        <p>This is the first line.</p> <br />
        <p>This is the second line.</p> <br />
      </div>
      <p id="change">Change me to something else please /.\</p>

      <script>
        function add(){
            let new_text_node = document.createTextNode("I am new text node");
            document.querySelector("#content").appendChild(new_text_node);
      	}
      <script/>

      <button onclick="add();">Don't Click Me</button>

  </body>
</html>

🎌🏁  Completed 🏁🎌

🎉Congratulations 🎊 

You have
the basics of JavaScript!

📌 Download files for hands on

Next Proceed to :

JavaScript Hands on

Link : 

Materials

JavaScript Yien

By cheongyien

Source: frankfrank

JavaScript Yien

Basics of JavaScript for Sunway Tech Club Web Launch 2020

  • 335