Client Side JavaScript and AJAX

Size: px
Start display at page:

Download "Client Side JavaScript and AJAX"

Transcription

1 Client Side JavaScript and AJAX

2 Client side javascript is JavaScript that runs in the browsers of people using your site. So far all the JavaScript code we've written runs on our node.js server. This is called server side JavaScript. However we send HTML and CSS over to the browser of people using our website. This is called client side code, as it is processed by the "clients of our website". We can also send over JavaScript files that will be processed by the browsers of our users. This is known as client side JavaScript, and before node.js came out this is actually how one almost always used JavaScript. Client Side JavaScript Server Side JavaScript

3 JavaScript files are sent to the client just like other static assets such as CSS and Images JavaScript files are sent as is (statically) to the client. Thus they are similar to CSS files and images. Since they are sent to the client, the code inside of them is visible to the whole world, so they are considered "public". Lets make a folder for our JavaScript files. Since its public, it will go in the public folder under the root directory. Lets make a new folder called js, which is short for "JavaScript". Now that we have a folder for JavaScript, lets put some in it! The first JavaScript we'll put in it won't be our own. Once again, we'll be smart programmers and leverage the work done by others. In this case, we are going to use a very popular JavaScript library called jquery.

4 jquery is a popular client side JavaScript library that makes doing complicated things easy jquery has been around for a while and has a collection of tools and functions that make doing what used to be really complicated, very easy. Just like the express node module made making a nodejs web server really easy, jquery makes interacting with the website using client side JavaScript very easy. Lets go over to so we can get the latest version!

5 There are a couple of options here. The first is for "production", and this is minified and Gzipped. What this means is the JavaScript code has been compressed to use the least possible space and still work--although the code looks like gibberish to people. Minifying and Gzipping are what most professional websites do as they have less to send over the internet when somebody visits their page, saving them server time and money. We'll use the development version so that its friendlier for us humans as we develop. Its still relatively small and we are not too concerned about tweaking every element of performance for now. Go ahead and select the DEVELOPMENT version, and then click the download button.

6 If it brings up a file download, go ahead and save it in your newly created js folder. If instead your browser just opens the file, go ahead and select all the JavaScript code (ctrl+a is one way to do it) and paste it into your text editor. Then save this file with the same filename as in the browser path. Besides jquery we will want our JavaScript file. Let's make a new file also in the js folder called site.js. For now, put the following contents in it: $(function() { $('img').click(function() { alert('image Clicked!'); While the syntax may look familiar, some of the functions may not. And what's up with the dollar sign? We'll cover that in a bit but for now trust me!

7 JavaScript files are included with tags, similar to how CSS files are included Now that we have our two client side JavaScript files, lets tell our web page to use them! Just like we add tags in the <head> part of the HTML to include CSS, we'll add <script> tags that will pull in our JavaScript. You can put the <script> tags in the <head> part of the HTML, and this is how many people do it. However to ensure our JavaScript is only processed after the page has been loaded, we'll add them as the very last thing in the <body> section of our HTML. Go ahead and make the following modification to hello.ejs which you'll remember is the main view in our views folder. Remember to only add the code in the green. The code in black is old code and shown just to help you see where in the code changes are being made. <script src="/js/jquery js"></script> <script src="/js/site.js"></script> </body> </html> Remember that since we set up express to serve statically out of our public folder, the url we specify for the JavaScript file omits the /public.

8 So far we've only modified JavaScript and EJS files, both of which are part of views and not the server. So we don't need to restart our server. We can simply reload our page at You won't notice any changes right away, but if you did everything correctly and you click on an image, you should see an alert! If things are not working correctly, you can use developer tools, such as Firefox's firebug, chrome developer tools, or Internet Explorer 9's developer tools to debug. The most helpful things to try are to bring up the network information and make sure your JavaScript files are being sent to the browser, and to bring up the JavaScript console and look for errors.

9 The $ is overloaded (repurposed) for jquery. One use is to protect our code from interfering with other code Ok let's dive into what we did here! Our first line started with a function call whose named seemed to just be the dollar sign. This is actually legal JavaScript and jquery piggybacks off the dollar sign. $(function() { Here we pass a single argument to the dollar sign function, and that argument is a function we defined. For reasons I won't go into too deeply, we want all of our code to be within a function. One important reason for this is JavaScript variable names outside of functions are what is known as globally scoped. So if two different JavaScript files use the same variable or function name, they could interfere with each other causing lots of headaches. By putting our stuff inside a function, its isolated from messing up other code. By taking that function and passing it to jquery, it will execute it after everything (including itself) has properly loaded.

10 The $ can also be used to locate HTML elements and return them as objects with tons of extra capabilities. $('img').click(function() { Here we are doing two things. The first thing is finding an image element, and then the next is defining code to run when it is clicked. jquery finds things using selectors. jquery selectors are very similar to CSS selectors, and that is how we'll be using them. Selectors are strings that are passed as an argument to the dollar sign function. Here we pass the selector for image elements. When we run a selector it will find all elements on the page that match the selector and put them into a node set. This set has an object for each element, with a bunch of JavaScript magic available for us. We can also treat the set like its first element. In this case we are acting on the first image found. When we call the click function on a jquery node we can pass it a function containing the code to run when the found (selected) element is clicked. alert('image Clicked!'); The code we have run when the first image clicked is an alert. Professional sites stay away from alerts, but they are quick ways to have the browser display a pop up message. In this case we have the browser pop up the message "Image Clicked".

11 jquery can also be used to add HTML on the fly Popping up messages is ok, but what is really cool is when you use jquery to adjust the actual HTML of the website. One thing we can do is append (add) html using jquery's append method. Let's replace the body of our image click code in our site.js file to append some html rather than show an alert: $(function() { $('img').click(function() { alert('image Clicked!'); $(this).parent().append('<h3>you clicked on the image</h3>'); Now refresh the page and try clicking on the image! Click it a few times! See what happens!

12 See the HTML being added! Let's dive into what we did. $(this).parent().append('<h3>you clicked on the image</h3>'); First we called the dollar sign function on this. "this" is a JavaScript keyword that refers to the currently executing scope. When used with the dollar sign inside a function being passed as an argument to click(), it refers to the element that was clicked. In this case, it will be the clicked image. Then we call parent() to get the parent of the element clicked. We want the image's parent because when we append HTML it is added as the tag's contents, or conceptually between the opening and closing tags. However we don't want to add things inside the image tag, but rather along side it. So we get the images parent. Lastly we use the append() function to add HTML. We passed to this function the HTML we wanted added.

13 jquery can modify existing HTML Things got a bit out of control with our message. Let use some flow control to tame it. Just like we have if statements and variables on the server, we can use them in our client side JavaScript too. Let's beef up our click function, including declaring a variable before it that we can use: $(function() { var numclicks = 0; $('img').click(function() { var $parent = $(this).parent(); var $h3 = $parent.find('h3'); numclicks = numclicks + 1; if (!$h3.length === 0) { $(this).parent().append('<h3>you clicked on the image</h3>'); $parent.append('<h3>you clicked on the image</h3>'); } else { $h3.html('you clicked '+numclicks+' times'); } Now once again refresh and try clicking the image a few times.

14 Look at that, the count keeps changing! We are modifying the HTML on the site. Let's dive into what we did. var numclicks = 0; Here we declared a variable to keep track of the number of times the image has been clicked. Since we declared it before the function we made for the click, it can be used inside that function.

15 var $parent = $(this).parent(); Inside our click function we declared a variable named $parent to hold the result of finding the parent element of what was clicked on. I started the name with a dollar sign to remind me its holding a jquery reference to an element. We made this variable because we use the parent in two places in our code, and we want to minimize duplicated code--especially jquery selectors. var $h3 = $parent.find('h3'); Here we use the find() function, which runs a jquery selector starting from the element from which the function is called. In this case, we are looking for any <h3> elements that are within the $parent element. We store the result in a variable because we use it more than once as well. numclicks = numclicks + 1; Here we are incrementing, or adding one, to the variable where we are keeping track of the number of clicks.

16 if ($h3.length === 0) { Here we are using the if statement for flow control, with the check being to see if the length of the result of looking for <h3> elements--which we've saved in the $h3 variable--is zero. Remember that jquery returns a set of all elements that match. If no match, it will return an empty set with a length property of zero. So here we are making sure we have at least one match. The way our code is written, we should only ever have zero or one matches. $parent.append('<h3>you clicked on the image</h3>'); This is the code that will run if the check evaluates to true, meaning that no <h3> elements were found within $parent. This means we haven't added our h3 elements yet, so we go ahead and do that.

17 } else { This is part of the if statement flow control, seperating the code to run when the check evaluates to true from the code to run when it evaluates to false. $h3.html('you clicked '+numclicks+' times'); This code run if we've found an h3 element. We know the result will be stored in the $h3 variable so we use that. We then use jquery's html() function to set the html of the <h3> element. Here we use the number of clicks to display how many times the image has been clicked. } Lastly this closing curly brace indicates the end of the else block, which contained the code to execute if the if statement check evaluated false. If there was any code that followed this in the function block (right now there isn't) it would execute no matter what the check in the if statement evaluated to.

18

19 AJAX lets you send information to and from the server can client Go ahead and refresh the page. You'll see our message disappear. Click on the image and it will say it has been pressed 1 time. Lies! You've clicked it more than once! Let's have our server keep track of the number of clicks. That way it will be unaffected if you refresh the page, use another browser window or other trickery. To interact with our server we'll need a way for our client side JavaScript to talk to our server side javascript. We can do this using something called AJAX. AJAX stands for asynchronous JavaScript and XML--but don't worry about it. These are just the technologies used to make AJAX possible. Both jquery and node.js make dealing with AJAX very easy. At its heart, AJAX sends a request to the server, and then the server optionally sends back a response. This response can be data in the form of JSON, or actual HTML to render. Since we just need the number of clicks, we'll start by sending that back as JSON. We'll let the server know a click happened via an AJAX post request. AJAX Client Side JavaScript Server Side JavaScript

20 Server routes that handle AJAX requests are very similar to those that handle browser gets. Let's start by creating a variable on server to keep track of the number of clicks, and adding a route that will process a click and send back the new total. We''ll add the new variable and route to our server.js file. We can put it at the end of the routes, just above the catch all. Its very similar to other routes, but with two exceptions. First we use app.post() instead of app.get(). We'll be posting to the server which is a protocol generally used when the request will modify something on the server. Second, instead of res.render() to display a view we use res.json() to send back data as JSON. var numclicks = 0; app.post('/api/processclick', function(req, res) { numclicks = numclicks+1; var result = {numclicks: numclicks}; res.json(result); app.get('*', function(req, res) { res.send('i think you messed up the url!'); Note we prefixed our route with "api", which stands for application programming interface, because a program's api is a way to interact with it using AJAX requests. This helps us organize things.

21 Let's make our lives easier by creating an HTML element in our view whose HTML we'll change with the result of AJAX calls. This way we don't have to check for it all the time and/or add it ourselves if its not there. To make the element easy to find with jquery, we'll give it a class. Lets add an empty div with the class "clicks". Make the following change to the hello.ejs view: <img class="cool" src="/images/icecream.jpg" /> <div class="clicks"></div> <br /> <a href="/bye">say Goodbye</a>

22 Now in our client side JavaScript, lets change our click function to send a POST request to the server as well as process the JSON response--with the number of clicks--received. We'll do this with jquery's post() function, which we can call right from the dollar sign. The first argument is the route to post to, there is an optional second argument of data to send that we'll ignore for now, and then the next argument is the function to execute if the post is successful and the response is received. We want to post that a click happened, then get the total number of clicks sent back from the server, and put them in the div we added to our view. Let's go ahead and modify our click handler in site.js. First lets delete the stuff we don't need. $(function() { var numclicks = 0; $('img').click(function() { var $parent = $(this).parent(); var $h3 = $parent.find('h3'); numclicks = numclicks + 1; if (!$h3.length === 0) { $(this).parent().append('<h3>you clicked on the image</h3>'); $parent.append('<h3>you clicked on the image</h3>'); } else { $h3.html('you clicked '+numclicks+' times'); }

23 And now we'll add in our AJAX call and improved click handling! $(function() { $('img').click(function() { var $clicks = $('.clicks'); $.post('/api/processclick', function(response) { $clicks.html('image has been clicked '+response.numclicks+' times'); Great! Now since we changed the server (by modifying server.js) we'll need to restart our server $node server.js Refresh the page and click on the image a few times. Then close the window and reload the page and click some more. Then open a new browser tab and also go to and click as well.

24 The clicks are being stored and sent back from the server without reloading the page! AJAX is working!

25

26 Let's go ahead and make our sentence generator use AJAX! This time we'll have it send back the HTML to display when the form is processed. Since we want the form to be processed via AJAX, we want to remove its action. We'll also want to add a place for the results to go that will be easy for jquery to find. Lastly, we'll want the sentence generator view to use some client side JavaScript we'll write. Let's plan on calling that file sentenceinput.js. Go ahead and make the following changes to our sentence generator input view, which is sentenceinput.ejs. While we are in there, we'll also make the HTML officially valid with <!DOCTYPE>, <html>, <head>, and <body> tags. <!DOCTYPE html> <html> <head> </head> <body> <form action="/sentenceoutput"> Name: <input name="name" type="text" /> <br /> Place: <input name="place" type="text" /> <br /> <button type="submit">submit</button> </form> <div class="output"></div> <script src="/js/jquery js"></script> <script src="/js/sentenceinput.js"></script> </body> </html>

27 We'll want a route for the AJAX to send the sentence generator parameters and retrieve the generated sentence HTML. Since our old sentence output route did the work and rendered HTML, we can use it almost as is for an AJAX request that doesn't change anything on the server and returns HTML. We could even leave it exactly as it is, but for organization's sake lets change the route to start with api. Go ahead and change the route name in server.js: app.get('/sentenceoutput', function(req, res) { app.get('/api/sentence', function(req, res) { Since we modified the server we'll need to restart it. $node server.js

28 Now we need to create that JavaScript file we planned to use to interact with the sentence input view. This file needs to collect the information, send it via AJAX to our sentence route, and then add in the sentence HTML sent back. Go ahead and create sentenceinput.js in the js folder and populate it with this code: $(function() { $('button').click(function() { var name = $('input[name="name"]').val(); var place = $('input[name="place"]').val(); $.get('/api/sentence', {name: name, place: place}, function(response) { $('.output').html(response); return false; Before we try out our new code, lets go ahead and dive into what we did.

29 $(function() { Once again we put all our code inside a function, this way it doesn't interact strangely with other JavaScript files. $('button').click(function() { And here we are searching for a <button> element using jquery, and then specifying code for to run using a function we create as an argument to the jquery click() function. var name = $('input[name="name"]').val(); Here we are looking for an <input> element that has a name attribute with the value "name". When we find that element, we use the val() function to retrieve its current value--which since its a text box will be what is entered in the input. We store this value in a variable for easy use later. var place = $('input[name="place"]').val(); And here we also save into a variable the value of the input with the name place.

30 $.get('/api/sentence', {name: name, place: place}, function(response) { Here we are using jquery's AJAX get() function, and telling it to hit the route "/api/sentence". We also tell it to send some data: a parameter name with the value of the name variable that we set earlier from the value of the name input, and a parameter place with the value of the place variable we set earlier from the value of the place input. Lastly, we define the code to execute for the response sent when the AJAX call finishes. $('.output').html(response); This is where we take the response--which since we are having our server do render() instead of json() will be pure HTML--and set it as the HTML contents of the element that has the class "output". return false; We put a "return false;" at the end of our click function to stop the browser from doing what clicking would normally do: submit the form. Its our way of saying "ignore normal html click stuff, and just do what we said".

31 Whew, that was a lot! But lets try it out. Now we should be able to use our sentence generator without the form submitting to and loading another page. Go ahead and fill out the inputs and click submit! Now click submit again! No page reloading happening here. It talks to the server and updates the display using AJAX!

32

33 The last step is deploy our latest changes to our appfog server so everybody on the internet can use our new AJAX enabled web application! $ af update myawesomewebsite Uploading Application: Checking for available resources: OK Processing resources: OK Packing application: OK Uploading (104K): OK Push Status: OK Stopping Application 'myawesomewebsite': OK Staging Application 'myawesomewebsite': OK Starting Application 'myawesomewebsite': OK Now that we see it started ok, go ahead and go to your website url. Remember if you forget your website name or url you can use the command af apps.

34 New code is running live! Now everybody can enjoy our latest changes!

We are assuming you have node installed!

We are assuming you have node installed! Node.js Hosting We are assuming you have node installed! This lesson assumes you've installed and are a bit familiar with JavaScript and node.js. If you do not have node, you can download and install it

More information

Interactive Web Application

Interactive Web Application Interactive Web Application This lesson builds on previous lessons With this lesson we will be picking up right where we left off from our Node.js Hosting lesson. The presentation can be found at http://rockymountaincoding.org.

More information

BEGINNER PHP Table of Contents

BEGINNER PHP Table of Contents Table of Contents 4 5 6 7 8 9 0 Introduction Getting Setup Your first PHP webpage Working with text Talking to the user Comparison & If statements If & Else Cleaning up the game Remembering values Finishing

More information

Django urls Django Girls Tutorial

Django urls Django Girls Tutorial Django urls Django Girls Tutorial about:reader?url=https://tutorial.djangogirls.org/en/django_urls/ 1 di 6 13/11/2017, 20:01 tutorial.djangogirls.org Django urls Django Girls Tutorial DjangoGirls 6-8 minuti

More information

Human-Computer Interaction Design

Human-Computer Interaction Design Human-Computer Interaction Design COGS120/CSE170 - Intro. HCI Instructor: Philip Guo Lab 6 - Connecting frontend and backend without page reloads (2016-11-03) by Michael Bernstein, Scott Klemmer, and Philip

More information

CSS BASICS. selector { property: value; }

CSS BASICS. selector { property: value; } GETTING STARTED 1. Download the Juice-o-Rama 11-01 zip file from our course dropbox. 2. Move the file to the desktop. You have learned two ways to do this. 3. Unzip the file by double clicking it. You

More information

c122mar413.notebook March 06, 2013

c122mar413.notebook March 06, 2013 These are the programs I am going to cover today. 1 2 Javascript is embedded in HTML. The document.write() will write the literal Hello World! to the web page document. Then the alert() puts out a pop

More information

JAVASCRIPT - CREATING A TOC

JAVASCRIPT - CREATING A TOC JAVASCRIPT - CREATING A TOC Problem specification - Adding a Table of Contents. The aim is to be able to show a complete novice to HTML, how to add a Table of Contents (TOC) to a page inside a pair of

More information

Web API Lab. The next two deliverables you shall write yourself.

Web API Lab. The next two deliverables you shall write yourself. Web API Lab In this lab, you shall produce four deliverables in folder 07_webAPIs. The first two deliverables should be pretty much done for you in the sample code. 1. A server side Web API (named listusersapi.jsp)

More information

Ruby on Rails Welcome. Using the exercise files

Ruby on Rails Welcome. Using the exercise files Ruby on Rails Welcome Welcome to Ruby on Rails Essential Training. In this course, we're going to learn the popular open source web development framework. We will walk through each part of the framework,

More information

Why Use A JavaScript Library?

Why Use A JavaScript Library? Using JQuery 4 Why Use A JavaScript Library? Okay, first things first. Writing JavaScript applications from scratch can be difficult, time-consuming, frustrating, and a real pain in the, ahem, britches.

More information

THE PRAGMATIC INTRO TO REACT. Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX

THE PRAGMATIC INTRO TO REACT. Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX THE PRAGMATIC INTRO TO REACT Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX REACT "A JavaScript library for building user interfaces" But first... HOW WE GOT HERE OR: A BRIEF

More information

USING DRUPAL. Hampshire College Website Editors Guide https://drupal.hampshire.edu

USING DRUPAL. Hampshire College Website Editors Guide https://drupal.hampshire.edu USING DRUPAL Hampshire College Website Editors Guide 2014 https://drupal.hampshire.edu Asha Kinney Hampshire College Information Technology - 2014 HOW TO GET HELP Your best bet is ALWAYS going to be to

More information

Chapter 1 Getting Started

Chapter 1 Getting Started Chapter 1 Getting Started The C# class Just like all object oriented programming languages, C# supports the concept of a class. A class is a little like a data structure in that it aggregates different

More information

Arduino IDE Friday, 26 October 2018

Arduino IDE Friday, 26 October 2018 Arduino IDE Friday, 26 October 2018 12:38 PM Looking Under The Hood Of The Arduino IDE FIND THE ARDUINO IDE DOWNLOAD First, jump on the internet with your favorite browser, and navigate to www.arduino.cc.

More information

Introduction to Git and GitHub for Writers Workbook February 23, 2019 Peter Gruenbaum

Introduction to Git and GitHub for Writers Workbook February 23, 2019 Peter Gruenbaum Introduction to Git and GitHub for Writers Workbook February 23, 2019 Peter Gruenbaum Table of Contents Preparation... 3 Exercise 1: Create a repository. Use the command line.... 4 Create a repository...

More information

Exercise 1 Using Boolean variables, incorporating JavaScript code into your HTML webpage and using the document object

Exercise 1 Using Boolean variables, incorporating JavaScript code into your HTML webpage and using the document object CS1046 Lab 5 Timing: This lab should take you approximately 2 hours. Objectives: By the end of this lab you should be able to: Recognize a Boolean variable and identify the two values it can take Calculate

More information

Ad Muncher's New Interface Layout

Ad Muncher's New Interface Layout Ad Muncher's New Interface Layout We are currently working on a new layout for Ad Muncher's configuration window. This page will document the new layout. Interface Layout Objectives The ability to modify

More information

An attribute used in HTML that is used for web browsers screen reading devices to indicate the presence and description of an image Module 4

An attribute used in HTML that is used for web browsers screen reading devices to indicate the presence and description of an image Module 4 HTML Basics Key Terms Term Definition Introduced In A tag used in HTML that stands for Anchor and is used for all types of hyperlinks Module 3 A tag used in HTML to indicate a single line break

More information

Formal Methods of Software Design, Eric Hehner, segment 24 page 1 out of 5

Formal Methods of Software Design, Eric Hehner, segment 24 page 1 out of 5 Formal Methods of Software Design, Eric Hehner, segment 24 page 1 out of 5 [talking head] This lecture we study theory design and implementation. Programmers have two roles to play here. In one role, they

More information

CSE 115. Introduction to Computer Science I

CSE 115. Introduction to Computer Science I CSE 115 Introduction to Computer Science I Road map Review JSON Chat App - Part 1 AJAX Chat App - Part 2 Front End JavaScript first Web Page my content

More information

What is Node.js? Tim Davis Director, The Turtle Partnership Ltd

What is Node.js? Tim Davis Director, The Turtle Partnership Ltd What is Node.js? Tim Davis Director, The Turtle Partnership Ltd About me Co-founder of The Turtle Partnership Working with Notes and Domino for over 20 years Working with JavaScript technologies and frameworks

More information

6.001 Notes: Section 6.1

6.001 Notes: Section 6.1 6.001 Notes: Section 6.1 Slide 6.1.1 When we first starting talking about Scheme expressions, you may recall we said that (almost) every Scheme expression had three components, a syntax (legal ways of

More information

CIW 1D CIW JavaScript Specialist.

CIW 1D CIW JavaScript Specialist. CIW 1D0-635 CIW JavaScript Specialist http://killexams.com/exam-detail/1d0-635 Answer: A QUESTION: 51 Jane has created a file with commonly used JavaScript functions and saved it as "allfunctions.js" in

More information

CSE 115. Introduction to Computer Science I

CSE 115. Introduction to Computer Science I CSE 115 Introduction to Computer Science I Midterm Midterm will be returned no later than Monday. We may make midterm pickup available before then. Stay tuned. Midterm results Module 1 Module 2 Overall

More information

Siteforce Pilot: Best Practices

Siteforce Pilot: Best Practices Siteforce Pilot: Best Practices Getting Started with Siteforce Setup your users as Publishers and Contributors. Siteforce has two distinct types of users First, is your Web Publishers. These are the front

More information

How to get a perfect 100 in Google PageSpeed Insights

How to get a perfect 100 in Google PageSpeed Insights How to get a perfect 100 in Google PageSpeed Insights And what might happen if you don't Follow Along http://goo.gl/fqfwyj @mcarper @NickWilde1990 Your site just went live after being under construction

More information

At the Forge RJS Templates Reuven M. Lerner Abstract The power of Ajax to fetch and run JavaScript generated by your server-side language. The past few months, I've written a number of articles in this

More information

At the Forge JavaScript Reuven M. Lerner Abstract Like the language or hate it, JavaScript and Ajax finally give life to the Web. About 18 months ago, Web developers started talking about Ajax. No, we

More information

this is a cat CS50 Quiz 1 Review

this is a cat CS50 Quiz 1 Review CS50 Quiz 1 Review this is a cat CS50 Quiz 1 Review JavaScript CS50 Quiz 1 Review first, recall from zamyla Remember, PHP is run server-side. The HTML output of this PHP code is sent to the user. Server

More information

INTRODUCTION TO JAVASCRIPT

INTRODUCTION TO JAVASCRIPT INTRODUCTION TO JAVASCRIPT Overview This course is designed to accommodate website designers who have some experience in building web pages. Lessons familiarize students with the ins and outs of basic

More information

Introduction, Notepad++, File Structure, 9 Tags, Hyperlinks 1

Introduction, Notepad++, File Structure, 9 Tags, Hyperlinks 1 Introduction, Notepad++, File Structure, 9 Tags, Hyperlinks 1 Introduction to HTML HTML, which stands for Hypertext Markup Language, is the standard markup language used to create web pages. HTML consists

More information

JQuery and Javascript

JQuery and Javascript JQuery and Javascript Javascript - a programming language to perform calculations/ manipulate HTML and CSS/ make a web page interactive JQuery - a javascript framework to help manipulate HTML and CSS JQuery

More information

From time to time Google changes the way it does things, and old tutorials may not apply to some new procedures.

From time to time Google changes the way it does things, and old tutorials may not apply to some new procedures. From time to time Google changes the way it does things, and old tutorials may not apply to some new procedures. This is another tutorial which, in about 6 months, will probably be irrelevant. But until

More information

contain a geometry package, and so on). All Java classes should belong to a package, and you specify that package by typing:

contain a geometry package, and so on). All Java classes should belong to a package, and you specify that package by typing: Introduction to Java Welcome to the second CS15 lab! By now we've gone over objects, modeling, properties, attributes, and how to put all of these things together into Java classes. It's perfectly okay

More information

Week - 01 Lecture - 04 Downloading and installing Python

Week - 01 Lecture - 04 Downloading and installing Python Programming, Data Structures and Algorithms in Python Prof. Madhavan Mukund Department of Computer Science and Engineering Indian Institute of Technology, Madras Week - 01 Lecture - 04 Downloading and

More information

Backend Development. SWE 432, Fall Web Application Development

Backend Development. SWE 432, Fall Web Application Development Backend Development SWE 432, Fall 2018 Web Application Development Review: Async Programming Example 1 second each Go get a candy bar Go get a candy bar Go get a candy bar Go get a candy bar Go get a candy

More information

Web API Lab folder 07_webApi : webapi.jsp your testapijs.html testapijq.html that works functionally the same as the page testapidomjs.

Web API Lab folder 07_webApi : webapi.jsp your testapijs.html testapijq.html that works functionally the same as the page testapidomjs. Web API Lab In this lab, you will produce three deliverables in folder 07_webApi : 1. A server side Web API (named webapi.jsp) that accepts an input parameter, queries your database, and then returns a

More information

Developing Ajax Applications using EWD and Python. Tutorial: Part 2

Developing Ajax Applications using EWD and Python. Tutorial: Part 2 Developing Ajax Applications using EWD and Python Tutorial: Part 2 Chapter 1: A Logon Form Introduction This second part of our tutorial on developing Ajax applications using EWD and Python will carry

More information

Clearing Your Browser Cache in: Internet Explorer 7 or 8

Clearing Your Browser Cache in: Internet Explorer 7 or 8 Clearing Your Browser Cache in: Internet Explorer 7 or 8 In this short lesson, you will learn the steps necessary to empty your browser cache in Internet Explorer 7 or 8. Users of version 6 or earlier

More information

Controlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser.

Controlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser. Controlled Assessment Task Question 1 - Describe how this HTML code produces the form displayed in the browser. The form s code is displayed in the tags; this creates the object which is the visible

More information

Chrome if I want to. What that should do, is have my specifications run against four different instances of Chrome, in parallel.

Chrome if I want to. What that should do, is have my specifications run against four different instances of Chrome, in parallel. Hi. I'm Prateek Baheti. I'm a developer at ThoughtWorks. I'm currently the tech lead on Mingle, which is a project management tool that ThoughtWorks builds. I work in Balor, which is where India's best

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

Get JAVA. I will just tell you what I did (on January 10, 2017). I went to:

Get JAVA. I will just tell you what I did (on January 10, 2017). I went to: Get JAVA To compile programs you need the JDK (Java Development Kit). To RUN programs you need the JRE (Java Runtime Environment). This download will get BOTH of them, so that you will be able to both

More information

AngularJS Intro Homework

AngularJS Intro Homework AngularJS Intro Homework Contents 1. Overview... 2 2. Database Requirements... 2 3. Navigation Requirements... 3 4. Styling Requirements... 4 5. Project Organization Specs (for the Routing Part of this

More information

PROFESSOR: Last time, we took a look at an explicit control evaluator for Lisp, and that bridged the gap between

PROFESSOR: Last time, we took a look at an explicit control evaluator for Lisp, and that bridged the gap between MITOCW Lecture 10A [MUSIC PLAYING] PROFESSOR: Last time, we took a look at an explicit control evaluator for Lisp, and that bridged the gap between all these high-level languages like Lisp and the query

More information

JavaScript CS 4640 Programming Languages for Web Applications

JavaScript CS 4640 Programming Languages for Web Applications JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation

More information

Adafruit WebIDE. Created by Tyler Cooper. Last updated on :29:47 PM UTC

Adafruit WebIDE. Created by Tyler Cooper. Last updated on :29:47 PM UTC Adafruit WebIDE Created by Tyler Cooper Last updated on 2018-03-12 08:29:47 PM UTC Guide Contents Guide Contents Overview Installation Easy installation: Manual Installation: Uninstallation: Getting Started

More information

6.170 Laboratory in Software Engineering Java Style Guide. Overview. Descriptive names. Consistent indentation and spacing. Page 1 of 5.

6.170 Laboratory in Software Engineering Java Style Guide. Overview. Descriptive names. Consistent indentation and spacing. Page 1 of 5. Page 1 of 5 6.170 Laboratory in Software Engineering Java Style Guide Contents: Overview Descriptive names Consistent indentation and spacing Informative comments Commenting code TODO comments 6.170 Javadocs

More information

The Stack, Free Store, and Global Namespace

The Stack, Free Store, and Global Namespace Pointers This tutorial is my attempt at clarifying pointers for anyone still confused about them. Pointers are notoriously hard to grasp, so I thought I'd take a shot at explaining them. The more information

More information

JavaScript: Getting Started

JavaScript: Getting Started coreservlets.com custom onsite training JavaScript: Getting Started Slides 2016 Marty Hall, hall@coreservlets.com For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial

More information

Quick.JS Documentation

Quick.JS Documentation Quick.JS Documentation Release v0.6.1-beta Michael Krause Jul 22, 2017 Contents 1 Installing and Setting Up 1 1.1 Installation................................................ 1 1.2 Setup...................................................

More information

In our first lecture on sets and set theory, we introduced a bunch of new symbols and terminology.

In our first lecture on sets and set theory, we introduced a bunch of new symbols and terminology. Guide to and Hi everybody! In our first lecture on sets and set theory, we introduced a bunch of new symbols and terminology. This guide focuses on two of those symbols: and. These symbols represent concepts

More information

c122jan2714.notebook January 27, 2014

c122jan2714.notebook January 27, 2014 Internet Developer 1 Start here! 2 3 Right click on screen and select View page source if you are in Firefox tells the browser you are using html. Next we have the tag and at the

More information

Without further ado, let s go over and have a look at what I ve come up with.

Without further ado, let s go over and have a look at what I ve come up with. JIRA Integration Transcript VLL Hi, my name is Jonathan Wilson and I m the service management practitioner with NHS Digital based in the United Kingdom. NHS Digital is the provider of services to the National

More information

Manual Html Image Src Url Path Not Working

Manual Html Image Src Url Path Not Working Manual Html Image Src Url Path Not Working _img src="file:///absolute/path/to/rails-app/public/image.png" alt="blah" /_. However i obviously want a relative path instead. Where is the relative path going.

More information

CSCU9B2 Practical 1: Introduction to HTML 5

CSCU9B2 Practical 1: Introduction to HTML 5 CSCU9B2 Practical 1: Introduction to HTML 5 Aim: To learn the basics of creating web pages with HTML5. Please register your practical attendance: Go to the GROUPS\CSCU9B2 folder in your Computer folder

More information

Azon Master Class. By Ryan Stevenson Guidebook #5 WordPress Usage

Azon Master Class. By Ryan Stevenson   Guidebook #5 WordPress Usage Azon Master Class By Ryan Stevenson https://ryanstevensonplugins.com/ Guidebook #5 WordPress Usage Table of Contents 1. Widget Setup & Usage 2. WordPress Menu System 3. Categories, Posts & Tags 4. WordPress

More information

Tips from the experts: How to waste a lot of time on this assignment

Tips from the experts: How to waste a lot of time on this assignment Com S 227 Spring 2018 Assignment 1 100 points Due Date: Friday, September 14, 11:59 pm (midnight) Late deadline (25% penalty): Monday, September 17, 11:59 pm General information This assignment is to be

More information

Monday. A few notes on homework I want ONE spreadsheet with TWO tabs

Monday. A few notes on homework I want ONE spreadsheet with TWO tabs CS 1251 Page 1 Monday Sunday, September 14, 2014 2:38 PM A few notes on homework I want ONE spreadsheet with TWO tabs What has passed before We ended last class with you creating a function called givemeseven()

More information

CS7026. Introduction to jquery

CS7026. Introduction to jquery CS7026 Introduction to jquery What is jquery? jquery is a cross-browser JavaScript Library. A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based

More information

XBMC. Ultimate Guide. HenryFord 3/31/2011. Feel free to share this document with everybody!

XBMC. Ultimate Guide. HenryFord 3/31/2011. Feel free to share this document with everybody! XBMC Ultimate Guide HenryFord 3/31/2011 Feel free to share this document with everybody! Contents Introduction... 2 XBMC... 3 Download and Install XBMC... 3 Setup the Sources... 3 Additional Settings...

More information

Lab 1 - Introduction to Angular

Lab 1 - Introduction to Angular Lab 1 - Introduction to Angular In this lab we will build a Hello World style Angular component. The key focus is to learn how to install all the required code and use them from the browser. We wont get

More information

Download, Install and Use Winzip

Download, Install and Use Winzip Download, Install and Use Winzip Something that you are frequently asked to do (particularly if you are in one of my classes) is to either 'zip' or 'unzip' a file or folders. Invariably, when I ask people

More information

Privacy and Security in Online Social Networks Department of Computer Science and Engineering Indian Institute of Technology, Madras

Privacy and Security in Online Social Networks Department of Computer Science and Engineering Indian Institute of Technology, Madras Privacy and Security in Online Social Networks Department of Computer Science and Engineering Indian Institute of Technology, Madras Lecture 07 Tutorial 2 Part 1 Facebook API Hi everyone, welcome to the

More information

Backend Development. SWE 432, Fall 2017 Design and Implementation of Software for the Web

Backend Development. SWE 432, Fall 2017 Design and Implementation of Software for the Web Backend Development SWE 432, Fall 2017 Design and Implementation of Software for the Web Real World Example https://qz.com/1073221/the-hackers-who-broke-into-equifax-exploited-a-nine-year-old-security-flaw/

More information

CSE 115. Introduction to Computer Science I

CSE 115. Introduction to Computer Science I CSE 115 Introduction to Computer Science I Road map Review Limitations of front-end sites Web servers Examples Review

More information

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments. Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led

More information

Linked Lists. What is a Linked List?

Linked Lists. What is a Linked List? Linked Lists Along with arrays, linked lists form the basis for pretty much every other data stucture out there. This makes learning and understand linked lists very important. They are also usually the

More information

Module 5 JavaScript, AJAX, and jquery. Module 5. Module 5 Contains 2 components

Module 5 JavaScript, AJAX, and jquery. Module 5. Module 5 Contains 2 components Module 5 JavaScript, AJAX, and jquery Module 5 Contains 2 components Both the Individual and Group portion are due on Monday October 30 th Start early on this module One of the most time consuming modules

More information

Article Buddy User Manual

Article Buddy User Manual Article Buddy User Manual Hello and thank you for buying Article Buddy. This guide right here focuses on the features of this absolutely amazing software and how to use it to its fullest. How Do You Use

More information

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style

More information

Tips from the experts: How to waste a lot of time on this assignment

Tips from the experts: How to waste a lot of time on this assignment Com S 227 Spring 2018 Assignment 1 80 points Due Date: Friday, February 2, 11:59 pm (midnight) Late deadline (25% penalty): Monday, February 5, 11:59 pm General information This assignment is to be done

More information

Using Development Tools to Examine Webpages

Using Development Tools to Examine Webpages Chapter 9 Using Development Tools to Examine Webpages Skills you will learn: For this tutorial, we will use the developer tools in Firefox. However, these are quite similar to the developer tools found

More information

JavaScript Functions, Objects and Array

JavaScript Functions, Objects and Array JavaScript Functions, Objects and Array Defining a Function A definition starts with the word function. A name follows that must start with a letter or underscore, followed by any number of letters, digits,

More information

Authoring World Wide Web Pages with Dreamweaver

Authoring World Wide Web Pages with Dreamweaver Authoring World Wide Web Pages with Dreamweaver Overview: Now that you have read a little bit about HTML in the textbook, we turn our attention to creating basic web pages using HTML and a WYSIWYG Web

More information

shortcut Tap into learning NOW! Visit for a complete list of Short Cuts. Your Short Cut to Knowledge

shortcut Tap into learning NOW! Visit  for a complete list of Short Cuts. Your Short Cut to Knowledge shortcut Your Short Cut to Knowledge The following is an excerpt from a Short Cut published by one of the Pearson Education imprints. Short Cuts are short, concise, PDF documents designed specifically

More information

Setting up a ColdFusion Workstation

Setting up a ColdFusion Workstation Setting up a ColdFusion Workstation Draft Version Mark Mathis 2000 all rights reserved mark@teratech.com 2 Setting up a ColdFusion workstation Table of Contents Browsers:...5 Internet Explorer:...5 Web

More information

UNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? editor editor Q.2: What do you understand by a web browser?

UNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? editor editor Q.2: What do you understand by a web browser? UNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? A 1: A text editor is a program that helps you write plain text (without any formatting) and save it to a file. A good example is

More information

CGS 3066: Spring 2015 JavaScript Reference

CGS 3066: Spring 2015 JavaScript Reference CGS 3066: Spring 2015 JavaScript Reference Can also be used as a study guide. Only covers topics discussed in class. 1 Introduction JavaScript is a scripting language produced by Netscape for use within

More information

Reading How the Web Works

Reading How the Web Works Reading 1.3 - How the Web Works By Jonathan Lane Introduction Every so often, you get offered a behind-the-scenes look at the cogs and fan belts behind the action. Today is your lucky day. In this article

More information

mid=81#15143

mid=81#15143 Posted by joehillen - 06 Aug 2012 22:10 I'm having a terrible time trying to find the Lightworks source code. I was under the impression that Lightworks was open source. Usually that means that it's possible

More information

Tools. SWE 432, Fall Design and Implementation of Software for the Web

Tools. SWE 432, Fall Design and Implementation of Software for the Web Tools SWE 432, Fall 2016 Design and Implementation of Software for the Web Today Before we can really make anything, there s a bunch of technical stuff to get out of the way Tools make our lives so much

More information

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style

More information

CIS 3308 Logon Homework

CIS 3308 Logon Homework CIS 3308 Logon Homework Lab Overview In this lab, you shall enhance your web application so that it provides logon and logoff functionality and a profile page that is only available to logged-on users.

More information

Lab 1: Getting Started with IBM Worklight Lab Exercise

Lab 1: Getting Started with IBM Worklight Lab Exercise Lab 1: Getting Started with IBM Worklight Lab Exercise Table of Contents 1. Getting Started with IBM Worklight... 3 1.1 Start Worklight Studio... 5 1.1.1 Start Worklight Studio... 6 1.2 Create new MyMemories

More information

extc Web Developer Rapid Web Application Development and Ajax Framework Using Ajax

extc Web Developer Rapid Web Application Development and Ajax Framework Using Ajax extc Web Developer Rapid Web Application Development and Ajax Framework Version 3.0.546 Using Ajax Background extc Web Developer (EWD) is a rapid application development environment for building and maintaining

More information

Google Earth: Significant Places in Your Life Got Maps? Workshop June 17, 2013

Google Earth: Significant Places in Your Life Got Maps? Workshop June 17, 2013 Google Earth: Significant Places in Your Life Got Maps? Workshop June 17, 2013 1. Open Google Earth. 2. Familiarize yourself with Google Earth s navigational features by zooming into Furman s campus, your

More information

6.001 Notes: Section 15.1

6.001 Notes: Section 15.1 6.001 Notes: Section 15.1 Slide 15.1.1 Our goal over the next few lectures is to build an interpreter, which in a very basic sense is the ultimate in programming, since doing so will allow us to define

More information

JavaScript Fundamentals_

JavaScript Fundamentals_ JavaScript Fundamentals_ HackerYou Course Syllabus CLASS 1 Intro to JavaScript Welcome to JavaScript Fundamentals! Today we ll go over what programming languages are, JavaScript syntax, variables, and

More information

Using AJAX to Easily Integrate Rich Media Elements

Using AJAX to Easily Integrate Rich Media Elements 505 Using AJAX to Easily Integrate Rich Media Elements James Monroe Course Developer, WWW.eLearningGuild.com The Problem: How to string together several rich media elements (images, Flash movies, video,

More information

An Illustrated Guide to Shell Magic: Standard I/O & Redirection

An Illustrated Guide to Shell Magic: Standard I/O & Redirection An Illustrated Guide to Shell Magic: Standard I/O & Redirection Created by Brennen Bearnes Last updated on 2015-03-03 05:15:07 PM EST Guide Contents Guide Contents Overview Input & Output Standard I/O

More information

Intro To Javascript. Intro to Web Development

Intro To Javascript. Intro to Web Development Intro To Javascript Intro to Web Development Preamble I don't like JavaScript But with JS your feelings don't matter. Browsers don't work well with any other language so you have to write code that either:

More information

WordPress is free and open source, meaning it's developed by the people who use it.

WordPress is free and open source, meaning it's developed by the people who use it. 1 2 WordPress Workshop by BBC July 2015 Contents: lorem ipsum dolor sit amet. page + WordPress.com is a cloudhosted service that runs WordPress where you can set up your own free blog or website without

More information

Session 6. JavaScript Part 1. Reading

Session 6. JavaScript Part 1. Reading Session 6 JavaScript Part 1 Reading Reading Wikipedia en.wikipedia.org/wiki/javascript Web Developers Notes www.webdevelopersnotes.com/tutorials/javascript/ JavaScript Debugging www.w3schools.com/js/js_debugging.asp

More information

MITOCW watch?v=kz7jjltq9r4

MITOCW watch?v=kz7jjltq9r4 MITOCW watch?v=kz7jjltq9r4 PROFESSOR: We're going to look at the most fundamental of all mathematical data types, namely sets, and let's begin with the definitions. So informally, a set is a collection

More information

Alert. In [ ]: %%javascript alert("hello");

Alert. In [ ]: %%javascript alert(hello); JavaScript V Alerts and Dialogs For many years, alerts and dialogs, which pop up over the browser, were popular forms of user interaction These days there are nicer ways to handle these interactions, collectively

More information

A demo Wakanda solution (containing a project) is provided with each chapter. To run a demo:

A demo Wakanda solution (containing a project) is provided with each chapter. To run a demo: How Do I About these examples In the Quick Start, you discovered the basic principles of Wakanda programming: you built a typical employees/companies application by creating the datastore model with its

More information

ChatScript Finaling a Bot Manual Bruce Wilcox, Revision 12/31/13 cs3.81

ChatScript Finaling a Bot Manual Bruce Wilcox, Revision 12/31/13 cs3.81 ChatScript Finaling a Bot Manual Bruce Wilcox, gowilcox@gmail.com Revision 12/31/13 cs3.81 OK. You've written a bot. It sort of seems to work. Now, before releasing it, you should polish it. There are

More information

DATABASE SYSTEMS. Introduction to web programming. Database Systems Course, 2016

DATABASE SYSTEMS. Introduction to web programming. Database Systems Course, 2016 DATABASE SYSTEMS Introduction to web programming Database Systems Course, 2016 AGENDA FOR TODAY Client side programming HTML CSS Javascript Server side programming: PHP Installing a local web-server Basic

More information