JavaScript JavaScript for Beginners Course notes <_/> _ DOWNLOAD PDF « EICODING BUGS ENOTES GALLERYJavaScript for Beginners 2 1 Whatis a Programming Language? 5 Koy Points 5 2 Server-side vs. Client-side 7 Key Points 7 3 About JavaScript . Key Points 4 A Tour of Javaserip.. Key Points Project. 5 Objects, Properties and Methods 18 Key Points| 18 Assigning Values to Properties 24 Key PINS sn Project. 7 About Comments. Key Points Project. 8 Hiding Scripts from Older Browsers. 28 Key Points 28 Project. 29 9 Automatically Redirecting the User... Key Points Project. 3 10 Alert, Prompt and Confirm 33 Key Points 33 Project... = 11. Variables and Operators. Key Points Project. 12 Comparisons. 40 Koy Points wo Project. “1 13. Conditionals .. Key Points Project Project 2 DOWNLOAD POF « EICODING BUGS [NOTES GALLERYJavaScript for Beginners 3 14 Looping Key Points Projet. TS AMAYS ses 7 . seven 7 Key points 53 Project. 55 16 Associative & Objective Arrays 87 Key Points 57 Project... ~ 17, Two Dimensional Arrays... Key Points Project. 18 String Manipul 6 Key Points et Project. 65 19 Using Functions... Key Points Project. 20 Logical Operators 7 Key Points n Project. - 74 21. Using Event Handlers ... Key Points Project. 22 Working with Images 79 Key Points 79 Project... : 80 23. Simple Image Rollovers... Key Points Project. 24 Object Instantiation and Better Rollovers 85 Key Points 85 Project. 86 25° Working with Browser Windows... Key Points Project 26 Positioning Browser Windows 91 Key Points| 9 Project. 92 DOWNLOAD PDF = EICODING BUGS ENOTES GALLERYJavaScript for Beginners 4 27 Focus and Blur. Key Points, Project... 28 Dynamically Created Content... Key Points Project. 29 Working with Multiple Windows. 97 Key Points 97 Project... : = 98 30. Using an External Script File..... Key Points Project 31 Javascript and Forms. 101 Key Points 101 Project 103 32 Form Methods and Event Handlers ... . enensene 105 Key Points| 405, Project 106 33 JavaScript and Maths. 108 Key Points, 108 Project... 109 34 Object Variables — A Refresher . seven Key Points 111 Project. 2 35. Actions From Menu Items 113 Key Points 113 Project... “ mot 36 Requiring Form Values or Selections..... . seven Key Points 116 Project 8 37 Working with Dates 121 Key Points 121 Project 122 38. Retrieving Information from Date Objects.. 123 Key Points| vs ve onion 123 Project 124 39. Creating a JavaScript Clock 126 Key Points| 126 Project. 128JavaScript for Beginners 5 1 What is a Programming Language? Key Points ° A programming language is a set of codes that we can use to give a computer instructions to follow. 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. ‘A well-written program will be easily readable by anyone with alittle 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. 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. 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. DOWNLOAD PDF « EICODING BUGS ENOTES GALLERYJavaScript for Beginners © These applications are also written using programming languages, but as a rule they are built using multiple, interdependent technologies. These technologies are easily (though not completely) broken down into two categories: server-side and client-side.JavaScript for Beginners 7 2 Server-side vs. Client-side Key Points ° The World Wide Web is built on a number of different technologies. 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. 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. 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. 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. 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. DOWNLOAD POF é EICODING BUGS CINOTES GALLERYJavaScript for Beginners © 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. © 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. © However, all modern browsers allow for the running of elient- side applications. These are small applications which are embedded within the HTML code of the page itself. © 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. © 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. © An example of a client-side application might be a clock on a web page that updated every second. © Anunfortunate 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. © 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. © Despite these drawbacks, client-side applications (or seripts, 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.JavaScript for Beginners ° In short, the two technologies each have their strengths and weaknesses: Client-side scripts allow the developer to alter pages dynamically, and to respond to user actions immediately rather than having to wait for the server to create a new version of the page. However, there are security and cross-browser compatibility issues to be aware of, and these are often non- trivial. Server-side applications allow the developer to keep her code secure and secret, thus allowing for more powerful applications to be created. In addition, since the server running the code is always a known quantity, applications that run suecessfllly in one browser will run successfully in all browsers. However, despite all this power, there is no direct way for a server-side application to alter a page without having to force the client-side to load another page. This makes it completely impractical for things like drop-down menus, pre-submission form checking, timers, warning alerts and so forth.JavaScript for Beginners 10 3 About JavaScript Key Points © JavaScript is an interpreted, client-side, event-based, object- oriented scripting language that you can use to add dynamic interactivity to your web pages. © 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. © 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...JavaScript for Beginners ° 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. 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. 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 JavaScripts 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 JavaSeript’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. "JavaScript for Beginners 12 © One final note: While JavaScript is a programming language, HTML (the language of the World Wide Web) is not. HTML. is a Markup Language, which means that it can be used to mark areas of a document as having special characteristics like headers, paragraphs, images, forms and so on, but it cannot perform any logical processing on its own. So while JavaScript is often written alongside HTML, the rules of one do not necessarily have any bearing on the other.JavaScript for Beginners 13 4 A Tour of JavaScript Key Points ° Project ° 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! 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. 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: A Tour of JavaScript Asa convention, when the notes intend that you should enter code all on one line, they will use an arrow as above 4! fo 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.JavaScript for Beginners 14 © 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. © So far, we haven’t done anything beyond the scope of HTML. Let’s add some JavaScript to the page. © 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 ser ipt tags take the following form: © The script clement 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. © 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. © Let’s add our opening and closing script tags to the head element of the page, like so: JavaScript for Beginners 45 © Save the file, and then try refreshing your page in the browser window. Note that nothing has happened. This is what we expected — all we have done so far is to set up an area of the page to hold our JavaScript. © Go back to NotePad and enter the following text between the opening and closing seript tags: window. alert (“Hello world!”); © Save your changes, and again refresh your page in the browser window. Welcome to the world of JavaScript! © Go back to notepad and remove the window. alert line you just added. Now add the following, slightly more complex code: if ( confirm(“Go to Google?”) ) { document location = | “http: //www.google.com/”; + © Again, save your changes and refresh the page. For those with an eye to future chapters, this is an example of a conditional statement, where we ask JavaScript to check the condition of something (in this case, our response to a question) and then to alter its behaviour based on what it finds. © Now, both of these bits of JavaScript have run uncontrollably when the page has loaded into the browser. In most cases, we will want to have more control over when our JavaScript does what we ask it to. © This control is the domain of events. In a browser, every element of an HTML document has associated with it a number of events that can happen to it. Links can be clicked, forms can be submitted, pages can be loaded and so on. © Modify the previous lines of JavaScript in your seript element to match the following: function go_to_google() { if ( confirm(“Go to Google?”) ) { document.location = J “http://www. google.com/”; , +JavaScript for Beginners 18 © Be careful with your brackets here! © 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 funetion 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. © 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.

co The # link is a common HTML trick that allows us to create a “link to nowhere”. © Save and refresh, and check that the link appears on the page, and that it goes nowhere when clicked. © 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 © Save and refresh, and then click on the link. This is an example of an event handler. When the link is clicked (one1ick), our browser says the “magic words” go_to_google(), and our function is invoked, © For our final trick, add the following code to the body section of the page, after the paragraph containing the link: co Note that the line of code should be all on one line!JavaScript for Beginners 7 © 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.JavaScript for Beginners 18 5 Objects, Properties and Methods Key Points ° Generally speaking, objects are “things”. For example, a piano is an object Properties are terms that can describe and define a particular object. Our piano, for example, has a colour, a weight, a height, pedals, a keyboard and a lid. Note from the above that an object’s properties can be properties themselves. So we have the case where a piano lid is a property of the piano, but is also an object in its own right, with its own set of properties — for example, the lid has a colour, a length, and even a state of either open or closed. If objects are the nouns of a programming language and properties are the adjectives, then methods are the verbs. Methods are actions that can be performed on (or by) a particular object. To continue our piano example, you could play a piano, open its lid, or press the sustain pedal. Many programming languages have similar ways of referring to objects and their properties or methods. In general, they are hierarchical, and an object's relationship with its properties and methods, as well as with other objects, can often be easily seen from the programming notation. In JavaScript, we use a “dot notation” to represent objects and their properties and methods. For example, we would refer to our piano’s colour in the following way: piano.colour;JavaScript for Beginners 19 © If we wanted to instruct JavaScript to play the piano, we could write something as simple a piano. play(); © Aclear example of object hierarchy could be seen if we decided to open the lid of the piano: piano. 1id.open(); © Or even more so if we wanted to press the sustain pedal of the piano: piano. pedals.sustain.press(); ‘© 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 © 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; ©. In these examples, document is an object, while write is a method and location is a property. 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. © 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”); © 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 (,)JavaScript for Beginners 20 © 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! "); © In many other languages, this would be acceptable. However, JavaScript will often interpret something like this as the following: document .write(”

; Hello World!; "); © 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. © For this reason, it is recommended that all your statements should end with semi-colons.JavaScript for Beginners 21 6 Assigning Values to Properties Key Points © While objects and methods allow us to do things on a page, such as alter the content or pop up dialogue boxes to interact with the user, in many cases we will want to alter the value of one of an object’s properties directly. These cases are akin to painting our piano green. © Given our discussion on methods so far, we might expect to be able to alter our object’s properties by using a method — for example, the following would seem logical: piano.paint(“green”); o Inmany cases, that is exactly what we will do. However, there are two drawbacks here. The first is that, within this course, the majority of objects that we discover are built into and defined by our browser. If we rely on using a method to alter an object’s property, we are also relying on the fact that the method exists in the first place. © Amuch more direct way to solve this problem is to access the object’s properties directly. For example: Piano.colour = “green”; © Here we are no longer using a method to perform an action, we are using what is known as an operator. In this case, the operator has the symbol “=”, and is known as the assignment operator.JavaScript for Beginners Project ° Within JavaScript, we can use this operator to great effectiveness. For example, we could alter the title element of a document (the text that is displayed in the top bar of the browser’s window) dynamically. This could be done when a user clicked on a part of the page using an event handler (more later on this), or could be set to automatically update each minute to show the current time in the page title. The code we would use for this task is simple: document.title = “a new title”; There are many assignment operators in JavaScript. Some of the more common are shown in the table below: Assignment Function x=y Sets the value of x to y Sets the value of x to xty Sets the value of x to x-y Sets the value of x to x times y xy Sets the value of x to x divided by y Not all assignment operators work with all types of values. But the addition assignment operator works with both numbers and text. When dealing with numbers, the result will be the sum of the two numbers. When dealing with text (technically called strings), the result will be the concatenation of the two strings: document .title += “17; will cause the symbol “!” to be appended to the end of the current document title. Open your previous project file, and save it under the name chapter_6.html. Remove any existing JavaScript from your script tags, but leave the tags in place ready for some new JavaScript.JavaScript for Beginners 23 © Use your text editor to change the value of the title element of the page as follows, then load your page into a browser and view the result: o Now, add a statement to our script element to add the following text to the end of the current title: “JavaScript for Beginners!”; © Reload the page in your browser and note the title bar of the window. 0. If the display looks odd, consider your use of spaces © All we have so far is an example that does nothing more than HTML could manage. Let’s introduce a new method of the window object to help us to add a little more dynamism and interaction to the script. Change the value of the title tag as follows: © Now, remove your previous JavaScript statement and insert the following: document title = J window. prompt (“Your title?”, “”); © Reload your page and consider the result. © We have come across the window object before. Our demonstration of the alert method in chapter 4 could have been more properly written as: window.alert (“message”); In many cases, we can omit certain parts of our object/property/method hierarchy when writing our code. We will discuss this again later.JavaScript for Beginners co To understand what is going on with our prompt method, we can write down a method prototype. This is a way of describing a method’s arguments in such a way that their effect on the method is more self explanatory. A prototype for the prompt method of the window object might look like the following: window.prompt( message, default_response ); © So, we can see that the first argument defines the text that appears as the question in the prompt dialogue box. The second argument is a little less clear. Try your code with different values and see what difference your changes make. o Finally, we note that this prompt method somehow takes the information typed into the box and passes it to our JavaScript assignment. Say someone typed “Hello World” into the box. It would have been as if our assignment had actually been: document title = “Hello World”; © When this sort of passing of values occurs, it is said that the method has returned the value passed. In this case, we would say that “the prompt method has returned the value ‘Hello World”, or that “the return value of the prompt method was “Hello World’. © Return values will become very important when we deal with event handlers later on.JavaScript for Beginners 25 7 About Comments Key Points ‘© Repeat after me : Comments are important. Comments are important. Comments are important. © Adding comments to your code is always good practice. As the complexity of your scripts grows, comments help you (and others) understand their structure when you come to view the code at a later date. © A lot of code created quickly is said to be “write only” code, as it suffers from an inherent lack of structure or commenting. Debugging such code, or reusing it months later, becomes maddeningly impossible as you try to remember what a certain line was supposed to do, or why using certain values seems to stop your code from working © Comments are completely ignored by JavaScript and have no effect on the speed at which your scripts run, provided they are properly formed. © Comments can slow the loading of your page, however — many coders keep a “development” copy of their code fully commented for editing, and remove all comments from their code when they finally publish it. ©. There are two types of comment in JavaScript - single line comments, and multi-line comments. ‘© Single line comments begin with two forward-slash characters (/), and end with a new line: // this is a comment alert(“hello”); // so is thisJavaScript for Beginners 28 Project ° Single line comments in JavaScript can also use the HTML comment format that you may be familiar with: tag. Secondly, this is only a one line comment, unlike its use in HTML, which comments all lines until the closing comment tag. You can add multiple-line comments by enclosing the comment block between /* and */. For example: /* all of this text is going to be ignored by JavaScript. This allows us to write larger comments without worrying about having to individually “comment out” each line */ alert (“Hello World”); /* a one line, “mult-line” comment */ As well as adding narrative to your script, you can use comments to remove code from your pages without having to delete the code. For example: // this was the old message // alert (“Hello World”); // and this is the new message alert (“Hello everyone!”); This can be very useful if you are trying to track down an error in your code— you can “comment out” each suspect line in turn until you manage to get your code working again Open your previous project file, and save it under the name chapter_7.html. Add the single line comment This is my first comment to the beginning of your script.JavaScript for Beginners 2 © Adda multi-line comment to your script, replacing your previous single line comment. The multi-line comment should describe what your script does at present.JavaScript for Beginners 28 8 Hiding Scripts from Older Browsers Key Points co Very old browsers don’t understand JavaScript. There are very few such browsers in use today, but two factors force us to continue to consider environments that may not be able to cope with our JavaScript code. ©. Firstly, all modern browsers allow users to control whether JavaScript code will be run. In many cases, users will not have any say over their company policy, and may not even know that their work machine has had JavaScript disabled. © Secondly, not all of your visitors will be using browsers that can make any use of JavaScript. Braille displays, screen readers and other non-visual browsers have little use for many JavaScript tricks. In addition, search engines like Google will ignore any JavaScript you use on your pages, potentially hiding important content and causing your pages to remain un- indexed. © Browsers that don’t support JavaScript are supposed to ignore anything between the opening and closing script tags. However, many break this rule and will attempt to render your code as HTML, with potentially embarrassing consequences.JavaScript for Beginners 29 Project However, we can use the fact that <1-~ denotes a single line comment in JavaScript but a multi-line comment in HTML to ensure that our code is seen by a JavaScript-savvy browser, but ignored as commented-out HTML by anything else This prevents older browsers from displaying the code, but what if we want to replace this with some comment. For example, let’s say we had a bit of code that displayed the time of day and greeted our user by name. Without JavaScript and using the method above, there would simply be a blank on the page where the greeting should have been. We can use the

Open your previous project file, and save it under the name chapter_8.html. Add two lines to your code to ensure that it will not confuse older browsers or browsers where the user has disabled JavaScript.JavaScript for Beginners © Add a noscript element to explain what your JavaScript does. It is generally considered “bad form” to instruct your user to “upgrade to a better browser”, as this can insult many people who use assistive devices — consider this form of advice to be similar to the advice that tells a blind person “to get some glasses” ‘© Instead where possible you should use the noscript element to provide content that adequately replaces the scripted content with a suitable replacement. For example, if you use your JavaScript to build a navigation panel on your page, the noscript element should contain a plain HTML list that does the same job.JavaScript for Beginners Ea 9 Automatically Redirecting the User Key Points © We have already briefly seen the use of browser redirection in chapter 4. © To formulate the idea more completely, in order to redirect the user to a different page, you set the location property of the document objects. o As we saw in chapter 6, we can use the assignment operator here. For example: document .location = “http://www. bbc.co.uk/”; document.location = “chapter_4.html”; Project © Open your previous project file, and save it under the name chapter_9_redirect.html. © Save another copy of the file, this time called chapter_9.html. 0° Make sure both files are saved in the same folder, and that you have chapter_9.html open in your editor. © Remove all script from between the script tags, except for your browser hiding lines. Make sure that the script tags are still in the head section of the page. © Now, add a single statement to this script that will automatically redirect the user to the page chapter_9_redirect .html as soon as the page is loaded into a browser.JavaScript for Beginners © Finally, add a header tag to the body section of the page containing the text “You can’t see me!”. © Close this page, don’t check it in a browser yet, and open the page chapter_9_redirect html in your editor. © Remove all JavaScript from this page (including your script tags) and ensure that only HTML remains on the page. © Adda header tag to the body section of the page containing the text “But you can see ME!” © Save this page, and load the page chapter_9. html into your browser. © Experiment with various positions for the script tags on chapter_9. html to see if you can make the header appear before the redirectionJavaScript for Beginners 33 1 0 Alert, Prompt and Confirm Key Points © So far, we have seen brief examples of alert, prompt and confirm dialogue boxes to request a response from the user, and to pause all code in the background until the request is satisfied. © Allofthese boxes are the result of methods of the window object. This object is the highest level object that JavaScript can deal with in a browser. As such, all other objects on a page (with a few exceptions) are actually properties of the window object. ‘© Because of this ubiquity, its presence is assumed even if it is omitted. Thus, where we technically should write: window.document.write(”..”); it is equally valid to write: document .write("..”); as we have been doing. © Similarly, instead of writing window.alert(”.."); we can happily write: alert ("4");JavaScript for Beginners Project ° The prototypes of the three methods are: window.alert( message ); window.confirm( message ); window.prompt( message, default_response ); Alert will always return a value of “true” when it is cleared by clicking “ok”. Confirm will return either “true” or “false” depending on the response chosen to clear the box. Prompt will return either the value typed in, “null” if nothing is typed in, and “false” if the box is cancelled. Open your previous project file, and save it under the name chapter_10.html. Clear the previous redirection code, and ensure that the script tags have been returned to the head section of the document. ‘Add a new statement to the script on the page that will display the following message before the rest of the page is shown: Welcome to my website! Click OK to continue. Check your page in your browser. We will use alert, confirm, and prompt throughout this course. Take a moment to try each of them in turn on this page, cach time stopping to review your changes. Use the write method of the document object to check the return values of each method. For example: document .write(alert (“hello world”) Make sure that you place this particular snippet of code in script tags within the body area of the page, as we are generating text output to be rendered by the browser. Also, note the use (or not) of quotes here. More next chapter!JavaScript for Beginners 35 1 1 Variables and Operators Key Points ° We have been introduced to the concepts of objects and their various properties and methods. These inter-related concepts allow any web page to be broken down into little snippets of information or data, which can then be accessed by JavaScript and, in many cases, changed. However, what if we want to create our own storage space for information that doesn’t necessarily have a page-based counterpart? For example, what if we wanted to store the previous value of a document’s title property before changing it, so it could be retrieved later, or if we wished to store the date time that the page was loaded into the browser for reproduction in several places on the page, and didn’t want to have to recalculate the time on each occasion? Variables are named containers for values within JavaScript. They are similar to object properties in many ways, but differ importantly: Ina practical sense, variables have no “parent” object with which they are associated. Variables can be created (“declared”) by you as a developer, and can be given any arbitrary name (within certain rules) — object properties, however, are restricted by the definition of the parent object. It would make no sense, for example, for our piano object in the previous chapters to have a propeller property!JavaScript for Beginners © Variable name rules are straightforward — no spaces, names must start with a letter. Examples of valid variable names are: BrowserName page_name Messagel MESSAGE1 © In many browsers, JavaScript is case-sensitive, which means that the last two variables in the example above are distinct variables. It is a good idea to pick a particular naming style for your variables, and to stick to it within your projects. © At the simplest level, variables can store three different types of value: o Numbers e.g. 1.3324, 3.14159, 100000, -8 ete. © Strings e.g. “JavaScript for Beginners, week 3”, “Hello World” ete. © Boolean Values e.g. true, false © Note that strings can contain numbers, but the following variable values are not equivalent: 1.234 and “1.234” The latter is a string value. This becomes important. Consider: 4h? 4egre © Some developers use their own naming convention with variable names to denote the type of value expected to be contained in a given variable. This can often be helpful, but is in no way required by JavaScript (c.f. JavaScript comments) © For example, strMessage might indicate a string variable, where numPageHlits might indicate a numerical value in the variable.JavaScript for Beginners a7 © Variable assignment is accomplished in the same way as object property assignment. When a variable is assigned a value for the first time, it is automatically created. This is different from other programming languages, where a variable must be created explicitly first, before it can be loaded with a value © Some examples of variable assignment follow: numBrowserVersion = 5.5; numTotal += 33; Message = “Hello!”; Message = “Goodbye”; Message = 3; © Note that the last three examples show that variable values can be altered after their initial assignment, and also that the type of value stored in a variable can be altered in a similar manner. © Once a variable has been created and a value stored within, we will want to be able to access it and perhaps manipulate it. Ina similar manner to object properties, we access our variables simply by calling them: Message = “Hello world!”; alert (Message) ; o Note that we do not use quote marks around our variable names. The above code is different from: alert (“Message”); for hopefully obvious reasons. co As well as using variables for storage and access, we can combine and manipulate them using operators. For example: // ¢ is now 25 ¢ is now 37 Hello!”; // c is now “13 Hell, a b c c cJavaScript for Beginners Project ° Our last example may have been unexpected — we added a number to a string and got a string as a result. JavaScript is smart enough to realise that a number cannot be “added” to a string in a numerical sense, so it converts the number temporarily to a string and performs a concatenation of the two strings. Note that b remains 13, not “13”. A table of operators: Operator Function xty ‘Adds x to y if both are numerical ~ otherwise performs concatenation x-y Subtracts x from y if both are numerical Multiplies x and y xly Divides x by y x%y Divides x by y, and returns the remainder x Reverses the sign of x xt Adds 1 tox AFTER any associated assignment Hx Adds 1 to x BEFORE any associated assignment x Subtracts 1 from x AFTER any associated assignment “x Subtracts 1 from x BEFORE any associated assignment Open your previous project file, and save it under the name chapter_11.html. Clear the previous JavaScript code, and ensure that the script tags are contained in the body section of the document. Assign the message “Welcome to my web site” to a variable called greeting.JavaScript for Beginners 39 © Use this variable to create an alert box containing the message, and also to produce a header on the page without having to retype the message. co Test this page in your browser. © Now, modify your code to create two variables, var_1 and var_2. © Assign the value “Welcome to” to vax_t, and the value “my web site” to var_2. o Create a third variable var_3, and assign to it the value of var_1 + var_2. Then use an alert box to check the resultant value of var_3. co Test this page in your browser. co If the text in the alert box does not appear as expected, consider the use of spaces in the variable assignments, and correct the error. © Now, modify your code to produce the same result but without requiring a third variable © Clear all statements from the current script tags. © Add two statements to the script which assign the numbers 100 to one variable and 5.5 to another. o Use document .write to show the effects of each of the operators given in the table on page 34 on the two numerical values © Substitute one of the numerical values for a text string and repeat the procedure, Note the differences.JavaScript for Beginners 1 2 Comparisons Key Points ° Comparison operators compare two values with each other. Most commonly, they are used to compare the contents of two variables ~ for example we might want to check if the value of var_1 was numerically greater than that of var_2. When you use a comparison operator, the value that is returned from the comparison is invariably a Boolean value of either true or false. For example, consider the following statements: var_l var_2 = 4; = 10; var_3 = var_1 > var_2; In this case, the value of var_3 is false, Note that the Boolean value of false is not the same as the text string “false”: var_4 = false; // Boolean value var_5 = “false”; // Text string Common comparison operators are given below: Comparison Function Returns true ifx and y are equivalent, false otherwise Xlky Returns true if x and y are not equivalent, false otherwise X>y Returns true if x is numerically greater than y, false otherwiseJavaScript for Beginners a Project ° Xe=y Returns true ifx is numerically greater than or equal to y, false otherwise X var_2; var_l <= var_2; both of these are equivalent, but one may make more semantic sense in a given context than the other. Open your previous project file, and save it under the name chapter_12.html. Ensure that your two variables both have numerical values in them and not strings. Use an alert box to display the result of a comparison of your two variables for each of the comparison operators listed above. Substitute one of the numerical values for a text string and repeat the procedure. Note the differences.JavaScript for Beginners 1 3 Conditionals Key Points ° Up until now, our JavaScript projects have been unable to alter their behaviour spontaneously. When a page loads with our JavaScript embedded within, it is unable to do anything other than what we expect, time and again. The only difference we have seen is in the use of a prompt box to alter what is shown on a page. However, the page essentially does the same thing with the text provided, regardless of what text is typed in. What would be really handy would be to give JavaScript a mechanism to make decisions. For example, if we provided a prompt box asking the visitor for their name, it might be nice to have a list of “known names” that could be greeted differently from any other visitors to the site. Conditional statements give us that ability, and are key to working with JavaScript. A conditional statement consists of three parts: A test (often with a comparison operator, or comparator) to see if a given condition is true or false. A block of code that is performed if and only if the condition is true. An optional block of code that is performed if and only if the condition is false.JavaScript for Beginners 43 co These three parts are represented in JavaScript as follows: if ( conditional_test ) { JavaScript statement; JavaScript statement; JavaScript statement; + else { JavaScript statement; JavaScript statement; JavaScript statement; } © Everything from the first closing curly bracket (or brace) is optional, so the following is also a valid conditional prototype: if ( conditional_test ) { JavaScript statement; JavaScript statement; JavaScript statement; } o In this case, if the conditional_test does not return true, nothing happens. o Anexample of complete conditional statement is as follows: if ( var_l > var_2) { alert(“Variable 1 is greater”); + else { alert ("Variable 2 is greater”); ,JavaScript for Beginners © Note that the above condition is not necessarily always correct. Consider the case where var_1 is equal to var_2. In that case, the above code will produce the message that “Variable 2 is greater”, since var_1 > vax_2 returns false. In this case, we want to add an additional condition to the else branch of code: if ( var_l > var_2 ) { alert(“Variable 1 is greater”); + else if ( var_l < var_2) « alert(“Variable 2 is greater”); , © In this case, equality will produce no output, as neither of the conditions will return true. For completeness, we could add a final else branch to the statement: if ( var_l > var_2 ) { alert(“Variable 1 is greater”); } else if ( var_l < var_2 ) { alert (“Variable 2 is greater”); + else { alert(’The variables are equal”); } © Note that in this case, we don’t have to check for equality in the final branch, as if var_1 is neither greater than nor less than var_2, then — numerically at least — the two must be equal. © We can continue adding as many else if statements as required to this stack.JavaScript for Beginners 45 ° ° Project ° If you only have one statement following your conditional test, the braces may be omitted: if ( var_1 > var_2 ) alert(“Variable 2 is greater”); However, if you later want to add further statements to this conditional branch, you will have to add braces around the block, and this can lead to confusion. It is recommended that you use braces to enclose all blocks of conditional code. Consider the following block of code: if( var_1>4) { var_2 = var_l; + else { var_2 = 4; , This code is rather long, but achieves comparatively little — var_2 is equal to var_1 or 4, whichever is greater. ‘A more compact way of writing this could be: var_2 = 4; if ( var_l > var_2 ) { var_2 = var_l; } However, an even more compact way of writing this could be to use the ternary operator: var_2 = (var_l > 4) ? var_l: 4; In the above statement, the conditional is evaluated and, if true, the value returned is the value between ? and : symbols, or if false, it is the value between the : and ; symbols. Open your previous project file, and save it under the name chapter_13.html. Clear all JavaScript code from your script tags. Create two variables and ign numerical values to them.JavaScript for Beginners Project 2 ° Use a conditional statement to show alert boxes declaring which variable is the greater of the two. Consider the following code: var_3 = (var_l > var_2); Use this code in your script to simplify your conditional checking code. Now, use a prompt box to ask your visitor their name. Assign this name to var_3. Check to see if the name typed in is your own name. If itis, use document .write to display a personalised greeting on the page. Otherwise, display a generic greeting Use multiple else if branches to check the typed name against the names of some of your friends. Create personalised messages for all of them. There may be a way to simplify your conditional greeting code to use only one document . write statement. See if you can figure out how. Hint — how might you use a variable called greeting? In many cases, the brevity of your conditional statements will rely on your ability to formulate the right “questions” to consider when performing your tests. Try to make your solution to the following problem as concise as possible. Clear all of your current code from the script tags. Ensure that your script tags are currently situated in the body section of the page. Create a variable called exam_result and store a numerical value of between 0 and 100 in it.JavaScript for Beginners aT ° Use an if statement and multiple else if statements to check the value of this variable against the following exam grading scheme, and print out the appropriate message to the page: Exam Result Result Message 90 or more Excellent. Pass with Distinction Between 70 and 89 Well Done. Pass with Honours Between 55 and 69 Just passed. 54 or below Failed. Do better next time, Test your result in your browser. Vary the value of exam_result and check the value shown in the browser. For extra practise, try to use a prompt box to make changes to your exam_result variable as easy to achieve as possible.JavaScript for Beginners 48 1 4 Looping Key Points © The letters i, j and k are traditionally used by programmers to name variables that are used as counters. For example, at different stages of the program, i may contain the numbers 1, 2,3 ete. © Inorder to achieve a “counting” effect, you will need to increment or decrement the value of your counting variable by a set value. Here are some examples: i+ 35; iner = 10 i= i + incr; o To keep things concise, we can use the following shortcuts: i+; itt; // equivalent to i i--; i+; -; // equivalent to i © Counting in JavaScript, like many other programming languages, often begins at zero.JavaScript for Beginners 49 © In many cases, this makes a lot of sense, as we will see. However, it can often cause confusion. Consider starting at 0 and counting up to 10. In that case, we may have actually counted 11 items: qa) Q) (3) (4) ©) (6) 2) (8) 1) 0 aly mew dsHVEYN-o © Ifyou wanted to give an instruction to someone to perform a repetitive action, you might say that you wanted them to continue the action for a certain number of times. If someone were performing an action 300 times, for example, they might do something like the following to ensure that their count was accurate: © Write the number | on bit of paper. © After each action, erase the number on the bit of paper and increment it by 1 © Before each action, check the number on the bit of paper. If it is less than or equal to 300, perform the action. © Alternatively, they might decide to start counting at 0. In this case, the procedure would be identical, but the check before each action would be to make sure that the number was strietly less than 300. © In JavaScript, we say almost the same thing. The following code will display the numbers | to 100 on the page: for (i= 1; i <= 100; i++ ) { document .write(“

” + i “

"); +JavaScript for Beginners Project The for statement tells the browser that we are about to perform a loop. The layout here is very similar to a conditional statement, but in this case we have much more information in the brackets. Where our conditional had one JavaScript statement to describe its action, a for loop has three: An initialiser — this sets up the initial counting condition, in this casei = 1. A conditional — this is identical to our conditional statements carlier, and must return true or false. If it returns true, the loop continues, otherwise it exits. An incrementer — this defines the action to be performed at the end of each loop. In this case, i is incremented by a value of 1 The key difference between a conditional and a for loop is that the condition is constantly being changed and re-evaluated. It is possible to create an infinite loop by making the conditional non-reliant on the count value ~ for example: for ( itt) will always perform the script in the braces, and will probably cause errors in the browser. Note too that it is very common to start counting at zero in JavaScript. The reason for this is that it is often desirable to count how many times an operation has been performed. Consider the following: for (451; 1 <2; itt ) In this case, the loop will run once, but the value of i will be 2, as after the first run, i will be incremented to 2, and will then fail the test and so the loop will exit. If we use the following: for ( pL <1; itt) Then the loop will run once, and the value of i afterwards will be 1, as we might hope. Open your previous project file, and save it under the name chapter_14.html. Clear all JavaScript code from your script tags.JavaScript for Beginners © Write a series of statements to produce a multiplication table as follows: The 12x Multiplication Table 4x i2=as Sx 12=60 6xi2=n Ix 12=84 812-95 9x 12= 108 wx co The following exercise is more of an HTML example, but demonstrates an important facet of using JavaScript (or, indeed, any programming language) to produce well-formatted text. © Modify your previous code to make your page’s content appear in the centre of the page. Put your multiplication table in an HTML table to make sure that the equals signs, multiplication signs and so forth line up in neat columns: The 12x Multiplication Table stJavaScript for Beginners o Asa hint, here is a look at the table cells involved: The 12x Multiplication TableJavaScript for Beginners 53 1 5 Arrays Key points ° In many cases, variables will completely satisfy our data storage needs in JavaScript. However, in a large number of cases, we may wish to “group” variables into a collection of related items. Take, for example, days of the week. In each day we perform a number of tasks, so we could want to record each task as a separate item under a group called, say, Monday’s Tasks. Tn JavaScript, to achieve this we would store each task in a separate variable, and then group those variables together into an array. An array isa special type of JavaScript object that can store multiple data values — unlike a variable, which can only store one data value at a time. It could be helpful to think of an array as a row of mail boxes in an office, just as you might think of a variable as a single, solitary mail box. The boxes in an array are numbered upwards, starting at box number 0 — note that counting begins at 0 here, just as we discussed in the previous chapter. The number assigned to each box is known as its index.JavaScript for Beginners ° In order to use an array in JavaScript, you must first create it. ‘There are a number of ways to create arrays in JavaScript. The simplest follows: arrDays = new Array(); This statement creates a new, empty array called arrDays. We can call arrays just like we can variables, but with a few minor adjustments. If you already know how many elements a given array will have, you can declare this explicitly: arrDays = new Array(7); This modification creates an array with 7 empty boxes. However, arrays will expand and contract to the required size in JavaScript, so the cases where you will need to state the size of the array are rare. More useful, however, is the ability to “fill” the boxes of an array when you create it. For example: arrDays = new Array(“Monday”,”"Tuesday”) ; We now have an array with two elements. The first (clement 0) has a value of “Monday”, while the second (clement 1) has a value of “Tuesday”. We need not restrict ourselves to string values in arrays — Boolean, numerical and string values are allowed, as in arrays. It is even possible to assign other arrays to array elements — more on this later. The most often-used way of creating an array is to use “square bracket” notation, Square brackets play a large role in the use of arrays, so this is often the easiest method to remember: arrDays = [“Monday”,”"Tuesday”]; This is identical to the previous example.JavaScript for Beginners 55 © To access an array’s elements, we first call the array’s name, and then specify the number of the element in square brackets, like so: alert (arrDays[0]); Note the lack of quotes around the 0 here. This line of code is equivalent to: alert (“Monday”); assuming the array is defined as in the previous examples. © Not only can we access the value of an array element using this notation, but we can also assign the value as well: arrDays[2] arrDays[3] “Tuesday”; “Wednesday”; © Ifyou wish to add an clement to an array without knowing the index of the last element, you can use the following code: arrDays[] = “some other day”; © Aswe will sce, arrays are actually just special JavaScript objects, and have properties and methods associated with them. ‘The most important property that every array has is its length property: how_many_days = arrDays.length; © As well as properties, arrays have very usefull methods. If you wished to sort your array alphanumerically, you could use the array’s sort method thus: arrDays.sort(); Note that the sort method works on the actual array itself, over- writing the current values. So, if you had an array with each day of the week as an element, calling its sort method would mean that arrDays [0] was then equal to “Friday”, not “Monday” Project © Open your previous project file, and chapter_15.html.JavaScript for Beginners ° Clear all JavaScript code from your script tags. Write a few JavaScript statements that will present the months of the year on the page in alphabetical order. You should use the following technique to achieve this: Store the names of the months of the year in an array. Use an array method to sort the array elements alphanumerically. Use a for loop to iterate through each array element in turn, and print the value of the element to the screen (hint, consider the use of array [i], where i is the for loop’s counter), The above method (the use of a for loop to iterate through a series of array elements) is one of the first common programming techniques we have discussed in this course. Its usefulness cannot be overstated, as it allows us to perform repetitive tasks on a series of related elements without necessarily knowing what those elements might be when we wrote the code. It can be applied to form elements, cookies, page elements, pages, windows, and just about any other collection of object that you might wish to manipulate with JavaScript. To reinforce this generalism, if you have not used the array. length value in your loop, consider its use now. To prove that you have created a more generic loop, try the code with an array of days instead of an array of months, and see if you have to change any of the looping code.JavaScript for Beginners 7 16 Associative & Objective Arrays Key Points ° We have already seen that we can access array elements by their index: arrDays = [“Monday”, “Tuesday”]; // print “Monday” to the page document .write(arrDays[0]); However, it might be more useful to be able to name our array elements. By default, an array will be created as a numeric array. We can also create an asso arrDays = new Array(); arrDays[“Monday”] = “Go to the dentist”; arrDays[“Tuesday”] = “Attend JavaScript class”; arrDays["Wednesday”] = “JavaScript homework”; // vemind you of Wednesday's task alert (arrDays[“Wednesday"]); This looks a lot like our previous discussion of objects and properties. In fact, since an array is actually an object, we can access its elements as though they were properties: // vemind you of Wednesday's task alert (arrDays.Wedensday) ;JavaScript for Beginners Project ° Note a subtle difference here — in our previous, numeric array examples, the names of the week days were the values of our array elements. Here, the names of the week days are the indexes of our elements. Avoid the following common error: arrDays = [“Monday”, “Tuesday”; arrDays["Monday"] = "Go to work”; // this is actually equivalent to arrDays = new Array(); arrDays[0] = “Monday”; arrDays[1] = “Tuesday”; arrDays["Monday”] = “Go to work”; // and arrDays.length is now 3, not 2 Open your previous project file, and save it under the name chapter_16.html. Clear all JavaScript code from your script tags. Write a new script which creates a new, seven element associative array called Week: Use the days of the week as indexes for each element of the array. Assign a task to each day of the week as each associative element is created. Use a for loop to display a calendar on the page, as follows: Monday: task Tuesday: task etc... Modify your code to use a prompt box to ask the visitor to choose a day, and display on the page the task allotted to that day.JavaScript for Beginners 59 1 7 Two Dimensional Arrays Key Points ° Referring back to our mailbox analogy, where our array could be pictured as a row of mailboxes, each with its own contents and label, a two dimensional array can be thought of as a series of these rows of mailboxes, stacked on top of each other. In reality, a two dimensional array is simply an array in which each element is itself an array. Each “sub array” of a two dimensional array can be of a different length — in other words, the two dimensional array doesn’t have to be “square”. You can access the contents of each sub array by using two pairs of square brackets instead of just one. An example will illustrate this best: array_1 = [“element”, “element 2”]; array_2 = [“another element”, 2, 98, true]; array 3 = [array_1, array 2]; alert(array_3[1][3]); // displays “98” While you can’t mix numerical and string indexing systems in a single array (i.e. an array cannot be both numerical and associative), you can have both associative and numerical arrays in two dimensional arrays. For example, consider the above recast as follows: array_3 = new Array(); array_3[“firstarray”] = array_1; array_3[“secondarray”] = array 2; alert (array_3[“secondArray”] [3]); //displays “98” againJavaScript for Beginners Project ° Similarly, we can happily use our “objective” notation for associative arrays: alert (array_3.secondarray[3]); //displays “98” yet again Open your previous project file, and save it under the name chapter_17.html. Building on your previous project, create a number of new, seven element associative arrays to represent 4 separate weeks. Combine these 4 weeks into a four element array to represent a month, Modify your previous code to take a week number and print out all that week’s activities to the page Modify one of your week arrays to consist not of single elements, but of arrays of hours from 8am to Spm. This then represents a three dimensional array. We can extend arrays to be n-dimensional, where n is more or less arbitrary. Finally, alter your code to prompt the user for three values — a week, a day and an hour. Store these values in three separate variables, and use those variables to display the requested task, or else to display an error message if a task cannot be found.JavaScript for Beginners st 1 8 String Manipulation Key Points ° Throughout your use of JavaScript in a production environment, you will often use it to read values from variables, and alter a behaviour based on what it finds. We have already seen some basic string reading in the section on comparisons where we test for equality. However, this all- or-nothing approach is often not subtle enough for our purposes. Take the case where we want to check a user’s name against a list of known users. If the user enters their name as “Karen”, for example, that will be fine if and only if they spell the name precisely as we have it recorded, including capitalisation etc. If the user decides to type in her full name, say “Karen Aaronofsky”, the code will not recognise her. In this case, we want to see if the text “Karen” appears at all in the string. We call this substring searching, and it can be incredibly useful One of the simplest substring searches is done by using the indexof method. Every string-type variable has this method associated with it. Consider this code: var_l = “Karen Aaronofsky"; var_2 = var_1.indexof (“Karen”); In this case, the value of vax_2 will be 0 — remembering that JavaScript begins counting at 0!JavaScript for Beginners co If we were to search for a surname here: var_l = “Karen Aaronofsky"; var_2 = var_1.indexOf(“Aaronofsky”) ; var_2 will have a value of 6. ©. Finally, if the search were to “fail”, so say we searched for the name “Anisa” as a substring, the value of var_2 would then be-1. o Note that this is more flexible, but still presents an issue if the user forgets to capitalise any of the substrings that we are searching for — in JavaScript, “Karen” does not equal “kare o Inorder to get around this, we might want to ensure that capitalisation is not taken into account. A simple way to achieve this is to force strings into lowercase before the check is performed: real_name = “Karen”; name = prompt(“Your name?”,"” real_name = real_name.toLowerCase(); try_name = try name.toLowerCase(); if ( try_name.indexof(real_name) > -1 ) { alert (“Hello Karen!”) + else { // note we use the original, // non-lower-cased name here alert (“Welcome “ + name); + ©. There are a number of string methods we can use to perform “value checks” on strings. A few are printed in the following table: ‘Method Behaviour String.indexOf("str”) Returns the numerical position of the first character of the substring “str” in the String String.charAt(x) Returns the character at position x in the string— the opposite of indexOfJavaScript for Beginners 63 String.toLowerCase() Returns a copy of the string with all capital letters replaced by their lowercase counterparts String.toUpperCase() Returns a copy of the string with all lowercase letters replaced by their capital ‘counterparts String match(/exp/) Returns true or false based on a regular expression scarch of the string o The final method here deserves some comment. What is a regular expression? © A regular expression is a standard way of writing down a “pattern” of characters that is easily recognisable. For example, consider a typical email address: [email protected] © Anemail address follows a “pattern” which makes it instantly recognisable as an email address to a human, Wouldn’t it be handy if we could define that pattern in JavaScript for a browser to use? Regular expressions allow us to do just that. © Let’s look at our email address again. We can break it down to a “prototype” email address as follows: [some letters]@[some more letters].[a few more letters] © Of course, it’s slightly more complex than that — there are some characters which aren’t allowed to be in certain parts of the email address (no spaces, for example), but this lets you see the idea of breaking this string up into required “chunks”. © Now, to convert this to a regular expression. Just as we use quote marks to denote (or “delimit”) string values in JavaScript, to signify a regular expression, we use forward slashes: /. Our email address regular expression might look like this: LO AGAN HS/ © This warrants some discussion. Let’s look at this a character at a time: co / denotes the start of the regular expressionJavaScript for Beginners © * denotes that we want this regular expression to be found at the very beginning of the string we are searching. + the dot symbol is used to stand in for any character. The plus signifies we want to find at least one of those. So this is equivalent to our plain-English phrase [some letters]. © @ this is simply a character — it has no special meaning other than to say we want to find an @ character after at least one character from the beginning of the string. o .+the same as before — at least one more character after the @. co \. This is interesting. We know that the dot symbol has a special meaning in a regular expression — it means “match any character”. However, here we want to find an actual dot. Unlike @, which has no special meaning, we have to tell JavaScript to ignore the dots special meaning. We do this by preceding it with a backslash, which tells JavaScript to treat the character immediately following it as though it has no special meaning. This is a convention you will come across many times while programming. The net result here is that we want to match a dot after a series of characters. co .+and again, at least one more character after the dot. © $ this is the mirror of the * at the beginning — this matches the end of the tested string. © /tells JavaScript we are at the end of the regular expression. © Phew! Lots to consider here. Regular expressions are an arcane art at the best of times, so don’t worry too much if the above code is indecipherable. The important thing to realise at the moment is that we can perform some quite sophisticated pattern recognition in JavaScript without having to resort to checking each individual character of a string multiple times.JavaScript for Beginners 65 ° The following code checks a variable to see if it looks like an email address: var_1 = prompt(“Your email?”, “"); if ( var_l.match(/*.+@.+\..4$/) ) { } else { + alert(“valid email address”); alert(“are you sure?"); There are a few problems with this code at the moment — for example, it will pass the string “-@-.~" quite happily, which is clearly wrong. We will look at ways around this later on in the course. Open your previous project file, and save it under the name chapter_18.html. Clear all JavaScript code from your script tags. Use a prompt box to capture some user input to a variable called check_string. Use a document.write statement to output the results of each of the various string methods when applied to the user input. Check the user input to sce if it’s an email address, and alter your output accordingly to either “That’s an email address” or “That doesn’t look like an email address to me!” In the latter case, output the failed string as well so that the user can see their input and modify it next time, if appropriate.JavaScript for Beginners 1 9 Using Functions Key Points ° A funetion is a named set of JavaScript statements that perform a task and appear inside the standard tags. ‘The task can be simple or complex, and the name of the function is up to you, within similar constraints to the naming of variables. JavaScript functions are declared before they are used. The declaration looks like this: function name_of_function( ) { + “your code here.. Unlike all the JavaScript instructions we have looked at so far, the code inside a function will not be run until specifically requested. Such a request is called a function call. Functions can be called from anywhere on the page that JavaScript can live, but must be called after the function has been declared. For example, if you declare a function in the body of a document and then call it from the head of the document, you may find that the browser returns an error message. For this reason, most JavaScript programmers define any functions they are going to use between tags in the head section of their pages to ensure that they are all defined before they are used. Functions are to object methods as variables are to object properties — they are also called in a similar manner. To run the code contained in the name_of_funct ion function above, we would use the following line of code: name_of_function();JavaScript for Beginners or o Note the parentheses after the function name. This lets JavaScript know that we are dealing with a function and not a variable. The parentheses also allow us to “pass” extra information to the function, which can alter its behaviour. Consider the following function: function greet_user( username ) { message = “Hello “ + username; alert (message) ; + © Whenever the function is called, it will grect the user named. How can we pass this information through? Consider: greet_user(“Anisa”); or var_1 = prompt (”Name?”, “"); greet_user(var_1); ‘© We should use functions in our code as often as possible. Whenever we perform an action that isn’t accomplished by the use of a method or an assignment operator, we should try to build a function that can accomplish the task. o For example, we can build a function to check email addresses: function check_email( address ) { var_l = false; if ( address.match(/*.+@.+\..+$/) ) { var_l = true; } } © The above function will take a string that is passed to it (often called the function’s argument), and will alter the value of var_1 depending on what it finds. However, the function is lacking an important ability — the ability to communicate its findings back out to the rest of the script.JavaScript for Beginners ° ° We have mentioned return values a few times in the notes. Now we sce a situation that requires a function to return its findings to the rest of the code. Ideally, we'd like to be able to use the above function as follows: if ( check_email(address) ) { } do some email things... In order for this to work, the return value from check_email would have to be a Boolean value. We can arrange this quite simply: function check_email( address ) { var_l = false; if ( address.match(/*.+@.+\..+$/) ) { var_l = true; } return var_1; + Since var_1 is either true or false, the returned value will be Boolean. We can even skip the use of the variable here and be more direct: function check_email( address ) { if ( address.mateh(/*.+@.+\..+8/) ) { return true; , return false; + or even better, since address.match() will return a Boolean value of its own: function check_email( address ) { + return address.match(/*.+@.+\..+$);JavaScript for Beginners 69 ° Project ° The above function may not seem like a great saving. After all, we are using four lines of code to define a function that performs only one line of code. Compare: function check_email( address ) { return address.match(/*.+@.+\..+$); } if ( check_email(address) ) { do some email things. + with: if ( address.match(/*.+@.+\..+$/) ) { + do some email things... While the benefits here are not obvious, consider the case where, at some point in the future, you discover a better method of checking for email addresses. In the second case abov, you will have to search your code for each and every instance of that method, and replace it with your new method, which may not be one line of code. In the first case, you will just have to change the underlying function definition, and the “upgrade” will be effective throughout your code without you having to update each occurrence. Open your previous project file, and save it under the name chapter_19.html. Clear all JavaScript code from your script tags. Ensure that you have a script element in the head area of your document, and one in the body area. In the head area, define a function called show_message. This function should take one argument, called message, and should use an alert box to display the contents of the argument. In the body area, call the function with various messages as arguments.JavaScript for Beginners 70 © Now use a variable in the body area to store the return value of a prompt asking the user for a message. Use this variable as the argument to a single instance of show_message. © Define a new function in the head area called get_message. It should take no argument, but should replicate the function of your prompt in the body area and ask the user for a message via a prompt box. © Make sure that get_message returns a sensible value. We are aiming to replace our prompt statement in the body area with the following code: message = get_message(); so consider what you will have to return to enable this to work. © Once you are happy with your get_message definition, try replacing your prompt code in the body area with the statement above, ‘© To demonstrate the power of functions, change the action of show_message to write the message to the page without changing any code in the body area of the page.JavaScript for Beginners n 2 0 Logical Operators Key Points ° In our discussion of conditionals, we saw how to check the veracity of a single condition via a comparator: if ( x > some_value ) { + expressions... We have also seen the limitations of such an approach. Let us say we wanted to discover if x lay between two values, say val_1 and val_2. There are a number of ways we could achieve this. In our example on student grades, we learned that we could use an if..e1se pair to achieve this effect if( x > vali) { do somethin: } else if ( x > val_2 ) { do something else... + The above code achieves what we want — for the second branch, x must lie between val_2 and val_1 (assuming val_1 is greater than val_2, of course). However, it’s rather unwieldy, and does not scale elegantly to checking three conditions (say we wanted to check if x was an even number as well), or in fact to ten conditions. Enter Logical Operators. These operators are used to join together conditional checks and return true or false depending on whether all or any of the checks are true.JavaScript for Beginners ° In English, we refer to these operators by using the words “AND” and “OR”. For example, say we wanted to do something each Tuesday at 8pm. We would want to check whether the current day was Tuesday, and whether the time was 8pm. Another example: Let’s say we wanted to do something on the first Tuesday of each month, and also on the 3" of the month as well. We would have to check whether the current day was the first Tuesday of the month, or whether it was the 3 day of the month. Note in the last example, if both conditions were true, then we would be on Tuesday the 3" and would perform the action. In other words, an or condition allows for either one, or the other, or both conditions to be true.JavaScript for Beginners ‘© In JavaScript, we use the following syntax to check multiple conditions: (100 > 10 & 5 <8) translates as “if 100 is greater than 10 and S is less than 8”. In this case, the result is true. (100 > 200 & 4<9) in this case, the result is false, Note here that only the first condition is actually checked. Since and requires both comparisons to be true, as soon as it finds a false one it stops checking. This can be useful. (100 > 10 || 9<8) translates as “if 100 is greater than 10 or 9 is less than 8”. In this case, the result is true, since at least one of the conditions is met. ( 100 > 200 || 4>9) in this case, the result is false since neither of the comparisons are true, Finally: ( 100 > 200 || 5< 2 || 3>2) in this case, the result is true. Any one of the three being true will provide this result, © As we can see from the last example, this method of checking scales to any number of conditions. We can also mix and match the operators, For example: (( 100 > 200 && 100 > 300 )|| 100 > 2) in this case, the and condition evaluates to false, but since either that or the last condition has to be true to return true, the overall condition returns true as 100 is indeed greater than 2. ©. This sort of complex logic can take a while to comprehend, and will not form a set part of the course. However, it is useful to be aware of it.JavaScript for Beginners m4 Project ° Open your previous project file, and save it under the name chapter _20.html. Clear all JavaScript code from your script tags. Ensure that you have a script element in the head area of your document, and one in the body area. Copy the file available_plugins.js from the network drive (your tutor will demonstrate this), and open it using NotePad’s File > Open command. Copy and paste the entire contents of available_plugins.js into your current project file, into the script element in the head area of your page. Have a read through the code. Note that it defines a large, two dimensional array. The array has a list of various components that can be present in web browsers (such as Flash or Quicktime) Add a function to the head area script element, called flash_exists(). This function should use a for loop to check each of the elements of the available_plugins array and establish if Flash is present. Add a further function to the head area script element, called quicktime_exists(). This function should also use a for Toop to check each element of the array, this time returning true if Quicktime is present. Finally, add a function to the head area script element called both_quicktime_and_flash_exist(). This function should call both of the previous functions, store their results in a variable, and produce an alert box containing the message: “Both Quicktime and Flash” if both functions returned true; or: “One of Quicktime or Flash is missing” if either of the functions return false. Call the final function from the body area script element. Check your results in your browser.JavaScript for Beginners 5 2 1 Using Event Handlers Key Points © So far, our scripts have run as soon as the browser page has loaded, Even when we have used functions to “package” our code, those functions have run as soon as they have been called in the page, or not at all if no call was made. In other words, the only event our scripts have so far responded to has been the event of our page loading into the browser window. © Most of the time, however, you will want your code to respond specifically to user activities. You will want to define functions, and have them spring into action only when the user does something. Enter event handlers. co Every time a user interacts with the page, the browser tells JavaScript about an “event” happening. That event could be a mouse click, a mouse pointer moving over or out of a given element (such as an image or a paragraph), a user tabbing to a new part of an HTML form, the user leaving the page, the user submitting a form and so on. © Anevent handler is a bit of JavaScript code that allows us to capture each event as it happens, and respond to it by running some JavaScript code. © In general, we attach event handlers to specific HTML tags, so a mouse click on one element of the page might be captured by an event handler, but clicking somewhere else might do something completely different, or indeed nothing at all. © Some common event handlers are in the table below: Event Handler ‘Oceurs When... onload An element is loaded on the page