JavaScript Essentials

Welcome!

Wifi: Lighthouse Labs

Password: 401WGeorgia

Slides: https://andydlindsay.github.io/javascript-essentials Repo: https://github.com/andydlindsay/javascript-essentials-completed-app

Introductions

Who are we?

How do we do that?

Full-time Immersive Bootcamps

Web or iOS Development Bootcamp

Part-time Courses

Front End Fundamentals with Javascript, Intro to Web or Intro to iOS Development

Workshops and Events

The Goal

Setup

Modern Web Browser (Chrome preferred)
A Code Editor (Sublime or VS Code)
Node.js Installed

Note: If you cannot install Node, you can use an online environment such as repl.it

Checking Node Version

Input

                            
                                node --version

Output

                            
                                v10.15.1

👋 If you don't see a version number or are getting an error, please raise your hand.

HTML

The most fundamental language used on the Web

Getting Started Pt1

Make a directory to store your project.

                                        
                                            mkdir chat-app

Navigate into that folder and create index.html.

                                        
                                            cd chat-app
                                            touch index.html

Getting Started Pt2

Getting Started Pt3

Add the following HTML code to index.html.

                                        
                                            <!DOCTYPE html>
                                            <html lang="en">
                                            <head>
                                                <title>Chat App</title>
                                            </head>
                                            <body>
                                                <main>
                                                    <ol id="history">
                                                        <li>KV says: hey there, DV</li>
                                                        <li>DV says: Hiii!!!</li>
                                                    </ol>
                                                    <form>
                                                        <input id="initials">
                                                        <input id="message">
                                                        <button>Send</button>
                                                    </form>
                                                </main>
                                            </body>
                                            </html>

Getting Started Pt4

Open index.html in a browser.

CSS

Cascading Style Sheets

Styling Pt1

Create a file called style.css.

                                        
                                            touch style.css

Add a link to style.css in the head of index.html.

                                        
                                            <!DOCTYPE html>
                                            <html lang="en">
                                            <head>
                                                <title>Chat App</title>
                                                <link rel="stylesheet" href="style.css">
                                            </head>

Styling Pt2

Add the following CSS code to style.css.

                                        
                                            body {
                                                background-color: white;
                                                color: #303030;
                                                font-family: 'Helvetica Neue', Arial, sans-serif;
                                                font-size: 15px;
                                                margin: 20px;
                                            }
                                            
                                            main {
                                                background-color: #f0f0f0;
                                                border-radius: 6px;
                                                box-shadow: 3px 3px 12px #c8c8c8;
                                                margin: 20px auto;
                                                max-width: 470px;
                                                padding: 20px;
                                            }

Styling Pt3

This is what we are trying to achieve:

JavaScript

The World's Most Popular Programming Language

Client Side JS Pt1

Create a file called app.js.

                                        
                                            touch app.js

Add these tags to the bottom of index.html.

                                        
                                                </main>
                                                <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
                                                <script src="app.js"></script>
                                            </body>
                                            </html>

Client Side JS Pt2

Add this code to app.js.

                                        
                                            alert('hello from the JS file');

Refresh your index.html.

Client Side JS Pt3

Functions

                            
                                alert('hello from the JS file');

Call or invoke a function by putting parenteses () after it
Similar to math functions
Take in some values, do some crunching, and give you back a computed value or some behaviour

Client Side JS Pt4

Add this code to app.js.

                                        
                                            $('form').on('submit',function () {
                                                var text = $('#message').val();
                                                alert(text);
                                                return false;
                                            });

Refresh index.html.

Client Side JS Pt5

Code Explanation

                            
                                $('form').on('submit',function () {
                                    var text = $('#message').val();
                                    alert(text);
                                    return false;
                                });

Access jQuery with the dollar sign $
Target the form element with $('form')
Listen for an event with .on('name of event')
.on is a function that accepts another function as a parameter

* This code isn't doing too much, but it does need to be reviewed before we move on. * First, we use jQuery using the $ function, telling it that we want to target all form elements on the page. * There is only one form element on the page and it is the one at the bottom which contains both input fields and the button. * We then call/invoke another function called on on that returned form element, saying that we want to be notified anytime that a very specific event takes place. * In this case the event we care about is submit. * Asking to be notified when a given event takes place and waiting for it to happen is a very popular programming paradigm called event-driven programming. * Once the event takes place, we will be notified via our own custom function. * That's right, on is a function that accepts another function as a parameter. * Remember that we pass in data into functions within the parentheses (). * They're not on the same line, but they are there. * This part may be a bit confusing, if you walk to talk it over with someone, raise your hand.

Client Side JS Pt6

Code Explanation

                            
                                $('form').on('submit',function () {
                                    var text = $('#message').val();
                                    alert(text);
                                    return false;
                                });

The rest of the code is indented so we know it's inside a function
Capture the text value of an HTML element with the id of "message"
Then pass that text to the alert function

* Inside our function, the rest of the code is indented so that we know that it is within that function, just like we nest HTML tags with indentation. * Make sure your code is indented correctly because improper indentation is a big source of confusion. * This inside code is capturing the text value of the HTML element with the ID message and then passing it to alert so that we can see it. * Lastly, the return false is there to tell the browser to cancel the original form submission logic (which is to attempt sending the form to the server, with loading spinner and everything). * This is common practice when adding custom behaviour to forms like we are doing here.

Client Side JS Pt7

Code Explanation

                            
                                $('form').on('submit',function () {
                                    var text = $('#message').val();
                                    alert(text);
                                    return false;
                                });

Return false to tell the browser to cancel the form submission

Node.js

JavaScript on the Server Side

Getting Started with Node Pt1

Create a new folder called client.

                                        
                                            mkdir client

Move all the "client" side files into the new folder.

Getting Started with Node Pt2

Create a new file called server.js.

                                        
                                            touch server.js

Client and server.

Getting Started with Node Pt3

Add this code to server.js.

                                        
                                            console.log('hello from our node script!');

Run the file.

                                        
                                            node server.js

Getting Started with Node Pt4

Output

                                        
                                            hello from our node script!

Express

Our Web Server

Web Server Pt1

Initialize the folder.

                                        
                                            npm init -y

Install Express.

                                        
                                            npm install express

Web Server Pt2

Add this code to server.js.

                                        
                                            var express = require('express');
                                            var app = express();
                                            
                                            var http = require('http');
                                            var server = http.Server(app);
                                            
                                            app.use(express.static('client'));
                                            
                                            server.listen(8080, function() {
                                                console.log('Chat server running');
                                            });

Web Server Pt3

Code Explanation

                            
                                var express = require('express');
                                var app = express();
                                
                                var http = require('http');
                                var server = http.Server(app);
                                
                                app.use(express.static('client'));
                                
                                server.listen(8080, function() {
                                    console.log('Chat server running');
                                });

Load external modules with require('name-of-module').

Web Server Pt4

Code Explanation

                            
                                var express = require('express');
                                var app = express();
                                
                                var http = require('http');
                                var server = http.Server(app);
                                
                                app.use(express.static('client'));
                                
                                server.listen(8080, function() {
                                    console.log('Chat server running');
                                });

Serve static content with express.static('path-to-folder')

Web Server Pt5

Code Explanation

                            
                                var express = require('express');
                                var app = express();
                                
                                var http = require('http');
                                var server = http.Server(app);
                                
                                app.use(express.static('client'));
                                
                                server.listen(8080, function() {
                                    console.log('Chat server running');
                                });

Tell the server to listen on a port with server.listen(portNumber)

Web Server Pt6

Start the server.

                                        
                                            node server.js

Visit http://localhost:8080 in your browser.

Web Server Pt7

Socket.io

For Real-Time Messaging

Adding Sockets Pt1

Install Socket.IO.

                                        
                                            npm install socket.io

Add this code to server.js.

                                        
                                            app.use(express.static('client'));
                                            
                                            var io = require('socket.io')(server);
                                            
                                            io.on('connection', function (socket) {
                                                socket.on('message', function (msg) {
                                                    io.emit('message', msg);
                                                });
                                            });
                                            
                                            server.listen(8080, function () {
                                                console.log('Chat server running');
                                            });

Adding Socket.io Pt2

Reference Socket.IO.

                                        
                                            <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
                                            <script src="/socket.io/socket.io.js"></script>
                                            <script src="app.js"></script>

Add this code to the top of app.js.

                                        
                                            var socket = io();
                                            
                                            $('form').on('submit', function () {

Adding Socket.io Pt3

Update app.js with this code.

                                        
                                            var text = $('#message').val();
                                            socket.emit('message', text);
                                            $('#message').val('');
                                            return false;

Add this code to the bottom of app.js.

                                        
                                            socket.on('message', function (msg) {
                                                $('<li>').text(msg).appendTo('#history');
                                            });

Adding Socket.io Pt4

Final code for app.js

                            
                                var socket = io();
                                
                                $('form').on('submit', function () {
                                    var text = $('#message').val();
                                    socket.emit('message', text);
                                    $('#message').val('');
                                    return false;
                                });
                                
                                socket.on('message', function (msg) {
                                    $('<li>').text(msg).appendTo('#history');
                                });

Adding Socket.io Pt5

Final code for server.js

                            
                                var express = require('express');
                                var app = express();
                                
                                var http = require('http');
                                var server = http.Server(app);
                                
                                app.use(express.static('client'));
                                
                                var io = require('socket.io')(server);
                                
                                io.on('connection', function (socket) {
                                    socket.on('message', function (msg) {
                                        io.emit('message', msg);
                                    });
                                });
                                
                                server.listen(8080, function() {
                                    console.log('Chat server running');
                                });

Adding Socket.io Pt6

Start the server.

                                        
                                            node server.js

The Complete App

Enhancements As Challenges

Modify app.js so that it emits the initials field as well.
Make it so only a maximum of two characters can be entered into initials field.
Add a list of all previous messages.

Review

HTML & CSS
jQuery
Node
Express
Socket.IO

Continuing Your Learning

Lighthouse Labs Prep Course
http://lighthouse-labs.thinkific.com/