Creating Dynamic Web Pages with JavaScript

102-Reading Notes

Creating Dynamic Web Pages with JavaScript

“Hello World” JavaScript Practice

```(function(){ “use strict”; /* Start of your code */ function greetMe(yourName) { alert(‘Hello ‘ + yourName); }

greetMe greetMe(‘World’); /* End of your code */ })();```

Then press press Cmd+Enter or Ctrl+Enter (or click the Run button) to watch it unfold in your browser!

Language Basics Crash Course

However, getting comfortable with JavaScript is more challenging than getting comfortable with HTML and CSS. You may have to start small, and progress gradually. To give you a better understanding of how JavaScript works, let’s explain some of the core features of the language. It’s worth noting that these features are common to all programming languages. If you master these fundamentals, you have a head start on coding in other languages too!

Variables

Variables are containers that store values. You start by declaring a variable with the var (less recommended, dive deeper for the explanation) or the let keyword, followed by the name you give to the variable:

let myVariable;

Notes:

After declaring the variable, you can give it a value:

myVariable = 'Carly';

You can also do both these options on the same line:

let myVariable = 'Carly';

You can retrieve the value by calling the variable name:

`myVariable;’

After assigning a value to a variable, you can change it later in the code:

let myVariable = 'Carly';

myVariable = 'Deanna';

Variables may hold values that have different **data types:

  1. String - This is a sequence of of text; must be enclosed in single quote marks. e.g. let myVariable = 'Carly';
  2. Number - Simply a number, which doesn’t have quotres around them. e.g. let myVariable = 10;
  3. Boolean - This is a True/False value, which does not need quote marks. e.g. let myVariable = true;
  4. Array - This is a structure that allows you to store multiple values in a single reference. e.g. let myVariable = [1, 'Carly', 'Deanna', 10];
  5. Object - This can be anything. Everything in JavaScript is an object and can be stored in a variable. Remember this as you learn. e.g. let myVariable = document.querySelector('h1');

### Comments Comments are snippets of text that can be added along with code. The browser ignores text marked as comments. You can write comments in JavaScript just as you can in CSS:

/*

Everything in between is a comment.

*/

Operators

An operator is a mathematical symbol that produces a result based on two values (or variables). In the following table, you can see some of the simplest operators, along with some examples to try in the JavaScript console. Examples:

  1. Addition - add two numbers together or combine two strings.
    • 6 + 9;
    • 'Hello' + 'world!';
  2. Equality - This performs a test to see if two values are equal. It returns a true/false (Boolean) result.
    • let myVariable = 3;
    • ‘myVariable === 4;`
  3. Not, Does-not-equal - Thisreturns the logically opposite value of what it precedes. It turns a true into a false, etc.. When it is used alongside the Equality operator, the negation operator tests whether two values are not equal.
    • For “Not”, the basic expression is true, but the comparison returns false because we negate it:
      • let myVariable = 3;
      • !(myVariable === 3);
    • “Does-not-equal” gives basically the same result with different syntax. Here we are testing “is myVariable NOT equal to 3”. This returns false because myVariable IS equal to 3:
      • let myVariable = 3;
      • myVariable !==3; There are a lot more operators to explore, but this is enough for now. See Expressions and operators for a complete list.

Knowledge is Power

Keep building your knowledge with the following!

  1. Control flow and error handling
  2. Loops and iteration
  3. Functions
  4. Expressions and operators
  5. Numbers and dates

If you’re interested in learning more, scroll down to the bottom of the link of any of the above examples for more!