Simple javascript tutorial

Discussion in 'Tutorials' started by Fr3dFields, Mar 7, 2018.

  1. Fr3dFields

    Fr3dFields Former MARS leader :pensive: 4YA Reaction Tests Winner

    Likes Received:
    Trophy Points:
    Examples below have been taken from here.

    JavaScript is a widely used web-based programming language that powers the dynamic behavior on most websites.

    In this lesson, you will learn simple built in javascript stuff.

    Before you learn about data types and methods, you need to know how to print values to the console. The console is a tool that developers use to record the output of their JavaScript programs.

    The console.log() command is used to print, or log, text to the console. Consider the following example:

    In this example, Hello! is logged to the console. Notice, we denote the end of the line with a semicolon. Although your code will usually run as intended without a semicolon, it is best practice to always include one to ensure your code works as expected in situations when it does need one. [​IMG]

    You'll see in the next exercise that you can put any data type inside the parentheses to print it to the console.

    Data Types

    Data types are the building blocks of all languages and essential pieces of any program.

    Below are examples of four primitive data types that lay the foundation for all JavaScript programs. Primitive data types, as their name implies, are the simplest built-in forms of data.

    console.log('New York City');

    In the example above, the computer logs each of the four primitive data types to the console. The types include:

    • Strings — Any grouping of keyboard characters (letters, spaces, numbers, or symbols) surrounded by single quotes ('Hello') or double quotes ("World!"). In the example above, 'New York City' is a string.
    • Numbers — Any number, including numbers with decimals: 4, 1516, .002, 23.42. In the example above, 40.7 is a number.
    • Booleans — Either true or false, with no quotations. In the example above, true is a boolean.
    • Null — Can only be null. It represents the absence of value.

    Math Operators
    Don't worry! Math doesn't need to be your strong-suit to learn JavaScript. However, there are operators you'll need to know to make useful programs.

    JavaScript supports the following math operators:

    1. Add: +
    2. Subtract: -
    3. Multiply: *
    4. Divide: /
    These all work how you might guess:

    console.log(3 + 4); // Equals 7
    console.log(5 - 1); // Equals 4
    console.log(4 * 2); // Equals 8
    console.log(9 / 3); // Equals 3

    In the example above, each line uses a different mathematical operator to log a value to the console.

    When you introduce a new piece of data into a JavaScript program, the browser saves it as an instance of the data type. An instance is an individual case (or object) of a data type.

    JavaScript will save a new piece of data, like 'Hello', as a string instance in the computer's memory. Another example, the number 40.7, is stored as an instance of the number data type.

    An instance, like the string 'Hello', has additional information attached to it.

    For example, every string instance has a property called length that stores the number of characters in it. You can retrieve property information by appending the string with a period and the property name:

    In the example above, the value saved to the length property is retrieved from the string, 'Hello'. The program prints 5 to the console, because Hello has five characters in it.

    Built-in Methods
    While the length of a string is calculated when an instance is created, a string instance also has methods that calculate new information as needed. When these built-in methods are called on an instance, they perform actions that generate an output.

    Built-in methods are called, or used, by appending an instance with a period, the name of the method, and opening (() and closing ()) parentheses. Consider the examples below:

    console.log('Hello'.toUpperCase()); // 'HELLO'
    console.log('Hey'.startsWith('H')); // true

    Let's look at each line separately:

    • On the first line, the .toUpperCase() method is called on the string instance 'Hello'. The result is logged to the console. This method returns a string in all capital letters: 'HELLO'.
    • On the second line, the .startsWith() method is called on the string instance "Hey". This method also accepts the character 'H' as an input between the opening and closing parentheses. Since the string 'Hey'does start with the letter 'H', the method returns the boolean true.
    You can find a list of built-in string methods in the JavaScript documentation. Developers use documentation as a reference tool. It describes JavaScript's keywords, methods, and syntax.

    As we write JavaScript, we can create comments in our code.

    Programs do not evaluate comments when you run them. In other words, they exist just for human readers. Good comments are useful for you and other developers, because they describe what the code does.

    There are two types of code comments in JavaScript:

    1. A single line comment will comment out a single line and is denoted with two forward slashes // preceding a line of JavaScript code.

      // The first 5 decimals of pi
      console.log('Pi is equal to ' + 3.14159);
    2. A multi-line comment will comment out multiple lines and is denoted with /* to begin the comment, and */ to end the comment.

      console.log('All of this code');
      console.log('Is commented out');
      console.log('And will not be executed);

    That's it for now.
    Ice Frog, Fasty, Rogue and 1 other person like this.
  2. Ice Frog

    Ice Frog ᵈᶦʳᵗʸ ᵒᶫ' ᵐᵃᶰ

    Likes Received:
    Trophy Points:

Share This Page