JavaScript DHTML/Language Basics/Variable Definition

Материал из Web эксперт
Перейти к: навигация, поиск

Event Handler with Multiple Statements in Attribute Value

  
<HTML>
<HEAD>
<TITLE>Event Handler With Multiple Statements</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
    count=0
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Event Handler With Multiple Statements</H1>
<P><A HREF="http://www.wbex.ru" ONMOUSEOVER="++count;
alert("You moved your mouse here "+count+" times!")">Displays
the number of times you move your mouse over this link.</A></P>
</BODY>
</HTML>



Get the type of a variable

  
<html>
<head>
    <title>The Typeof Example</title>
    <script type = "text/javascript" >
        var aObject = {};
        aObject["A"] = new Object;
        aObject["A"].myValue = "a";
        document.write(typeof aObject["A"].myValue);
    </script>
</head>
<body>
</body>
</html>



Global and Local Variable Scope Demonstration

  
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var globalVar = "Boy"   // global
var globalVar2 = "dog"        // global
function demo() {
    var globalVar2 = "cat"    // local version of globalVar2
    var output = globalVar2 + " does not belong to " + globalVar + ".<BR>"
    document.write(output)
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
demo();
document.write(globalVar2 + " belongs to " + globalVar + ".")
</SCRIPT>
</BODY>
</HTML>



Global scope and page scope

   
<html>
<head>
<title>Scope</title>
<script type="text/javascript">
if (typeof(message) != "undefined") 
  message += " globalPrint"; 
function globalPrint() {
  document.write(message);
}
</script>
<script type="text/javascript">
function global2Print() {
    message += " global2Print";
    document.write(message);
}
</script>
<script type="text/javascript">
message = "AAA";
function testScope() {
  message += " in testScope()";
  document.write(message);
}
</script>
</head>
<body onload="testScope();global2Print();globalPrint()">
<script type="text/javascript">
message += " embedded in page";
document.writeln(message);
</script>
</body>
</html>



Global Versus Local Scope of a Variable

  
<html>
<head>
  <title>Global Versus Local Scope of a Variable</title>
  <script type="text/javascript">
  <!--
    var globalString = "A";
   
    function changeToB() {
      document.outputForm.beforeB.value = globalString;
      globalString = "B";
      document.outputForm.afterB.value = globalString;
    }
   
    function changeToC() {
      document.outputForm.beforeC.value = globalString;
      globalString = "C";
      document.outputForm.afterC.value = globalString;
    }
   
  // -->
  </script>
</head>
<body>
   
  <script type="text/javascript">
  <!--
    document.write("The initial value of globalString is \"" +Image from book globalString + "\".");
  // -->
  </script>
  <br>  <form name="outputForm">
    <input name="changeButtonA" type="button" value="Change To B" onclick= "changeToB()">
       
    <input name="changeButtonB" type="button" value="Change To C" onclick="changeToC()">
    <p>
      Value of globalString
    <p>
    <input name="beforeB" type="TEXT" size="5,1">
    <p>
      Before clicking on "Change To B"
    <p>
    <input name="afterB" type="TEXT" size="5,1">
    <p>
      After clicking on "Change To B"
    <p>
    <input name="beforeC" type="TEXT" size="5,1">
    <p>
      Before clicking on "Change To C"
    <p>
    <input name="afterC" type="TEXT" size="5,1">
    <p>
      After clicking on "Change To C"
    <p>
  </form>
</body>
</html>



String value is passed by value, while the array is passed by reference

   
<html>
<head>
<title>Pass Me</title>
</head>
<body>
<script type="text/javascript">
function alterArgs(strLiteral, aryObject) {
   strLiteral = "new value";
   aryObject[aryObject.length] = "three";
}
var str = "old value";
var ary = new Array("one","two");
alterArgs(str,ary);
document.writeln("string literal is " + str + "<br /> ");
document.writeln("Array object is " + ary);
</script>
</body>
</html>



The Effects of Local and Global Variables

  
<html>
<head>
  <title>JavaScript Unleashed</title>
  <script type="text/javascript">
  <!--
    // Global variable modified in any function
    var numberA;
   
    // Global variable only modified in main script 
    var numberB;
   
    function doubleGlobalVar(){
      numberA *= 2;
    }
   
    function tripleLocalVar() {
      var numberA = 1; 
      numberA *= 3;
    }
   
    function doublePassedVar(numberB) {
      numberB *= 2;
    }
  //-->
  </script>
</head>
<body>
  <script type="text/javascript">  <!--
    numberA = 1;
    document.writeln("Initial value of numberA: " + numberA+"<br>");
    doubleGlobalVar();
    tripleLocalVar();
    document.writeln("Final value of numberA: " + numberA+"<br>");
    numberB = 1;
    document.writeln("Initial value of numberB: " + numberB+"<br>");
    doublePassedVar(numberB);
    document.writeln("Final value of numberB: " + numberB+"<br>");
  // -->
  </script>
</body>
</html>



Use of Global and Local Variables

  
<HTML>
<HEAD>
<TITLE>Global and Local Variables</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function displaySquared(y) {
    var x = y * y
    document.write(x+"<BR>")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
for(x=0;x<10;++x)
 displaySquared(x)
// -->
</SCRIPT>
</BODY>
</HTML>



Variable scope

  
<html>
<head>
<script language="JavaScript">
<!--
var myVar = "Outside";
function testFunction() {
  var myVar = "Inside";
  alert("this.myVar: " + this.myVar);
  alert("myVar: " + myVar);
}
testFunction();
//-->
</script>
</head>
</html>



Variable scoping

  
<html>
<head>
    <title>Scoping Example</title>
    <script type = "text/javascript" >
    var aNewVariable = "global.";
    function myFunction(myPara) {
        document.write("Global variable within the function: " + aNewVariable);
        document.write("Local variable within the function: " + myPara);
    }
    </script>
</head>
<body>
<script type = "text/javascript" >
    myFunction("local");
    document.write("Global var outside the function: " + aNewVariable);
    document.write("Local var outside the function: " + myPara);
    
</script>
</body>
</html>