Fundamentals of Web Development  

Announcements

  • Coffee (Free - mention you're with the meetup)

  • Schedule

  • Slack

Review

  • Variables

  • Control Structures

  • Functions/Methods

  • Operators

  • DOM

{

Not Unique to JavaScript!

Variables

var hello = "Hello World";
var aNumber = "1234";
var anotherNumber = 1234;
var aBool = true;
var aBool = true;
var value;

value = 1;
value = "hello";
value = null;
value = "23"

Type Conversion example

Control Structures (conditionals)

if (condition) {
    block of code to be executed if the condition is true
}

If/Else

switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        default code block
}

Switch

DOM

<html>
    <head>
        <title>My title</title>
    </head>
    <body>
        <h1>A Heading</h1>
        <a href="#">Link Text</a>
    </body>
</html>

Functions

function add(a,b) {
    return a+b;
}

Basic Syntax:

var add = function (a,b) {
    return a+b;
}

As assignment

var result = add(1,2);

Functions

var add = function (a,b) {
    return a+b;
};

var multiply = function (a,b) {
    return a*b;
};

var divide = function (a,b) {
    return a/b;
};

var apply_function = function(fn, a,b) {
    console.log(fn(a,b));
};

Functions as arguments

apply_function(multiply, 2, 2);
apply_function(divide, 4, 2);

Functions

function hello() {
    console.log('world');
}

Named function

(function () {
    console.log('Hello world');
})();
hello();

Self-invoking Anonymous Function

Functions

var hello = 'Hello ';
var world = 'World';

function run() {
    var hello = 'hi '
    console.log(hello + world);
}

Scoping

var hello = 'Hello ';
var world = 'World';

function run() {
    var hello = 'hi '
    function inside() {
        console.log(hello + world);
    }

    inside();
}

Nested Scoping

Made with Slides.com