You have a privilege to create a quiz (QnA) related to this subject and obtain creativity score...
4.2.4. Java Script
JavaScript sucks!!! No, it makes miracles! It is hard to write and impossible to debug!
Amazingly conflicting but true statements. I have to correct myself: these are almost true statements.
With more libraries and supporting tools it is not as bad as used to be. And yes, with JavaScript you can dramatically change web pages.
A bit of history
JavaScript was initially introduced in Netscape 2 in Dec 1995, a.k.a. Mocha, LiveScript, Jscript, however, it is official name is ECMAScript (standardized by European Computer Manufacturers Association)
JavaScript belongs to C-family of languages, extremely powerful language for web interaction, totally unrelated to Java.
Traditionally JS advantages and disadvantages are described with following plus and minus lines:
+1. Less server traffic: Can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
+2. Immediate feedback to the visitors: Do not have to wait for a page reload to see if they have forgotten to enter something.
+3. Increased interactivity: Create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
+4. Richer interfaces: Can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.
-1. JavaScript is not a fully-fledged programming language, just a script.
-2. Client-side JavaScript does not allow the reading or writing of files and cannot be used for Networking. This has been kept for security reason.
-3. JavaScript doesn't have any multithreading capabilities and is hard to debug
With new JS libraries such as jQuery, Bootstrap, and Angular, Java Script, is quickly becoming even more powerful than we could imagine before.
The browsers, such as Chrome or Firefox, include JS supporting tools. For example, while working with Chrome press the keys CTRL SHIFT J
You will see supportive information at the bottom of the browser page. Play with the tabs of the tool and explore the options.
Client-side JavaScript is the most common form of the language.
The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need no longer be static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism features many advantages over old style server-side scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are valid they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user explicitly or implicitly initiates.
Language, Type and code: Language attribute specifies what scripting language you are using (javascript), type is the text and code is the java code that we are writing.
Data Types JavaScript allows you to work with three primitive data types:
1) Numbers eg. 333, 321.50 etc.
2) Strings of text e.g. "Internet Technology School" etc.
3) Boolean e.g. true or false.
JavaScript does not have the notion of strong type checking.
The same variable can be a number and then a string. Does it make sense? Maybe not. But the language will not prevent this possibility.
Defining variables:
IF / ELSE conditions
Switch statement
The switch operator is another way of writing if-else conditions.
JS Functions
1) Write a function
2) Call the function
Was it clear so far?
Handling Events with JS: Mouse over and Mouse out.
When a user move a mouse over a link or a text or an image, a browser can generate the mouseover event. When a user moves a mouse out of that subject, (text, link, or image) the browser can generate the mouseout event.
JavaScript can pick up the events and do some actions, for example, call a function, as in the example below.
This is inside the division
Function to validate a form
We will write a function to validate a form. It is a very simple function that will check if the fields are not empty. To make it a bit more challenging task, this form can have required and optional fields. The optional field names will start with the word optional.
It looks like we need to check field names and if the name starts with the word optional, for example, optionalPhone, the function would allow this field to be empty.
So first, we write a supportive function startsWith to check if a word starts with a pattern.
// This "startsWith()" is a supporting function
function startsWith(str, pattern) {
var a=str.substring(0, pattern.length);
return (a == pattern);
}
Then we write a bigger function checkEmptyTextFields which uses our startsWith function to distinguish required fields from optional.
The function takes a form object as an argument and walks through all elements of the form. For each element, e, the function finds its type, e.type, and name, e.name.
The function only looks into text elements, skipping other types, such as radio, etc.
For the text elements the function checks if the name of the element starts with optional word. In that case the function will skip that field, but will check the value, e.value, of other fields (as required) if they are empty.
If any required field is empty, the function will produce an alert (a popup window with a brief message) and return false to prevent submission of the form to the server.
Otherwise, when all required fields are not empty, the function returns true, which is a condition for form submission.
// This function is usually called onsubmit to check for empty fields
function checkEmptyTextFields(aForm) {
// look for all elements/fields of the form
for (var i=0; i < aForm.elements.length;i++) {
var e = aForm.elements[i]; // get next form element
var name = e.name; // get the name of the element
if(startsWith(name, 'optional') ) {
continue; // optional fields must have the names such as 'optionalAddress'
}
var value = e.value; // value of the element
var type = e.type; // type of the element
// specifically check text and password types as well as the select type
if((type == 'text' || type == 'textarea' || type == 'password' || type == 'select') &&
(value == null || value == '')) { // !!! Value
var msg = 'Please fill in required fields: '+name+ ', etc.';
alert(msg);
return false; // will not allow submission
}
}
// all fields are not empty!
return true; // will allow submission
}
As we write JavaScript code that actually could be useful, we collect such code in a file its.js.
We create the registration.html file with the form below. In the beginning of the HTML file we provide the reference to our JS library collected in the its.js file.
Note, that the target for submission is http://datarecords.org/BASE/Lookup. There is also a hidden parameter action-page with the value showData. This server side target will display submitted data. We will talk more about server side programming a bit later?
onsubmit="return checkEmptyTextFields(this);" >
Login:
First:
Last:
Email:
Phone:
Assignments: 1. Create an Eclipse project 4.2.4.JS
2. Create the html and js folders in the project.
3. In the js folder create the its.js file and copy into this file the startsWith and checkEmptyTextFields functions.
4. In the html folder create the registration.html file and copy the example of html above.
5. Find the html file with the Windows Explorer and open with a browser.
6. Play with the fields, make sure you get alerts when some of require fields are empty.
7. The browsers, such as Chrome or Firefox, include JS supporting tools. For example, while working with Chrome press the keys CTRL / SHIFT / J
8. You will see supportive information at the bottom of the browser page. Play with the tabs of the tool and explore the options.
9. Create an HTML file supportiveTools.html to describe useful features you discovered.
Think about this assignment as a brief essay, which can be done in MS WORD, but instead you will use HTML to create a web page.
The goal of this web page is to share what you have learned about the tools that support writing and debugging JavaScript.
10. Navigate to https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics and read about an image changer.
11. Create a web page changeImage.html in the html directory and provide the changeImage.js file in the js directory to support changeable images.
12. Email html and js files to dean@ituniversity.us
Data Types JavaScript allows you to work with three primitive data types:
1) Numbers eg. 333, 321.50 etc.
2) Strings of text e.g. "Internet Technology School" etc.
3) Boolean e.g. true or false.
JavaScript does not have the notion of strong type checking.
The same variable can be a number and then a string. Does it make sense? Maybe not. But the language will not prevent this possibility.
Defining variables:
<script type="text/javascript">
<br/> <!--
<br/> var name = 'Internet Technology School';
<br/> var amount;
<br/> amount = 2000.50;
<br/> amount = 'A really big number'; // no type checking
<br/>//-->
<br/></script>
IF / ELSE conditions
<script type="text/javascript">
<br/><!--
<br/>var salary = 10000;
<br/>if( salary < 10000 ){
<br/> document.write("<b>Tax is 0.1 of salary </b>");
<br/>}else{
<br/> document.write("<b>Tax is 0.2 of salary </b>");
<br/>}
<br/>//-->
<br/></script>
Switch statement
The switch operator is another way of writing if-else conditions.
<script type="text/javascript">
<br/><!--
<br/>var grade='A';
<br/>document.write("Entering switch block<br/>");
<br/>switch (grade)
<br/>{
<br/>// if (grade == 'A') document.write("Good job<br />");
<br/> case 'A': document.write("Good job<br/>");
<br/> case 'B': document.write("Pretty good<br/>");
<br/> case 'C': document.write("Passed<br/>");
<br/> case 'D': document.write("Average<br/>");
<br/> case 'F': document.write("Failed<br/>");
<br/> default: document.write("Unknown grade<br/>")
<br/>}
<br/>document.write("Exiting switch block");
<br/>//-->
<br/></script>
JS Functions
1) Write a function
<html><header>
<br/><script type="text/javascript">
<br/><!--
<br/>function multiply(one,two)
<br/>{
<br/> var result;
<br/>
<br/> result = one * two;
<br/> return result;
<br/>}
<br/>//-->
<br/></script>
<br/></header>
2) Call the function
<html><body>
<br/><!-- some HTML -->
<br/><script type="text/javascript">
<br/><!--
<br/> var price = 3.5;
<br/> var quantity = 2;
<br/> var total = multiply(price, quantity);
<br/> document.write("total is "+ total);
<br/>//-->
<br/></script>
<br/>
<br/><!-- more HTML -->
<br/></body></html>
<br/>
Was it clear so far?
onclick="window.location.href='/BASE/jsp/demo.jsp?checkFlavor=itsp&issueID=89&intro=general&group=aitu&ur=f'">
Handling Events with JS: Mouse over and Mouse out.
When a user move a mouse over a link or a text or an image, a browser can generate the mouseover event. When a user moves a mouse out of that subject, (text, link, or image) the browser can generate the mouseout event.
JavaScript can pick up the events and do some actions, for example, call a function, as in the example below.
We will write a function to validate a form. It is a very simple function that will check if the fields are not empty. To make it a bit more challenging task, this form can have required and optional fields. The optional field names will start with the word optional.
It looks like we need to check field names and if the name starts with the word optional, for example, optionalPhone, the function would allow this field to be empty.
So first, we write a supportive function startsWith to check if a word starts with a pattern.
<br/>// This "startsWith()" is a supporting function
<br/>function startsWith(str, pattern) {
<br/> var a=str.substring(0, pattern.length);
<br/> return (a == pattern);
<br/>}
Then we write a bigger function checkEmptyTextFields which uses our startsWith function to distinguish required fields from optional.
The function takes a form object as an argument and walks through all elements of the form. For each element, e, the function finds its type, e.type, and name, e.name.
The function only looks into text elements, skipping other types, such as radio, etc.
For the text elements the function checks if the name of the element starts with optional word. In that case the function will skip that field, but will check the value, e.value, of other fields (as required) if they are empty.
If any required field is empty, the function will produce an alert (a popup window with a brief message) and return false to prevent submission of the form to the server.
Otherwise, when all required fields are not empty, the function returns true, which is a condition for form submission.
// This function is usually called onsubmit to check for empty fields
<br/>function checkEmptyTextFields(aForm) {
<br/> // look for all elements/fields of the form
<br/> for (var i=0; i < aForm.elements.length;i++) {
<br/> var e = aForm.elements[i]; // get next form element
<br/> var name = e.name; // get the name of the element
<br/> if(startsWith(name, 'optional') ) {
<br/> continue; // optional fields must have the names such as 'optionalAddress'
<br/> }
<br/> var value = e.value; // value of the element
<br/> var type = e.type; // type of the element
<br/> // specifically check text and password types as well as the select type
<br/> if((type == 'text' || type == 'textarea' || type == 'password' || type == 'select') &&
<br/> (value == null || value == '')) { // !!! Value
<br/> var msg = 'Please fill in required fields: '+name+ ', etc.';
<br/> alert(msg);
<br/> return false; // will not allow submission
<br/> }
<br/> }
<br/> // all fields are not empty!
<br/> return true; // will allow submission
<br/>}
As we write JavaScript code that actually could be useful, we collect such code in a file its.js.
We create the registration.html file with the form below. In the beginning of the HTML file we provide the reference to our JS library collected in the its.js file.
Note, that the target for submission is http://datarecords.org/BASE/Lookup. There is also a hidden parameter action-page with the value showData. This server side target will display submitted data. We will talk more about server side programming a bit later?
Assignments: 1. Create an Eclipse project 4.2.4.JS
2. Create the html and js folders in the project.
3. In the js folder create the its.js file and copy into this file the startsWith and checkEmptyTextFields functions.
4. In the html folder create the registration.html file and copy the example of html above.
5. Find the html file with the Windows Explorer and open with a browser.
6. Play with the fields, make sure you get alerts when some of require fields are empty.
7. The browsers, such as Chrome or Firefox, include JS supporting tools. For example, while working with Chrome press the keys CTRL / SHIFT / J
8. You will see supportive information at the bottom of the browser page. Play with the tabs of the tool and explore the options.
9. Create an HTML file supportiveTools.html to describe useful features you discovered.
Think about this assignment as a brief essay, which can be done in MS WORD, but instead you will use HTML to create a web page.
The goal of this web page is to share what you have learned about the tools that support writing and debugging JavaScript.
10. Navigate to https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics and read about an image changer.
11. Create a web page changeImage.html in the html directory and provide the changeImage.js file in the js directory to support changeable images.
12. Email html and js files to dean@ituniversity.us
