An Introduction to Front-end Web Development Tom Perkins

Disclaimer Examples follow – Pluralsite.com – Learning to Program – Part 1: Getting Started – Scott Allen – Node.js

Programs run inside node.js Node – Easy to install – Can run on Mac, Windows, or Linux First thing to do – Install Node

Node.js Superfast, stand-alone JavaScript interpreter Can function as a web server Easy to install Started from the Command Prompt JavaScript programs run “inside” Node. Two “run modes” – REPL (Loop) – Execute external JavaScript programs

Installing Node Launch any web browser (IE, Chrome, FireFox) Go to nodejs.org Download node Install node (use defaults)

Start Node Search your apps for “node” Select the ”Node.js command prompt” This will open the Command Prompt Window

The Command Prompt Window Run node by typing node at the command prompt

Run node Node runs JavaScript in the REPL loop.

Node’s REPL

REPL Examples To exit Node, type “.exit” at the command prompt (no quotes)

Some Node.js Objects Console – console.log(data) – outputs data to the output device Process – process.argv – returns an array containing command line arguments First element – ‘node’ Second element – name of JavaScript file Next elements – remaining command line arguments

Notes for process.argv() // print process.argv process.argv.forEach(function(val, index, array) { console.log(index + ': ' + val); }); This will generate: $ node process-2.js one two=three four 0: node 1: /Users/mjr/work/node/process-2.js 2: one 3: two=three 4: four

A Simple JavaScript Program Using Functions Running in Node

A Simple JavaScript Program (using functions) Program: \NTPCUG_Node\Functions\ functions.js Code editor: Notepad++ (free download) Steps taken: 1.Create the program in Notepad++ 2.Save the program as functions.js in the folder \NTPCUG_Node\Functions 3.Select the Command Prompt from the Start Menu 4.Enter cd\ntpcug_node\functions 5.Type: node functions.js 6.The program will execute …

A program to simulate the roll of a die and to evaluate that roll: 3, 4, 6 -> Great roll! 1 -> Terrible roll! Otherwise -> Ok roll.

Structured Walkthru: A JavaScript Program employing Functions

A JavaScript Program Demonstrating an Object

A JavaScript Program demonstrating a JavaScript Object

Structured Walkthru: A JavaScript Program using an Object

USING MULTIPLE FILES Objects group related data and behavior into a container called an “object”. To hide complexity – Use objects – Use multiple source code files to build an application A file may contain the definition of one or more objects No limit on number of files in an application

Multiple Files Object.js Program.js (main program – controller) dice.js (code related to rolling dice) Both files in the same folder: \ntpcug_node\multiple

Loading a file Require keyword – used to load a file All properties and methods are hidden by default in a loaded file Inside a called program, you have to explicitly tell node what you want to make available to calling programs Use the node “exports” object to identify what you want to expose Add a “die” property to the exports object – exports.die = die; To gain access to the exported members in the “required” program, place the “required” object into a variable in the calling program – var dice = require(“./dice”); To access the “die” object in the “dice” object – var die = dice.die;

USING MULTIPLE FILES IMPORTANT CONCEPTS: Called program exports object Calling program require keyword Accessing objects w/in called program

Structured Walkthru: Using Multiple Files in Javascript

A MORE COMPLEX FILE STRUCTURE AND INTRODUCTION TO TESTING

A Gradebook Program Given a set of scores for a student (87, 92, 72, 100, etc) calculate the average grade and assign a letter grade. Folder Structure: Gradebook Tests Lib ( application libraries) In c:\ntpcug_node mkdir gradebook In c:\ntpcug_node\gradebook (cd gradebook) mkdir tests mkdir lib

Test-Driven Development Nodeunit – a unit testing package for Node.js Install nodeunit using the NPM (Node Package Manager) – in gradebook: > npm install –g nodeunit Nodeunit looks for tests in the “tests” folder No tests available …

Tests are assertions about the data in a program Tests are written in the gradebook/test folder They require programs in the /gradebook folder

Create a file containing the gradeBook object in the \gradebook\lib folder (grades.js). Create a gradeTests.js file in the \gradebook\tests folder.

gradebook folder (tests folder) gradeTests.js lib folder grades.js (gradebook object)

Write a test first (in testGrades.js) It will fail (no addGrade method, no count) But that’s OK!

Structured Walkthru(s) grades.js – contains gradeBook object gradeTests.js – contains tests (assertions) about methods and properties of gradeBook object program.js – enter test scores from the command prompt line

WEBSITE

Node as a web server Node.js can function as a web server You can build websites and web applications Expressjs is a scaffolding tool It can be used to build a basic website See expressjs.com

Build a website Install expressjs – npm install express Modify website/program.js Start the server –...\website node program.js – Should produce Starting message …

Using any web browser, access localhost:3000 – (server is listening on port 3000) Response indicates root was accessed but site was unable to handle request Use CTRL-C to exit the server …

Modify program.js to handle an empty request on port 3000 Restart the server Access the site at localhost:3000 See response: Add

Pass a number of grades to a different URL Have the server respond with a letter grade – localhost:3000/grade?grades=100,90,80,95 – Query string

Server code to handle request of localhost:3000/grade?grades= … Add

Final result!

FINIS