JavaScript for Beginners: A Comprehensive Guide to Programming Fundamentals, Esquemas y mapas conceptuales de Tecnologías de la Información y la Comunicación

¡Descarga JavaScript for Beginners: A Comprehensive Guide to Programming Fundamentals y más Esquemas y mapas conceptuales en PDF de Tecnologías de la Información y la Comunicación solo en Docsity!

Course notes

• 1 What is a Programming Language?
  • Key Points
• 2 Server-side vs. Client-side
  • Key Points
• 3 About JavaScript
  • Key Points
• 4 A Tour of JavaScript...............................................................................................................
  • Key Points
  • Project..............................................................................................................................................................
• 5 Objects, Properties and Methods
  • Key Points
• 6 Assigning Values to Properties
  • Key Points
  • Project..............................................................................................................................................................
• 7 About Comments
  • Key Points
  • Project..............................................................................................................................................................
• 8 Hiding Scripts from Older Browsers
  • Key Points
  • Project..............................................................................................................................................................
• 9 Automatically Redirecting the User
  • Key Points
  • Project..............................................................................................................................................................
• 10 Alert, Prompt and Confirm
  • Key Points
  • Project..............................................................................................................................................................
• 11 Variables and Operators
  • Key Points
  • Project..............................................................................................................................................................
• 12 Comparisons...........................................................................................................................
  • Key Points
  • Project..............................................................................................................................................................
• 13 Conditionals
  • Key Points
  • Project..............................................................................................................................................................
  • Project 2...........................................................................................................................................................
• 14 Looping....................................................................................................................................
  • Key Points
  • Project..............................................................................................................................................................
• 15 Arrays
  • Key points
  • Project..............................................................................................................................................................
• 16 Associative & Objective Arrays
  • Key Points
  • Project..............................................................................................................................................................
• 17 Two Dimensional Arrays
  • Key Points
  • Project..............................................................................................................................................................
• 18 String Manipulation.................................................................................................................
  • Key Points
  • Project..............................................................................................................................................................
• 19 Using Functions
  • Key Points
  • Project..............................................................................................................................................................
• 20 Logical Operators
  • Key Points
  • Project..............................................................................................................................................................
• 21 Using Event Handlers
  • Key Points
  • Project..............................................................................................................................................................
• 22 Working with Images
  • Key Points
  • Project..............................................................................................................................................................
• 23 Simple Image Rollovers
  • Key Points
  • Project..............................................................................................................................................................
• 24 Object Instantiation and Better Rollovers
  • Key Points
  • Project..............................................................................................................................................................
• 25 Working with Browser Windows
  • Key Points
  • Project..............................................................................................................................................................
• 26 Positioning Browser Windows
  • Key Points
  • Project..............................................................................................................................................................
• 27 Focus and Blur........................................................................................................................
  • Key Points
  • Project..............................................................................................................................................................
• 28 Dynamically Created Content
  • Key Points
  • Project..............................................................................................................................................................
• 29 Working with Multiple Windows
  • Key Points
  • Project..............................................................................................................................................................
• 30 Using an External Script File
  • Key Points
  • Project............................................................................................................................................................
• 31 Javascript and Forms...........................................................................................................
  • Key Points
  • Project............................................................................................................................................................
• 32 Form Methods and Event Handlers
  • Key Points
  • Project............................................................................................................................................................
• 33 JavaScript and Maths...........................................................................................................
  • Key Points
  • Project............................................................................................................................................................
• 34 Object Variables – A Refresher
  • Key Points
  • Project............................................................................................................................................................
• 35 Actions From Menu Items
  • Key Points
  • Project............................................................................................................................................................
• 36 Requiring Form Values or Selections..................................................................................
  • Key Points
  • Project............................................................................................................................................................
• 37 Working with Dates
  • Key Points
  • Project............................................................................................................................................................
• 38 Retrieving Information from Date Objects...........................................................................
  • Key Points
  • Project............................................................................................................................................................
• 39 Creating a JavaScript Clock
  • Key Points
  • Project............................................................................................................................................................

1 What is a Programming Language?

Key Points

o A programming language is a set of codes that we can use to give a computer instructions to follow. o Popular and well-known programming languages include Java, C++, COBOL, BASIC, LISP and more. Most popular programming languages consist of words and phrases that are similar in form to the English language. o A well-written program will be easily readable by anyone with a little programming experience, regardless of whether they have any direct experience of the language in question. This is because modern programming languages share a large number of common concepts. In particular, they all have a notion of variables , arrays , loops , conditionals , and functions. We will meet these concepts again in more depth later in the course. o Traditionally, programming languages have been used to write (for the most part) “stand-alone” applications. Things like Microsoft Word, Mozilla Firefox and Lotus Notes are all examples of such applications. Once installed on a PC, these applications run without necessarily requiring any other software to be installed alongside them. o Web Applications differ from these traditional applications in many respects, but the most striking is that they all run inside your web browser. Examples of popular web applications are things like Google, Hotmail, Flickr, GMail and any of the vast array of “weblogging” systems.

2 Server-side vs. Client-side

Key Points

o The World Wide Web is built on a number of different technologies. o For most users, the web starts and ends with their choice of web browser. The browser is said to define the client-side of the web, with the browser, the computer it is running on, and the user surfing the web being collectively referred to as the client. o Consider a client who has decided to visit the web site at www.google.com. The first thing that happens is that the client will make a request to Google’s web server for the default page of that web site. o The web server is an application running on a computer owned by Google. Like the client, the server application and the computer on which it runs define the server-side of the web, and are collectively referred to as the server. o When the server receives the request from the client for a particular page, its job is to retrieve the page from the computer’s files and serve it back to the client. In many cases, this operation is a very simple procedure involving little or no work on the part of the server. o However, using a programming language like PHP, Perl or Java, we can cause the server to either modify the page it finds before it passes it back to the client, or even to generate the page entirely from scratch. This is referred to as a server-side application. The page passed back to the client looks (to the client) exactly the same as any other page that has not been modified.

o An example of a server-side application might be to insert the current date and time into a page. This would mean that each time the page was requested (say, by using the browser’s refresh button), a new time value would be added to the page. o Once the client has received the page from the server, it displays the page and waits for the user to request another page. As soon as the page reaches this state, it has moved beyond the control of the server. No server-side application can now alter the contents of the page without the client having to make another trip back to the server to get a new (and possibly updated) copy of the page. o However, all modern browsers allow for the running of client- side applications. These are small applications which are embedded within the HTML code of the page itself. o Server-side applications ignore any client-side applications that they find while modifying pages to send to the client, so in general the two types of application cannot easily “talk” to each other. o However, once the client has received a client-side application, it can begin to modify the page dynamically , without the need to go back to the server. o An example of a client-side application might be a clock on a web page that updated every second. o An unfortunate side effect of client-side applications is that all the code must be sent to the client for running, which means that the application’s inner workings are available for anyone to see. This makes it impractical for checking passwords, or doing anything else that could cause confidential information to be released into the wild. o In addition, all modern web browsers afford the user the opportunity to switch off client-side applications altogether. On top of this, the way the same client-side application is run will vary from browser type to browser type. o Despite these drawbacks, client-side applications (or scripts , as they are better known due to their general brevity) remain the best way to provide web users with a rich environment when developing web applications.

3 About JavaScript

Key Points

o JavaScript is an interpreted, client-side, event-based, object- oriented scripting language that you can use to add dynamic interactivity to your web pages. o JavaScript scripts are written in plain text, like HTML, XML, Java, PHP and just about any other modern computer code. In this code, we will use Windows NotePad to create and edit our JavaScript code, but there are a large number of alternatives available. NotePad is chosen to demonstrate JavaScript’s immediacy and simplicity. o You can use JavaScript to achieve any of the following:  Create special effects with images that give the impression that a button is either highlighted or depressed whenever the mouse pointer is hovered over it.  Validate information that users enter into your web forms  Open pages in new windows, and customise the appearance of those new windows.  Detect the capabilities of the user’s browser and alter your page’s content appropriately.  Create custom pages “on the fly” without the need for a server-side language like PHP.  And much more…

o JavaScript is not Java , though if you come from a Java background, you will notice that both languages look similar when written. Java is a full featured and comprehensive programming language similar to C or C++, and although JavaScript can interact with Java web applications, the two should not be confused. o Different web browsers will run your JavaScript in different, sometimes incompatible ways. In order to work around this, it is often necessary to use JavaScript itself to detect the capabilities of the browser in which it finds itself, and alter its operation depending on the result. o To revisit the original definition in this chapter, note the following points:  Interpreted refers to the fact that JavaScript code is executed (acted on) as it is loaded into the browser. This is a change of pace from compiled languages like Java, which check your program thoroughly before running a single line of code, and can have many implications that can catch you out if you are from a non-interpreted programming background.  Client-side has been defined already in the previous chapter.  Event-based refers to JavaScript’s ability to run certain bits of code only when a specified event occurs. An event could be the page being loaded, a form being submitted, a link being clicked, or an image being pointed at by a mouse pointer.  Object-oriented signals that JavaScript’s power to exert control over an HTML page is based on manipulating objects within that page. If you are familiar with object-oriented programming , you will be aware of some of the power that this can bring to the coding environment.

4 A Tour of JavaScript

Key Points

o Let’s start with a quick tour of the major features of JavaScript. This chapter is intended to be a showcase of what JavaScript can do, not an in depth investigation into the deeper concepts, so don’t worry too much if you get lost or don’t understand the code you’re typing in!

Project

o Our JavaScript is all going to be written using NotePad. Open NotePad and save the resulting empty document in your user drive as chapter_4.html. o Begin by creating a basic HTML page in your blank document. It doesn’t have to be anything fancy – the following will be more than sufficient: **

Chapter 4: A Tour of** ↵ **JavaScript

A Tour of JavaScript

** o As a convention, when the notes intend that you should enter code all on one line, they will use an arrow as above ↵ to indicate that you should not take a new line at that point. With HTML, this is rarely important, but with JavaScript , a new line in the wrong place can stop your code from working.

o Save your new webpage, and view it in your web browser. For the moment, use Internet Explorer to view this page. To do this, find your saved file on your user drive, and double-click on it. This will open the file in Internet Explorer by default, and let you see the header you’ve just created. o So far, we haven’t done anything beyond the scope of HTML. Let’s add some JavaScript to the page. o There are (generally speaking) three places in a web page where we can add JavaScript. The first of these is between a new set of HTML tags. These script tags take the following form:

o The script element above can be placed virtually anywhere you could place any element in an HTML page – in other words, in either the head element or the body element. It is most commonly placed in the former, though this is usually so that all your code can be easily found on the page. o Note too that there is no arbitrary limit on the number of script elements that can be contained in an HTML page. There is nothing stopping you from having a hundred of these dotted around your pages, except perhaps prudence. o Let’s add our opening and closing script tags to the head element of the page, like so: **

…

…**

o Be careful with your brackets here! o Save and refresh, and note that nothing happens this time. This is because we have enclosed the previous action (popping up a question and acting on the response) within a function. A function is a block of code that is given a name – in this case, the name is go_to_google() – and is only run when that name is “called”. It can be useful to think of functions as magic spells that can be invoked when their name is said. o To invoke this spell, we need to choose an element on the page to trigger it. A natural candidate is a link element, so add the following HTML to the body section of your page:

A quick test.

o The # link is a common HTML trick that allows us to create a “link to nowhere”. o Save and refresh, and check that the link appears on the page, and that it goes nowhere when clicked. o Now, we want to have our page ask us if we want to “Go to Google?” when we click on that link. Here’s how o Take the link element, and modify it as follows: test o Save and refresh, and then click on the link. This is an example of an event handler. When the link is clicked ( onclick ), our browser says the “magic words” go_to_google() , and our function is invoked. o For our final trick, add the following code to the body section of the page, after the paragraph containing the link: ** … ** o Note that the line of code should be all on one line!

o Save the page and refresh the browser. Note that we now have a new line of text on the page – another header! We’ve used JavaScript to create HTML and tell the browser to display it appropriately. In this example, JavaScript has done nothing that we couldn’t have done with a line of HTML, but in future chapters we will see how we can use this to write the current date and more.

o If we wanted to instruct JavaScript to play the piano, we could write something as simple as: piano.play(); o A clear example of object hierarchy could be seen if we decided to open the lid of the piano: piano.lid.open(); o Or even more so if we wanted to press the sustain pedal of the piano: piano.pedals.sustain.press(); o Note that in some of the examples above, we have brackets () after each set of words, and in some we don’t. This has to do with making sure that JavaScript can understand what we say. o JavaScript works with objects throughout its existence in a web browser. All HTML elements on a page can be described as objects, properties or methods. We have already seen a few of these objects in our previous introductory chapter: document.write(…); document.location; o In these examples, document is an object, while write is a method and location is a property. o In these lines, we see a clue about the use of brackets in these statements. We use brackets to signify to JavaScript that we are talking about an object’s method , and not a property of the same name. o Brackets also allow us to pass certain extra information to an object’s method. In the above example, to write the text “Hello world!” to a web page document, we would write the following JavaScript: document.write(“Hello World”); o Each method can do different things depending on what is put in the brackets (or “passed to the method as an argument”, to use the technical term). Indeed, many methods can take multiple “arguments” to modify its behaviour. Multiple arguments are separated by a comma (,).

o A JavaScript instruction like those shown here is referred to as a JavaScript statement. All statements should end in a single semi-colon (;). JavaScript will often ignore missed semi-colons at the end of lines, and insert the semi-colon for you. However, this can cause some unexpected results. Consider the following: document.write(“ Hello World! ”); o In many other languages, this would be acceptable. However, JavaScript will often interpret something like this as the following: document.write(“; Hello World!; ”); o This interpretation will generate an error, as JavaScript will complain if you end a statement without ensuring that any terms between quotes have matching pairs of quotes. In this example, the first line’s “statement” is cut short, and JavaScript will fall over. o For this reason, it is recommended that all your statements should end with semi-colons.