JavaScript Fundamentals for Beginners Part 1

What is javaScript?

JavaScript is a programming language for the web. It is primarily used to enhance web pages to provide more user friendly experience. These include dynamically updating web pages, user interface enhancements such as menus and dialog boxes, animations, 2D and 3D graphics, interactive maps, video players, and more. This mode of JavaScript usage in the web browser is also referred to as client-side javascript.

JavaScript in NOT Java

Most of you know this by now, but for those who don't. JavaScript has absolutely nothing to do with Java. JavaScript is a lightweight scripting language that's interpreted by a browser when the page is loaded.

Java is a general purpose high-level, object-oriented programming language on thesame catergory as C++ and C#

What do you need to run JavaScript?

All you need is a modern web browser

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Internet Explorer

To create JavaScript, all you need is a text editor like Notepad, Atom, Sublime Text, VScode, etc

The Fundamentals

  • Variable
  • Arrays
  • Loops
  • Conditional
  • Comparisons & Operators
  • Objects
  • Functions
  • Program Flow
  • Data Types
  • Prototypes
  • Events

What can you do with JavaScript?

Here is a short list of what you can do with JavaScript, but there is more.

  • Validate Forms
  • Create Cookies
  • Control Browsers
  • Detect the visitor's browser
  • Change page contents dynamically
  • Add interactivity to your website
  • Display information based on the time of the day

Prerequisites

You don't need any previous JavaScript knowledge, but you should have some familiarity with HTML and CSS. If you don't, I would suggest learning the basics of HTML and CSS before learning JavaScript.

Getting Started

To get started with writing JavaScript, we can link the external javaScript file or simply put it in the HTML by putting it in a script tag.

Numbers and String

Let's create a variable, we can do that by using the key word var NOTE: The key word var is the old method of defining variables we use let & const instead. But for this tutorial we'll just go with var.

          
            //number
            var number1 = 34;
          
        

Since it doesn't has quote around it, it's going to be looked at as a number.

        
          //string
          var number1 = "34";
        
      

Since it has quote around it, it's going to be looked at as a string.

If you have a variable that's a number you can perform math Operations

        
          //Math Operations
          var number1 = 12;
          var number2 = 19;

          console.log(number1 + number2);
        
      

console.log is used for Writing into the browser console.

Naming convention for variables

1. You should not use any of the JavaScript reserved keywords as a variable name. For example, break or boolean variable names are not valid.

2. JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or an underscore character. For example, 123test is an invalid variable name but _123test is a valid one.

3. JavaScript variable names are case-sensitive. For example, Name and name are two different variables.

Examples:

      
        var name; // correct
        var 2name; // incorrect
        var _2name; // correct
      
    

Syles of Variables

    
      var myVariable //camel Case
      var MyVariable //partial case
      var my_favorte_number // underscore
    
  

Arrays

Arrays are used to store multiple values in a single variable. There are two ways to do it

  
    var fruit = ['Apple', 'Orange', 'Pear'];//first method
    var fruit new Array ('Apple', 'Orange', 'Pear'();//second method
  

Both basically do the same thing, now to access the Arrays, normaly nearly all or most programming language are Zero-based numbering, so if we want to access Apple we would do something like this


  console.log(fruit[0]);

Loops

Generally in computer programming, a loop is a sequence of instructions that is continually repeated until a certain condition is reached.

  • Basic types of loop
    • While loop
    • for loop
    • forEach loop
    While loop
    
      var sum = 0;
        var number = 1;
          while (number <= 50) {  // -- condition
          sum += number;        // -- body
          number++;             // -- updater
        }
        alert("Sum = " + sum);  // => Sum = 1275
    
    
    for loop

    The most frequently used loop in JavaScript is the for-loop. Here is an example:

    
      for (var i = 0; i < 10; i++) {
        console.log(i); //what we want to happen
      }
    
    

    If you run this code you'll see that it start with 0, because we set i to 0 and each iteration it's gonna add 1 until i is no longer less than 10. When it get's to 9 it's gonna stop because the statement isn't true anymore.

    forEach loop

    forEach is an Array method that we can use to execute a function on each element in an array.

      
        var goodFood = ['rice', 'pasta', 'beans'];
          goodFood.forEach(food => {
            console.log(food);
          });
      
    

    The Conditional(Ternary) Operator

    Using a conditional, like an if statement, allows us to specify that a certain block of code should be executed if a certain condition is met.

    let's define as variable

      
        var age = 20;
      
    

    We want to test if the age is greater than or equal to 16, if true, they're old enough to drive, if not then they can not drive.

      
      if(age >= 16){
        console.log('You can drive');
      }else{
        console.log('You can not drive');
      }
      
    

    Now you’ve seen the conditional ternary operator in action, we're just teeling it to do something if the conditions are true or else do the other.

    Thanks for reading. watch out for part 2 of this series.