JavaScript Tutorial




JavaScript provides the foundation of 95% of all websites of the web. That is almost the entire web. Javascript is fast and continues to grow for ios and android. It's also used for front end and the back end with a framework like Node js. There are 77,000 jobs available for JavaScript Developers. 

You have an HTML Parser the CSS Parser, and the JavaScript Engine. HTML makes the structure of the website and the navigation bar. The CSS is the animation and colors and the Javascript engine is the core, the 2-way train going back and forth between the website and the logic. Now, you can receive and listen to what the user is doing on the website and respond accordingly. 

Now let's get into the coding of JavaScript. JavaScript is being used for Instagram, javascript is scrolling very nicely, and javascript is popping up for a picture. Netflix scrolling is Javascript and youtube liking/disliking is Javascript again. 

Now, let's learn how to run JavaScript Code. We install Visual Studio Code and Create a Javascript Crash Course Folder. Ctrl + B hides the side panel in Visual Studio. doc + tab + save has the barebone HTML code. 


console.log prints and alert puts a notification on the screen. Go to Chrome, Ctrl + O, run the file. 

Now we can link a script to javascript file, that's how you actually code. Create an HTML file with ctrl + N and call it home.js. Now there's home.js and index.html. 

2 slashes like java turns things into a comment and the comment sign tells the computer to

You can store strings and numbers into variables as well. Another cool things to show is to change the code on HTML page using JavaScript, and we can add HTML code using JavaScript. We can ask a user for his/her age, but it doesn't do anything with information yet, but you get an input. I can store prompt in a variable, though. 

With JavaScript, you can do GUI development really fast. You can ask a user for his age.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id = "someText"></h1>

    <script src = "home.js">

    </script>
    
</body>
</html>


console.log('hello');

//alert('yo');
//how to write a comment

//variables
var b = 'smoothie';
console.log(b);

var someNumber = 45;
console.log(someNumber);


var age = prompt('What is your age');

document.getElementById('someText').innerHTML = age;

The 2D JavaScript Tutorial we can have an integer or a floating number or lots of different operations on a number, or arithmetic of a number, meaning you can multiply a number.

Multiply is * divide is / mod is % Dealing with numbers is pretty standard, especially in Java. See the Leetcode list for more information. 

Now, let's talk about functions.


//create the function

function fun() {

    alert('this is a function');;

}


//calling the function

fun();


you have to invoke a function.


For functions we just need to 

1. Create a function 

2. Call the function


It's like creating a child and you need to call a child in order for it to invoke.

The idea behind functions is that it should do multiple things, which means taking in a name and returns to you, and says "hello" followed by your name.

//console.log('hello');

//alert('yo');
//how to write a comment

//variables
//var b = 'smoothie';
//console.log(b);

//var someNumber = 45;
//console.log(someNumber);


//var age = prompt('What is your age');

//document.getElementById('someText').innerHTML = age;

var num1 = 10;

num1 = num1++; 

//decrement num1 by 1
console.log(num1);

num1--; 

//Divide /, multiply *, remainder %
console.log(num1 % 5);

//Increment/decrement by any number you want 
num1+= 10; 

console.log(num1);
//prompt(num1);

function fun() {
    console.log("function is finally running...");
} 

fun();

//let's get an example of a function that takes in a string as an input
/*
For example
name: Chris
return Hello Chris
 */

function greeting() {
    var name = prompt("What is your name?");
    var result = 'Hello ' + name;
    console.log(result);
}

greeting();

Example of a function with string concatenation.


var name = prompt('What is your name?');

function greeting(yourName) {
    var result = 'Hello ' + yourName;
    console.log(result);
}

var namez = prompt('What is your name?');
greeting(namez);


function sumNumbers(num1, num2) {

    var result = num1 + num2;
    console.log(num1 + num2);

}

sumNumbers(10, 'Qazi');


Functions can also take in arguments, or inputs, so we should have inputs outside of the function and the function should be taking that as the input. You add information before a function if a function is dependent on some information. 


What if things have to be done multiple times? We use while loops and for loops to execute this.

Say we have some number equal to 0. What we'll do is we say while a number is less than 100 increment the number and log the number. 

var num = 0;
while(num < 100) {
    num += 1;
    console.log(num);
}

This is the code that does the following.

The for loop achieves the same things but has the same limit.

You can use let or var, and it's the same thing as naming something as a variable.

for(let num = 0; num < 100; num++) {
    console.log(num + " for loop");
}

It would just run infinitely with while but for has a guaranteed stop. 

Next, we want to go through data types. 

//Data Types 
let yourAge = 18; //number
let yourName = 'Bob'; //string
let name = {first: 'Jane', last: 'Doe'}; //object 
let truth = false; //boolean 
let groceries = ['apple', 'banana', 'oranges']; //array 
let random; //undefined
let nothing = null; //null

These are examples of a number, string, object, boolean, array, undefined, and nul in JavaScript. 


console.log(fruit.length); //length of string
console.log(fruit.indexOf('an')) //1
console.log(fruit.indexOf('q')); //-1
console.log(fruit.slice(2, 4)); //na

console.log(fruit.replace('ban', '123'));
console.log(fruit.toUpperCase());
console.log(fruit.toLowerCase());
console.log(fruit.charAt(2));
console.log(fruit[2]);
console.log(fruit.split(',')); //split by a comma
console.log(fruit.split('')); //split by a character.


Now let's talk about strings.

You insert '\n' for a new line. We can also get fruit length be using .length function (no parentheses).

You can also get index of something that can be found in the string. If it doesn't exist, it returns -1.

We can also do slicing  from 2 to 4 you get an, includes the first index but goes up to and does not include the last index. Including, and then up to. 

You can also find and replace. Also, you can convert to upper case and to lower case. You can also get a character at an index or get index by referencing directly. You can also directly call a .split() method. You can either split by a comma or default character.


Now, let's talk about arrays in JavaScript. Let's say that we have fruits again and we create an array for the fruits.

let fruits = ['banana', 'apple', 'orange', 'pineapple'];
fruits = new Array('banana', 'apple', 'orange', 'pineapple');
alert(fruits[1]);

Here are the 2 ways to create an array. You can only declare with lets once.

let fruits = ['banana', 'apple', 'orange', 'pineapple'];
fruits = new Array('banana', 'apple', 'orange', 'pineapple');
alert(fruits[1]);
fruits[0] = 'pear';
console.log(fruits);

for(let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

We can also set an array index again.  You can also loop through an array. 


Now, let's talk about the array common methods. 


console.log('to string ', fruits.toString())

I can convert an array to a string, and I can convert it to the opposite to the split functionality. So you can give multiple arguments for console.log.You also have join and you can jin things be a character such as pear - apple - orange - pineapple.


console.log('to string ', fruits.toString());
console.log(fruits.join(' * '));
console.log(fruits.pop(), fruits);

pop() will pop off the last element of an array so now it will just read pear-apple-orange as a result. 


Looks like you can modify the array in place as well, which is nice.

.shift() removes the first element of a list. .unshift added element to an array.

.concat() appends one array to the end of another.


You can slice an array, including the first index but up to the 4th but not including. .slice. .reverse() helps to reverse an array. 

let vegetables = ['asparagus', 'tomato', 'broccoli'];
let allGroceries = fruits.concat(vegetables); //combine array
console.log(allGroceries);
console.log(allGroceries.slice(1,4));
console.log(allGroceries.reverse());

let someNumbers = [5, 10, 2, 25, 3, 255, 1, 2, 5, 334, 321, 2];
console.log(someNumbers.sort(function(a, b){return a-b})); //sorted in ascending order
console.log(someNumbers.sort(function(a, b){return b-a})); //sorted in descending order

We can also call the sort method, as well as reverse and concatenate. 


let emptyArray = [];

for(let num = 0; num < 10; num++) {
    emptyArray.push(num);
} 

console.log(emptyArray);

We can also insert elements to the array. We use the .push() element to add things to the array. 


The next topic that we want to discuss is objects in JavaScript. They are also known as dictionaries in Python. 

let student = {first: 'Chris', last: 'Chu'};
console.log(student.first);

Say we have a student. We set the first name and the last names.


Seems like you can't access objects in JavaScript using indices anymore. That's been deprecated. You can change and increment values inside these objects. You can also do a little bit of object-oriented programming. You MUST reference things in objects with this (or self in python). 


let student = {
        first: 'Chris', 
        last: 'Chu',
        age: 22,
        height: 175,
        studentInfo: function () {
            return  'name: ' +  this.first + ' ' + this.last + '(' + this.age + ')';
        },
};
console.log(student.first);
student.first = 'notChris';
console.log(student.first);
student.age++;
console.log(student.age);
console.log(student.studentInfo());

Let's now talk about conditionals and control flow. The target demographic is between 18 to 35. 

var age = prompt('what is your age?');

if((age >= 18) && (age <= 35)) {
    status = 'target demo';
    console.log(status);
} else {
    status = 'not my audience';
    console.log(status);
}

Let's represent the code that has the idea.

//switch statements differentiate between weekday and weekend.
switch(6) {
    case 0:
        text = 'weekend';
        break;
    case 5:
        text = 'weekend';
        break;
    case 6:
        text = 'weekend'
        break;
    default: 
        text = 'weekday';
}

console.log(text);

Let's say day 0 is a Sunday and Day 6 is a Saturday, and we want to print out the proper weekday corresponding to the day. We can use the switch(input) statement for this. If  case(6), then weekend, but if case(2) then we have a weekday. 

JSON stands for JavaScript Object Notation, and is used to represent data. It uses APIs and configuration. In JSON, you would call it an array with objects inside of it. 

[
    {
        "name": "Chris",
        "age": 22, 
        "height": 175
    },
    {
        "name": "Mathew",
        "age": 16, 
        "height": 175
    }
]

The next thing we can do is to learn JSON. We go to the index we can create a script tag and inside of the tag,


we can take the JSON code, which is just Valid JavaScript



and you can see an array with 2 objects inside of it. JSON.parse is deprecated and outdated on April 25th, 2021, the day that this part of the article was written. 

Comments

Post a Comment

Popular Posts