JavaScript: Introduction to JavaScript

最新推荐文章于 2024-04-23 18:35:32 发布

davyjones2010

最新推荐文章于 2024-04-23 18:35:32 发布

阅读量160

点赞数

分类专栏： JavaScript 文章标签： JavaScript Introduction ViewUI

本文链接：https://blog.csdn.net/Davyjones2010/article/details/84439155

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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="#" οnclick="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="#" οnclick="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="#" οnclick="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" οnclick="checkEmail();"/>
  	</form>
  </body>
</html>