Start learning with our library of video tutorials taught by experts. Get started

Foundations of Programming: Fundamentals

Creating your first program in JavaScript


From:

Foundations of Programming: Fundamentals

with Simon Allardice

Video: Creating your first program in JavaScript

So let's get hands-on with JavaScript. Well, we know it's an interpreted scripting language, and that is going to make it easier to experiment with because we don't have to have a compiler and we don't have to worry about creating files full of machine code. But on the other hand, we can't just write some JavaScript and have it magically run by itself. We're going to create our program that will run inside another program. It's not unusual to have multiple levels of this in programming. Think about it this way. We already have our computer and that computer is going to be running an operating system inside of it.
Expand all | Collapse all
  1. 4m 14s
    1. Welcome
      1m 16s
    2. Making the most of this course
      2m 8s
    3. Using the exercise files
      50s
  2. 22m 11s
    1. What is programming?
      5m 45s
    2. What is a programming language?
      4m 48s
    3. Writing source code
      5m 34s
    4. Compiled and interpreted languages
      6m 4s
  3. 16m 29s
    1. Why JavaScript?
      4m 45s
    2. Creating your first program in JavaScript
      6m 54s
    3. Requesting input
      4m 50s
  4. 31m 38s
    1. Introduction to variables and data types
      5m 16s
    2. Understanding strong, weak, and duck-typed languages
      3m 51s
    3. Working with numbers
      5m 4s
    4. Using characters and strings
      4m 5s
    5. Working with operators
      4m 47s
    6. Properly using white space
      6m 46s
    7. Adding comments to code for human understanding
      1m 49s
  5. 24m 49s
    1. Building with the if statement
      7m 35s
    2. Working with complex conditions
      4m 10s
    3. Setting comparison operators
      6m 59s
    4. Using the switch statement
      6m 5s
  6. 17m 56s
    1. Breaking your code apart
      4m 1s
    2. Creating and calling functions
      2m 57s
    3. Setting parameters and arguments
      6m 7s
    4. Understanding variable scope
      2m 23s
    5. Splitting code into different files
      2m 28s
  7. 13m 32s
    1. Introduction to iteration
      4m 28s
    2. Writing a while statement
      5m 24s
    3. Creating a for loop
      3m 40s
  8. 19m 28s
    1. Cleaning up with string concatenation
      4m 30s
    2. Finding patterns in strings
      8m 3s
    3. Introduction to regular expressions
      6m 55s
  9. 19m 59s
    1. Working with arrays
      5m 47s
    2. Array behavior
      5m 29s
    3. Iterating through collections
      5m 18s
    4. Collections in other languages
      3m 25s
  10. 10m 50s
    1. Programming style
      5m 55s
    2. Writing pseudocode
      4m 55s
  11. 25m 55s
    1. Input/output and persistence
      3m 6s
    2. Reading and writing from the DOM
      8m 11s
    3. Event driven programming
      7m 47s
    4. Introduction to file I/O
      6m 51s
  12. 24m 26s
    1. Introduction to debugging
      5m 57s
    2. Tracing through a section of code
      7m 5s
    3. Understanding error messages
      3m 21s
    4. Using debuggers
      8m 3s
  13. 14m 17s
    1. Introduction to object-oriented languages
      5m 18s
    2. Using classes and objects
      6m 29s
    3. Reviewing object-oriented languages
      2m 30s
  14. 11m 14s
    1. Memory management across languages
      5m 11s
    2. Introduction to algorithms
      4m 2s
    3. Introduction to multithreading
      2m 1s
  15. 29m 20s
    1. Introduction to languages
      1m 42s
    2. C-based languages
      4m 40s
    3. The Java world
      3m 13s
    4. .NET languages: C# and Visual Basic .NET
      6m 17s
    5. Ruby
      3m 4s
    6. Python
      2m 56s
    7. Objective-C
      4m 3s
    8. Libraries and frameworks
      3m 25s
  16. 1m 2s
    1. Where to go from here
      1m 2s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Foundations of Programming: Fundamentals
4h 47m Beginner Sep 22, 2011

Viewers: in countries Watching now:

This course provides the core knowledge to begin programming in any language. Simon Allardice uses JavaScript to explore the core syntax of a programming language, and shows how to write and execute your first application and understand what's going on under the hood. The course covers creating small programs to explore conditions, loops, variables, and expressions; working with different kinds of data and seeing how they affect memory; writing modular code; and how to debug, all using different approaches to constructing software applications.

Finally, the course compares how code is written in several different languages, the libraries and frameworks that have grown around them, and the reasons to choose each one.

Topics include:
  • Writing source code
  • Understanding compiled and interpreted languages
  • Requesting input
  • Working with numbers, characters, strings, and operators
  • Writing conditional code
  • Making the code modular
  • Writing loops
  • Finding patterns in strings
  • Working with arrays and collections
  • Adopting a programming style
  • Reading and writing to various locations
  • Debugging
  • Managing memory usage
  • Learning about other languages
Subjects:
Developer Web Programming Foundations
Author:
Simon Allardice

Creating your first program in JavaScript

So let's get hands-on with JavaScript. Well, we know it's an interpreted scripting language, and that is going to make it easier to experiment with because we don't have to have a compiler and we don't have to worry about creating files full of machine code. But on the other hand, we can't just write some JavaScript and have it magically run by itself. We're going to create our program that will run inside another program. It's not unusual to have multiple levels of this in programming. Think about it this way. We already have our computer and that computer is going to be running an operating system inside of it.

Within the operating system, we're going to be opening up and running a web browser. The web browser itself is going to open up and run a webpage, and that webpage itself is going to open up and interpret some JavaScript. Now, if this seems like just too many levels deep, realize we always have most of this going on anyway. And we already have the computer, we already have the operating system, we already have the web browser. What we need to do is create the last two pieces.

We need to create the webpage that will open up in the web browser and the webpage will be the container that's going to take care of interpreting and running the JavaScript that we're going to write. So the first thing that we need to do is have a webpage. Now, we don't need to worry here about websites or web servers or graphics or any other files. We just need a single simple webpage. An HTML file whose only reason for existence is so we can point it to our JavaScript and say "go and do this." I have a folder here with two files in it: an HTML webpage and a file that will contain my JavaScript.

If you've done any web design in the past, you may find the next minute or two to be a bit of a do-over, but feel free to tag along. So this first file I've called container.html. It doesn't matter what the first part of the name is, but we're using the .html file extension just so when we double- click it, it will open up in the default web browser, whether that's Firefox, Safari, Internet Explorer, or anything else. As I can see here, it's a very simple HTML page indeed. I also have a file in this folder called script.js.

The name of this file is not actually important. As we've seen, it is just a text file, but I tend to keep my file names short, or lowercase, and give them a .JS extension for JavaScript. This file is empty as I'll show you in a moment. Now, just a side note here, some operating systems can be configured to hide the file extension from you and that can be a pain when you're creating files like this, because you think you're making a file with a name like script.js, but your system might be really saving it as script.js.txt which could mess things up.

However, we're good here and I'm going to open up this HTML file first in a text editor to view the HTML. So instead of double-clicking on it, which would open up in the browser, I'm on a Mac, so I'm going to right-click or Ctrl+Click and choose to open it with TextEdit. On a Windows PC, I would right-click and Open With > Notepad. Of course, if you have a favorite text editor or a web design application, feel free to use that. The only reason I'm doing it this way is just to show that we don't actually need any special software at all to do this.

Now, I want to see the behind-the- scenes view of our simple webpage file, which means I actually expect to see multiple lines and lots of angle brackets here. The reason I'm still seeing something that looks like the web browser itself is because TextEdit on the Mac has a preference to open in rich text or in HTML edit mode. So I'm going to go into the preferences of that and turn that off. I just want plain text. That's all I want to see. So jumping into preferences, I'm going to first say I want all my documents to open in plain text, and just to make things a bit more readable, I'm going to say that I want my plain text font to be Monaco, let's say 14 points, close that, and then also on the second section, I'm going to check the box to say Ignore rich text commands in HTML files. Close that.

I need to close that file and just reopen it again in TextEdit and this is what I want to see. The behind-the-scenes view of this webpage file. Now, if you're brand-new to all of this, you might wonder if you're looking at a programming language here. Well, no, this is a very different kind of code. HTML is not a programming language. It's a markup language. In fact, that's what it stands for. Hypertext Markup Language. Now, that might sound like nitpicky hairsplitting from me, but there is a really big difference.

HTML describes a webpage, its structure, what is its title, what are the headings, what are the paragraphs in this document. It is not a program. It is not a process. This is not a programming language. But we have enough to do in this course without getting into HTML. So I'll show you the reason we came into this file at all. The important piece is this line here. This is how we point from this HTML file, this webpage, to the only thing we're really interested in here: the JavaScript file called script.js.

Now, because we're just using just the name of the file, it will need to be inside the same folder that our HTML page is in, but that's what I have. So we're good. I can close down this HTML page. I don't need to do anything with it. I'm actually going to close it down in the browser too. script.js is the file I am interested in. I'm going to open that up in the TextEdit editor and I'm going to add one statement, the classic first program in any programming language.

The word alert written all lowercase and the opening parentheses, a double-quote, the words Hello World, closing double-quote, close parentheses, and a semicolon. This is one JavaScript instruction, one JavaScript statement. So to run this source code, we first need to save this file. And I'm going to close it, we don't need it anymore, and then I'm going to open up the webpage in the web browser. The web browser loads the webpage.

The webpage HTML file points to our JavaScript. It loads it in, and it interprets it and it runs it, and this is what it does. Pops up the really annoying JavaScript alert box. Now, other browsers might show this window slightly differently, but the effect is the same. Yes, this is a little boring, a little simple, and the alert box is after all one of the more annoying things that JavaScript can do. But this is where we begin and now we need to see how to add some more.

There are currently no FAQs about Foundations of Programming: Fundamentals.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Foundations of Programming: Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked