ITS331 Information Technology I Laboratory

Size: px

Start display at page:

Download "ITS331 Information Technology I Laboratory"

Marilynn Goodman
5 years ago
Views:

1 ITS331 Information Technology I Laboratory Laboratory #11 Javascript and JQuery Javascript Javascript is a scripting language implemented as a part of most major web browsers. It directly runs on the client's web browser and is useful for basic data processing before sending to a web server, as well as improving interactiveness of web application. Javascript uses Java-like syntax, but it is a dynamic and weakly typed scripting language. In this lab, we intend to provide a crash course on Javascript. We assume that you are familiar with C. What follow are a sequence of short Javascript code snippets which should demonstrate the basic constructs (i.e., if, for-loop, while, strings, arrays). Variables and Strings <!DOCTYPE html> <html> <body> <script type="text/javascript"> var samp_str = "To print <b>bold</b>"; document.write(samp_str + "<br>" ); var first = "First string"; var second = "Second string"; document.write(first + " combined with "+second + "<br>"); document.write("length of first: " + first.length + "<br>"); document.write("substring: "+first.substring(0,3)+ "<br>"); // Fir not Firs document.write("last character: "+first.charat(first.length-1)+"<br>"); var x = Number("13") + Number("3"); // convert strings to numbers document.write(x + "<br>"); // print 16 </body> </html>

2 Javascript can be directly embedded in HTML by surrounding the code with <script>.. tag. Variables are weakly (has automatic type conversion) and dynamically (same variable can be used to store different types) typed. In principle, it is not necessary to declare a variable before using it. However, it is a good practice to do so by using var varname. Printing a value out is done with document.write( value );. The semantic of this statement is pretty much the same is in echo of PHP. That is, the output turns into a usual HTML code. If an HTML tag is included in the value, it is rendered as if it is typed directly as an HTML code. Strings are defined with either double quotes or single quotes. Concatenating two strings is done with a + operator. Internally, strings in Javascript are objects. The length of a string can be obtained by accessing the length attribute. Many convenient methods are built-in in the String class. This includes substring(), and charat(). A string s can be parsed as a number with Number(s). If Statements var x = 43; if(x < 5){ document.write(x + " is < 5. <br>"); else if(x > 5){ document.write(x + " is > 5. <br>"); else{ document.write(x + " is 5. <br>"); If statements work in exactly the same way as in C language. The value 0 is treated as false, and everything else is treated as true. All logical operators (==,!=, <, <=, >, >=, &&,,! ) in C work as expected in Javascript. Arrays and For Loops var vehicles = ['car', 'truck', 'van']; //same as: var vehicles = new Array("car", "truck", 'van'); for(var i=0; i<vehicles.length; ++i){ document.write(i + ": " + vehicles[i] + "<br>");

3 // associative array (actually an object) var person = {"name": "John", "age": 21; person.major = "IT"; // same as person["major"] = "IT" for(k in person){ // k is the keys (properties) in the array document.write(k + ": " + person[k] + "<br>"); Arrays in Javascript, like String, are also objects. They are defined with new Array( elem1, elem2 );. One can also do the same thing with [ elem1, elem2 ] which does the same thing, and is more concise. The length of an array can be obtained by accessing it length property. By using this property, all elements in an array can be iterated by a simple for loop as shown above. Arrays can also be associative (have string indexes). For example, to define an array mapping name to John, and age to 21, one uses {"name": "John", "age": 21. All the keys (properties) of an associative array can be accessed with a for-each loop. The foreach loop in Javascript has the following form for( key in array ) { // where key binds to a key in the array in each iteration. While Loop var count = 1; while(count <= 10){ // print 1,2,..,5 document.write(count + "<br>"); count++; if(count >= 6){ break; While loops work the same way as in C. This includes the way break and continue works.

4 Defining Functions function add(one, two){ return one + two; document.write("1+3 = " + add(1, 3)+"<br>"); //1+3 = 4 Functions are defined much like in PHP. That is, there is no need to specify the return type when defining a function. Function definitions can float around or be in the middle of a running code. The functions will not be executed unless called (like add(1,3) above). Alternatively, function definitions may also be separated into another file. Including an External Script An external script allows one to group a number of related code snippets together. For example, we have another file called func.js having the following content. function multiply(n1, n2){ return n1*n2; This func.js file can be included into another HTML file by using <script language="javascript" src="func.js"> After the inclusion, all the functions defined in func.js can be called as if they are defined in the including file. jquery In practice, the real purpose of using Javascript is to manipulate DOM (Document Object Model) elements in the HTML page. For example, one can define what to do (e.g., change a CSS property, alert a message box) when a particular element (tag) in the page is clicked. Doing this is so common that people create a library specifically just for this purpose. It is called jquery. jquery can, not only manipulate the DOM as standard Javascript can, it also adds several visually pleasing effects like fading out, sliding, explding. In this lab, we directly jump to jquery without mentioning how DOM can be manipulated in standard Javascript. jquery is an open-source library written in Javascript to make it easier and more convenient to use Javascript in our web applications. jquery is used by various commercial websites.

5 Basic JQuery 1. Download jquery (production level) from Now, the latest version is Place the obtained Javascript in a folder (e.g. js subfolder) 3. Put <script> tag in an HTML file to load the jquery script. 4. Create another <script> tag, write your own Javascript code. The following example shows how to write Javascript/jQuery code to make the h1 text change when a user clicks on the button. <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery min.js"> <script> $(function() { $('#mybutton').click(function () { var h = $('#title'); h.html("you've clicked!!!"); ); ); </head> <body> <h1 id="title">hello, jquery</h1> <button id="mybutton">click Me!</button> </body> </html> The example page initially shows a heading tag with "Hello, jquery", and a button. When the user clicks on the button, it changes the heading tag to "You've clicked!!!". 1. $(function() { ); works similar to the main function in C program. The statements inside the braces are executed when the web page is completely loaded. 2. $('#mybutton').click(function() { ); is a callback function definition. This function is called when the button with id "mybutton" is clicked by a user. Note that function() { is a syntax to define an anonymous function (function without a name). One may also define a function as usual and pass the function name to click(). 3. var h = $('#title'); is a variable definition statement that defines a variable h. This variable is set to point to the h1 tag with id "title". $('#title') is defined by jquery. It works similarly to the CSS selectors. 4. h.html("you've clicked!!!"); is a statement that sets the content of the h1 tag to "You've clicked!!!". jquery Selectors jquery defines selectors similarly to CSS selectors. They are used to access and modify the HTML elements. 1. ID selector $('#id') is used to access a particular element specified by id. For example, $('#title') returns the element with id "title".

6 2. Class selector $('.class') aims access a set of elements specified by class, for example, $('.myinput') returns a set of elements with class "myinput". 3. Element selector $('tag') aims to access a set of elements specified by tag, for example, $('h1') returns a set of elements with tag "h1". More selectors like in CSS also work in jquery. For example, the selector div.person p would select all <p> which are inside a <div class= person >. The following code shows how a CSS property can be modified when a link is clicked. In this example, when the link is clicked, all text color in all the paragraphs is changed to red. <!DOCTYPE html> <html> </html> <head> </head> <body> </body> <script type="text/javascript" src="js/jquery min.js"> <script> $(function() { ); Element Traversal $('#link').click(function () { ); <a href="#" id="link">click</a> <p>first paragraph</p> <p>second paragraph</p> <p>third paragraph</p> $('p').css("color", "red"); jquery provides a collection of functions to traversing the collection of elements in order to process the elements. Some examples of the traversing functions are shown below. 1..next() returns the next element of the matched element, for example, $('h1').next() returns the element located next to the elements with h1 tag. 2..prev() returns the previous element of the matched element, for example, $('h1').prev() returns the element located before the elements with h1 tag. 3..child() returns the child element of the matched element, for example, $('div#content').child() returns a set of child elements of the div element

7 with id "content". 4..parent() returns the parent element of the matched element, for example, $('h1').parent() returns the parent element of the element with h1 tag. Effects jquery provides some functions to access and modify the content of web page. 1..html([content]) accesses or modifies the HTML content of the matched elements. 2..append(content) inserts the content at the end of the matched elements. 3..show([duration]) displays the matched elements. Duration specifies the period that the animation will run. You may want to try fadein([duration]) as well. 4..hide([duration]) hides the matched elements. Also try.fadeout([duration]). 5..val([content]) accesses or modifies the values of the matched form input elements. 6..toggle([duration]) shows or hides the matched elements. See also.slidetoggle([duration]). 7..css( property, value ) changes a CSS property of the matched elements. 8..css({ prop1 : val1, prop2 : val2, ) changes multiple CSS properties of the matched elements. 9..addClass( classname ) adds a CSS class to the matched elements. 10..removeClass( classname ) removes a CSS class from the matched elements. 11..remove() removes the matched elements. Events Here are some examples of the events that can be handled by jquery. 1..click(handler) sets up a handler when the matched elements are clicked. 2..dblclick(handler) sets up a handler when the matched elements are double clicked. 3..change(handler) sets up a handler when the value of the matched elements are changed. This event occurs when the elements lose the focus. 4..focushandler) sets up a handler when the matched elements are focused. 5..blur(handler) sets up a handler when the matched elements lose the focus. 6..hover(handler) sets up a handler when the user puts the mouse pointer over the matched elements..mouseover(handler) also does the same thing. 7..mouseout(handler) sets up a handler when the mouse pointer moves out of the matched elements.

8 Example <html> </html> <head> </head> <body> </body> <style> </style> h1 { div#main { text-align: center; width: 800px; margin: 10px auto; border: 2px black solid; padding: 10px; <script type="text/javascript" src="js/jquery.min.js"> <script> $(function() { $('.content').hide(); $('h2').click(function() { $(this).next().slidetoggle("200ms"); ); ); <div id="main"> </div> <h1>its331 Information Technology I Laboratory</h1> <h2>lab 1</h2> <div class="content"> Lorem ipsum... </div> <h2>lab 2</h2> <div class="content"> Lorem ipsum... </div> <h2>lab 3</h2> <div class="content"> Lorem ipsum... </div>

9 Worksheet 1. Unarchive the worksheet file. Here, index.php is an input form for submitting personal information of a customer. 2. Create <script> tag, and write a Javascript/jQuery code that initially hides the input box for the other title. When the user selects "Other" title, then the script should display the input box for the other title. <script> $(function() { ); Exercises $('.other').hide(); $('#title').change(function() { ); var t = $('#title').val(); if (t==3) { else { $(this).next().show(); $(this).next().hide(); 1. Modify the script in the worksheet to make it work when the user chooses the "Other" province. 2. The given score.html is a form for collecting student ID, and quizzes. Write a Javascript/jQuery code that does the following tasks before submitting the form: 1. Check if the input student ID consists of exactly 10 digits (use change()). Get each character one by one with charat(i). Check whether each one is between '0' and '9'. 2. Check if the section number is between 1 and 3. Convert the input to an integer with parseint(value). Check whether the integer is between 1 and Check if each quiz score is not greater than 10 points, and it is not smaller than 0 points. 4. Calculate the total quiz score from the summation of the 3 best quizzes. You may store all integer values in an array arr. Sort it with arr.sort(). Then get the last three values. 5. The script should show the error message in the span tag next to the input box.

CSC 337. jquery Rick Mercer

CSC 337. jquery Rick Mercer CSC 337 jquery Rick Mercer What is jquery? jquery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.