Video 3: JavaScript Overview

Loading...

Do curso por University of New Mexico

Web Application Development: Basic Concepts

130 classificações

University of New Mexico

Web Application Development: Basic Concepts

130 classificações

This is the first course in a Coursera Specialization track involving Web Application Architectures. This course will give you the basic background, terminology and fundamental concepts that you need to understand in order to build modern full stack web applications. A full stack web developer is familiar with each "layer" of the software technologies involved in a web application, including data modeling and database technologies, the web server environment and middleware components, network protocols, the user interface and basic visual design and user interaction concepts. In this course we will learn by doing. We will start by learning the major components of web application architectures, along with the fundamental design patterns and philosophies that are used to organize them. You will build and continually refine a fully functional full-stack web application as we progress through the modules in this course. Along the way you will be exposed to agile software development practices, numerous tools that software engineers are expected to know how to use, and a modern web application development framework. This course is also available in Spanish. To join the Spanish version, visit this page: https://www.coursera.org/learn/apliweb.

Na lição

Module #5 - The User Interface

In our final module we will discuss the User Interface. We will touch on CSS and JavaScript, and how these are used to add style to layout and design of HTML documents. We will also learn about Ajax and how it improves user requests.

HTML CSS and JavaScript Overview - An Overview0:35

Video 1: HTML Overivew12:35

Video 2: CSS Overview5:41

Video 3: JavaScript Overview5:28

Conheça os instrutores

Greg Heileman
Professor and Associate Provost
Electrical and Computer Engineering
Manel Martínez-Ramón
Professor
Electrical and Computer Engineering

[MUSIC]

In this video, we'll learn about JavaScript programming, and the proper

way to use it in order to add behaviors to the elements in an HTML document.

JavaScript is a lightweight interpretive programming language that was designed to

be embedded within and provide scripting capabilities to any application.

The way we use it is typically as a client side application.

So client side JavaScript combines the scripting capability with

interaction with a DOM, with a document object model in your web browser.

This enables executable content to be distributed over the web.

All major browsers include a JavaScript interpreter.

Let me show you an example, and

I'm not going to spend a lot of time teaching you how to program in JavaScript,

we'll learn a lot more in a later class in this specialization.

But for right now, let's take a look at the Fibonacci numbers, and

here's some code, some JavaScript code that you can write to actually compute

these Fibonacci numbers, and you'll notice that there's an opening script which is

HTML, then there's the JavaScript code, and then there's the end tag.

So, there's the open tag for script and then the end tag.

Let's take a look at how this executes in a browser.

So, if you'd like to try this just create a file called fib.html and

copy this code into it.

That's all you need, so it's going to be treated as an HTML file.

Now I'm just going to click on this file, and

we'll see that it just gets executed in the browser.

So, here are the Fibonacci numbers computed using JavaScript.

Client-side JavaScript also opens up the possibility for authors to deliver

malicious code to your browsers, so you have to be careful with this.

Browsers guard against this by doing two things.

First, JavaScript code is run inside a sandbox in your browser.

This sandbox only allows the code to do certain things, for

example it can't write to your desk, it can't create files, and so

it can't be used as a general purpose programming language.

It can only do certain things that interact with your DOM.

JavaScript code is also constrained by the same origin policy in your browser

recall that.

What happens is that your browser may request resources that are java script

files from other locations, and if it does this from two different locations,

what the same origin policy says is that these two can't mix.

In other words,

one of those scripts cannot access any information in the other script.

There are numerous JavaScript libraries that have been written to make the job of

developing using JavaScript much easier.

One of the most popular of these is jQuery, and

it's provided by default in Rails.

An entire ecosystem has been built up around jQuery,

including companion libraries, such as jQuery UI and a whole bunch of plug-ins.

If you go to jQuery.com, you can take a look at all of these.

jQuery supports the notion of unobtrusive JavaScript.

This is the separation of behavior from the document structure.

This is really an extension of the separation of content from it's

presentation that we've already talked about with reference to html.

This is a very natural extension of the same concept.

WIth unobtrusive JavaScript, you never embed any JavaScript expressions or

statements within the body of an html document, either it's attributes or

html elements.

Instead you put them in a separate file, so this is very similar to how we treated

CSS with the styling of HTML documents.

jQuery developers placed a high priority on making sure

this library worked consistently across all types of browsers.

The focus in jQuery is on retrieving elements from HTML pages,

and then performing operations on them.

The elements that are retrieved are done so

by using the exact same selectors that we use in CSS.

To collect a group of elements, you pass a selector to the jQuery function, so

here's jQuery, and

then you give it the sets of selectors that you want to retrieve the elements of.

You can use this dollar sign in place of the jQuery.

So, dollar sign is a shorthand way of calling the jQuery function.

So, this call is equivalent to the call I show above it.

The jQuery function returns a JavaScript object containing

an array of DOM elements that match the selector.

The returned elements are actually wrapped with some additional functionality, and

for this reason they're referred to as the wrapped set.

Here's an example, div.byebye.hide.

So, here the dollar sign is called the jQuery, the selector is div.byebye.

This selector selects the div that has the class bye bye.

And then the hide method, the jQuery hide method, is being applied to it.

This will hide all of the div elements in the document

that belong to this class bye-bye.

Many of the jQuery methods also return a wrapped set, so

it's very common to see them chained in this way.

So, here I added another call to the end of the one that I showed you previously.

This will add a new class called remove to the elements we just hid.

So, this might be useful if you want to make them display at some point later on.

You could call another jQuery method looking for the remove methods and

then re-display them.

The last thing I want to show you is how jQuery is added to your Rails app.

If you go to your gen file, if you scroll down,

you'll see that there's a gen called jquery-rails, and so

this is how the jquery JavaScript library becomes a part of your Rails application.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play