1. JavaScript:
1) It is developed by Netscape company.
2) It is based on Browser installed on client.
3) It is Object Oriented Programming Language and not Based On Object.
4) It is a script that is based on Event Driven Model.
5) It is an Interpretive Language that don't have to be compiled.
It has its advantage features and disadvantage features and that it what we should keep in mind.
2. The function of JavaScript
1) Interactive operation
2) Form validation
3) Special effect in Webpage
4) Web game
5) Script development for Server
3. JavaScript uses weak type and not like strong type in Java.
It means we don't have to declare its type before we use a var.
The interpreter will check its type when running this script.
var a = 4; a = true;
Case Sensitive
4. A simple example for using JS
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
document.write("Hello World!");
</script>
</head>
<body>
<a href="#" onclick="alert('Hello World!')">Please Click</a>
</body>
</html>
5. Variable declaration
1) Example 1
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
document.write("Hello World!");
var stdId;
var name, gender;
var total = 371;
var notNull = true;
var i = j = 0;
// Even we can ignore key word 'var'
m = 1;
</script>
</head>
<body>
<a href="#" onclick="alert('Hello World!')">Please Click</a>
</body>
</html>
2) Example 2
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
function test()
{
var i = 3;
alert(i);
i = true;
alert(i);
i = "Hello";
alert(i);
}
</script>
</head>
<body>
<a href="#" onclick="test();">Please Click</a>
</body>
</html>
3) Global variables & Local variables
1. Global var declared outside of all the function.
2. Local var declared inside the function that it works.
4) Difference between declaration when use key word 'var' and not use key word 'var'
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
var global = "javascript"; // global is Global Var
test();
function test()
{
var local = "vbscript"; // local is Local Var
global2 = "actionscript"; // global2 is Global Var even it is declared in function scope
document.writeln(global);
document.writeln(global2);
document.writeln(local);
}
document.writeln(global);
document.writeln(global2);
document.writeln(local);
</script>
</head>
<body>
</body>
</html>
Part Two:
1. "with" statement
1) Function: Create an object for a code segment
2) Syntax:
with(<object>)
{
<statements>
}
3) Example
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
var global = "javascript"; // global is Global Var
test();
function test()
{
var local = "vbscript"; // local is Local Var
global2 = "actionscript"; // global2 is Global Var even it is declared in function scope
with(document)
{
writeln(global);
writeln(global2);
writeln(local);
}
}
with(document)
{
writeln(global);
writeln(global2);
writeln(local);
}
</script>
</head>
<body>
</body>
</html>
2. "for ... in" statement
1) Function: Traverse all the attributes in one specific object
2) Syntax:
for(var propertyName in obj)
{
alert(obj[propertyName]);
}
3) Example:
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
function member(name, gender) // Regard as constructor
{
this.name = name;
this.gender = gender;
}
function showProperties(obj, objString)
{
var str = "";
for(var i in obj)
{
str += objString + "." + i + "=" + obj[i] + "<br/>";
}
return str;
}
var obj = new member("Davy", "Male");
document.write(showProperties(obj, "person"));
</script>
</head>
<body>
</body>
</html>
person.name=Davy person.gender=Male
Part Three: JavaScript default objects
1. Date
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
var date = new Date();
// var date = new Date; is also valid approach for creating object without any parameters passed in.
document.writeln("Current Date: " + (date.getYear() + 1900) + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
</script>
</head>
<body>
</body>
</html>
2. Array
1) Simple example
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
// var fruit = new Array(4);
// fruit[0] = "apple";
// fruit[1] = "banana";
// fruit[2] = "pear";
// fruit[3] = "grape";
var fruit = new Array("apple", "banana", "pear", "grape");
for(var i = 0; i < fruit.length; i++)
{
document.writeln("fruit[" + i + "] = " + fruit[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
fruit[0] = apple fruit[1] = banana fruit[2] = pear fruit[3] = grape
2) Three ways to build array object
The third approach is recommanded.
/// Frist Approach
// var fruit = new Array(4); // var fruit = new Array();
// fruit[0] = "apple"; // fruit.push("apple");
// fruit[1] = "banana";// fruit.push("banana");
// fruit[2] = "pear";//fruit.push("pear");
// fruit[3] = "grape";//fruit.push("grape");
/// Second Approach
//var fruit = new Array("apple", "banana", "pear", "grape");
/// Third Approach
var fruit = ["apple", "banana", "pear", "grape"];
for(var i = 0; i < fruit.length; i++)
{
document.writeln("fruit[" + i + "] = " + fruit[i] + "<br/>");
}
3) The function in Array object
1) join(seperator);
2) toString();
3) reverse();
4) valueOf();
5) push();
6) pop();
var fruit = ["apple", "banana", "pear", "grape"];
with(document)
{
write("<ul>");
write("<li>" + fruit.join() + "</li>");
write("<li>" + fruit.join("|") + "</li>");
write("<li>" + fruit.toString() + "</li>");
write("<li>" + fruit.reverse() + "</li>");
write("<li>" + fruit.valueOf() + "</li>");
write("</ul>");
}
output:
apple,banana,pear,grape apple|banana|pear|grape apple,banana,pear,grape grape,pear,banana,apple grape,pear,banana,apple
Two dimension array
var fruit = new Array(3);
fruit[0] = new Array("Apple", 2);
fruit[1] = new Array("Orange", 3);
fruit[2] = new Array("Watermelon", 4);
for(var i = 0; i < fruit.length; i++)
{
for(var j = 0; j < fruit[i].length; j++)
{
document.write("fruit[" + i + "][" + j + "] = " + fruit[i][j] + "<br/>");
}
}
fruit[0][0] = Apple fruit[0][1] = 2 fruit[1][0] = Orange fruit[1][1] = 3 fruit[2][0] = Watermelon fruit[2][1] = 4
3. String
1) Syntax of building a String (Two ways)
var username = "Davy";
var password = new String("Jones");
with(document)
{
writeln("username = " + username);
writeln("</br>");
writeln("password = " + password);
}
2) Attributes of String object
var username = "Davy";
document.writeln("username.length = " + username.length);
3) Methods of String object
1. charAt(index);
2. indexOf("seg"[, index]);
3. lastIndexOf("");
4. replace("seg1", "seg2");
5. search("seg");
6. substring(startIndex[, endIndex]);
var str = "javascript";
var num = 1234;
with(document)
{
write(str.toUpperCase() + "</br>");
write(num.toString().charAt(0) + "</br>");
write(str.substring(0,4) + "</br>");
write(str.search("java") + "</br>");
write(str.indexOf("java") + "</br>");
write(str.indexOf("java", 3) + "</br>");
write(str.replace("java", "csharp") + "</br>");
}
output:
JAVASCRIPT 1 java 0 0 -1 csharpscript
4) A simple example for form validation
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
function checkEmail()
{
var emailValue = document.getElementsByName("email")[0].value;
if(-1 == emailValue.indexOf("@"))
{
alert("Invalid email address");
}else
{
alert("Valid email");
}
}
</script>
</head>
<body>
<form>
email: <input type="text" name="email"/>
<br/>
<input type="button" value="check" onclick="checkEmail();"/>
</form>
</body>
</html>
相关推荐
《Eloquent JavaScript — A Modern Introduction to Programming》是关于JavaScript编程语言的一本现代入门书籍。本书由Marijn Haverbeke所著，致力于引导读者深入学习JavaScript，这门语言已经成为现代Web应用程序...
Since 1996, JavaScript: The Definitive Guide has been the bible for JavaScript programmers—a programmer's guide and comprehensive reference to the core language and to the client-side JavaScript APIs...
Comprehensively updated to cover ECMAScript 6 and modern JavaScript development, the second edition of this step-by-step introduction to coding in JavaScript will show you how to to solve real-world ...
《iPhone in Action: Introduction to Web and SDK Development》是一本深入探讨iPhone应用开发的书籍，其源码包提供了丰富的实例和代码资源，旨在帮助开发者更好地理解和实践iOS开发。这个压缩包包含两个关键部分：...
### Iphone in Action: Introduction to Web and SDK Development #### 关键知识点概览： - **iPhone核心规格** - **输入与输出规格** - **网络规格** - **浏览器规格** - **其他硬件特性** - **iPhone与业界其他...
### JavaScript入门：第一部分 #### 引言 随着互联网的发展，网页不再仅仅是静态的信息展示板。用户期望获得更丰富的互动体验。为此，一种强大的客户端脚本语言——JavaScript应运而生。通过本篇介绍，我们将深入...
一本关于JavaScript，编程和数字奇迹的书。
《Eloquent JavaScript：A Modern Introduction to Programming, 2nd edition》是一本面向编程初学者和希望提高JavaScript编程技能的开发者们的专业书籍。本书深入探讨了JavaScript这门语言的精髓，并通过实例教学、...
JavaScript lies at the heart of almost every modern web application, from social apps to the newest browser-based games. Though simple for beginners to pick up and play with, JavaScript is a flexible,...
Chapter 1: Introduction To Javascript And The Web Chapter 2: Data Types And Variables Chapter 3: Decisions And Loops Chapter 4: Functions And Scope Chapter 5: Javascript-An Object-Based Language ...
Introduction to JavaScript part1 + part2 Introduction to JavaScript part1 + part2 Introduction to JavaScript part1 + part2