· an html input field was changed an html button was clicked often, when events happen, you may...

<!DOCTYPE html><html><body>

<h1>Allmann</h1><button type="button" onclick="document.getElementById('absatz').innerHTML = Date()">Datum und Zeit anzeigen</button><p id="absatz"></p>

<h1>Was kann Javascript?</h1><p id="id_1">JavaScript can change HTML content.</p><button type="button"onclick="document.getElementById('id_1').innerHTML = 'Hallo JavaScript!'">Klick auf mich!</button>

<h1>JavaScript kann Bilder ändern</h1><img id="bild" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"><p>Click the light bulb to turn on/off the light.</p><script>function changeImage() { var image = document.getElementById('bild'); if (image.src.match("bulbon")) { image.src = "pic_bulboff.gif"; } else { image.src = "pic_bulbon.gif"; }}</script>

<h1>Was kann Javascript?</h1><p id="demo">JavaScript ändert den style eines HTML-Elementes.</p><script>function myFunction() { var x = document.getElementById("demo"); x.style.fontSize = "25px"; x.style.color = "blue"; }</script><button type="button" onclick="myFunction()">Click Me!</button>

<h1>JavaScript validiert Input</h1><p>Please input a number between 1 and 10:</p><input id="numb" type="number"><button type="button" onclick="myFunction()">Submit</button><p id="demo"></p><script>function myFunction() { var x, text; // Get the value of the input field with id="numb" x = document.getElementById("numb").value; // If x is Not a Number or less than one or greater than 10 if (isNaN(x) || x < 1 || x > 10) { text = "Input not valid"; } else { text = "Input OK"; } document.getElementById("demo").innerHTML = text;}

Javascript-Tutorial 1 von 46 Quelle: www.w3schools.com

</script>

<html><head><script>function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed.";}</script></head><body><h1>JavaScript in Head</h1><p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">Try it</button></body></html>

<body><h1>JavaScript in Body</h1><p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">Try it</button><script>function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed.";}</script></body>

<h1>My First Web Page</h1><p>My first paragraph.</p><script>window.alert(5 + 6);</script>

<h1>My First Web Page</h1><p>My first paragraph.</p><script>document.write(1 + 6);</script>

<body><h1>My First Web Page</h1><p>My first paragraph.</p><button onclick="document.write(5 + 6)">Try it</button></body>

<body><h1>My First Web Page</h1><p>My First Paragraph</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = 5 + 6;

</script></body>

<h1>My First Web Page</h1><p>My first paragraph.</p><script>console.log(5 + 6);</script>

<h1>JavaScript Statements</h1><p>Statements are separated by semicolons.</p><p>The variables x, y, and z are assigned the values 5, 6, and 11:</p><p id="demo"></p><script>var x = 5;var y = 6;var z = x + y;document.getElementById("demo").innerHTML = z;</script>



<h1>JavaScript Numbers</h1><p>Number can be written with or without decimals.</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = 10.50;</script>

<h1>JavaScript Strings</h1><p>Strings can be written with double or single quotes.</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = 'John Doe';</script>

<h1>JavaScript Expressions</h1><p>Expressions compute to values.</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = 5 * 10;</script>

<h1>JavaScript Variables</h1><p>In this example, x is defined as a variable.Then, x is assigned the value of 6:</p><p id="demo"></p>

In this example, x, y, and z is given values, and finally z is displayed: --><p>JavaScript code (or just JavaScript) is a list of JavaScript statements.</p><p id="demo"></p><script>var x = 5;var y = 6;var z = x + y;document.getElementById("demo").innerHTML = z;</script>

<p>JavaScript statements are separated by semicolon.</p><p id="demo1"></p><script>a = 1;b = 2;c = a + b;document.getElementById("demo1").innerHTML = c;</script>

<p>Multiple statements on one line is allowed.</p><p id="demo1"></p><script>a = 1; b = 2; c = a + b;document.getElementById("demo1").innerHTML = c;</script>

var person = "Hege";var person="Hege";

<h1>My Web Page</h1><p>The best place to break a code line is after an operator or a comma.</p><p id="demo"></p><script>document.getElementById("demo").innerHTML ="Hello Dolly.";</script>

<h1>My Web Page</h1><p id="myPar">I am a paragraph.</p><div id="myDiv">I am a div.</div><p><button type="button" onclick="myFunction()">Try it</button></p><script>function myFunction() { document.getElementById("myPar").innerHTML = "Hello Dolly."; document.getElementById("myDiv").innerHTML = "How are you?";}</script><p>When you click on "Try it", the two elements will change.</p>

<h1 id="myH"></h1><p id="myP"></p><script>// Change heading:document.getElementById("myH").innerHTML = "My First Page";// Change paragraph:document.getElementById("myP").innerHTML = "My first paragraph.";</script><p><strong>Note:</strong> The comments are not executed.</p>

<p id="demo"></p><script>var x = 5; // Declare x, give it the value of 5var y = x + 2; // Declare y, give it the value of x + 2 document.getElementById("demo").innerHTML = y; // Write y to demo</script><p><strong>Note:</strong> The comments are not executed.</p>

<h1 id="myH"></h1><p id="myP"></p><script>/*The code below will changethe heading with id = "myH"and the paragraph with id = "myp"in my web page:*/document.getElementById("myH").innerHTML = "My First Page";document.getElementById("myP").innerHTML = "My first paragraph.";</script><p><strong>Note:</strong> The comment block is not executed.</p>

<h1 id="myH"></h1>

<p id="myP"></p><script>//document.getElementById("myH").innerHTML = "My First Page";document.getElementById("myP").innerHTML = "My first paragraph.";</script><p><strong>Note:</strong> The comment is not executed.</p>

<h1 id="myH"></h1><p id="myP"></p><script>/*document.getElementById("myH").innerHTML = "Welcome to my Homepage";document.getElementById("myP").innerHTML = "This is my first paragraph.";*/</script><p><strong>Note:</strong> The comment-block is not executed.</p>

<h1>JavaScript Variables</h1><p>In this example, x and y are variables</p><p id="demo"></p><script>var x = 5;var y = 6;document.getElementById("demo").innerHTML = x + y;</script>

<h1>JavaScript Variables</h1><p id="demo"></p><script>var price1 = 5;var price2 = 6;var total = price1 + price2;document.getElementById("demo").innerHTML ="The total is: " + total;</script>



<!-- 36. The Assignment OperatorIn JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator.

This is different from algebra. The following does not make sense in algebra:x = x + 5 In JavaScript however, it makes perfect sense: It assigns the value of x + 5 to x.(It calculates the value of x + 5 and puts the result into x. The value of x is incremented by 5)The "equal to" operator is written like == in JavaScript. -->

<h1>JavaScript Variables</h1><p>Strings are written with quotes.</p><p>Numbers are written without quotes.</p><p>Try to experiment with the // comments.</p><p id="demo"></p><script>var pi = 3.14;var person = "John Doe";var answer = 'Yes I am!';//document.getElementById("demo").innerHTML = pi;document.getElementById("demo").innerHTML = person;//document.getElementById("demo").innerHTML = answer;</script>

<h1>JavaScript Variables</h1><p>Create a variable, assign a value to it, and display it:</p><p id="demo"></p><script>var carName = "Volvo";document.getElementById("demo").innerHTML = carName;</script>

<h1>JavaScript Variables</h1><p>You can declare many variables in one statement.</p><p id="demo"></p><script>var person = "John Doe", carName = "Volvo", price = 200;document.getElementById("demo").innerHTML = carName;</script><h1>JavaScript Variables</h1><p>You can declare many variables in one statement.</p><p id="demo"></p><script>var person = "John Doe",carName = "Volvo",price = 200;

document.getElementById("demo").innerHTML = carName;</script>

<h1>JavaScript Variables</h1><p>A variable declared without a value will have the value undefined.</p><p id="demo"></p><script>var carName;document.getElementById("demo").innerHTML = carName;</script>

<h1>JavaScript Variables</h1><p>If you re-declare a JavaScript variable, it will not lose its value.</p><p id="demo"></p><script>var carName = "Volvo";var carName;document.getElementById("demo").innerHTML = carName;</script>

<h1>JavaScript Variables</h1><p>Add 5 + 2 + 3, and display the result:</p><p id="demo"></p><script>var x = 5 + 2 + 3;document.getElementById("demo").innerHTML = x;</script><h1>JavaScript Variables</h1><p>Add "John" + " " + "Doe":</p><p id="demo"></p><script>var x = "John" + " " + "Doe" ;document.getElementById("demo").innerHTML = x;</script><h1>JavaScript Variables</h1><p>Add "5" + 2 + 3. and display the result:</p><p id="demo"></p><script>var x = "5" + 2 + 3;document.getElementById("demo").innerHTML = x;</script>

<p id="demo">Display the result here.</p> <script>// Create the variable here</script><p id="demo">Display the result here.</p>

++ Increment-- Decrement

The addition operator (+) adds a value: --><h1>The + Operator</h1><p id="demo"></p><script>var x = 5;var y = 2;var z = x + y;document.getElementById("demo").innerHTML = z;</script><h1>The % Operator</h1><p id="demo"></p><script>var x = 2.62;var y = 2;var z = x % y;document.getElementById("demo").innerHTML = z;</script><h1>The ++ Operator</h1><p id="demo"></p><script>var x = 5;x++;var z = x;document.getElementById("demo").innerHTML = z;</script>

<h1>The = Operator</h1><p id="demo"></p><script>var x = 12;document.getElementById("demo").innerHTML = x;</script> <h1>The += Operator</h1><p id="demo"></p><script>var x = 10;x += 5;document.getElementById("demo").innerHTML = x;</script>

<h1>The *= Operator</h1><p id="demo"></p><script>var x = 10;x *= 5;document.getElementById("demo").innerHTML = x;</script> <h1>The /= Operator</h1><p id="demo"></p><script>var x = 10;x /= 5;document.getElementById("demo").innerHTML = x;</script> <h1>The %= Operator</h1><p id="demo"></p><script>var x = 10;x %= 9.2;document.getElementById("demo").innerHTML = x;</script> 

<h1>JavaScript Operators</h1><p>The + operator concatenates (adds) strings.</p><p id="demo"></p><script>var txt1 = "What a very";var txt2 = "nice day";document.getElementById("demo").innerHTML = txt1 + txt2;</script></script>

<h1>JavaScript Operators</h1><p>The + operator concatenates (adds) strings.</p><p id="demo"></p><script>var txt1 = "What a very";var txt2 = "nice day";document.getElementById("demo").innerHTML = txt1 + " " + txt2;</script><p id="demo"></p><script>txt1 = "What a very ";txt1 += "nice day.";document.getElementById("demo").innerHTML = txt1;

</script>

<p>If you add a number and a string, the result will be a string!</p><p id="demo"></p><script>var x = 5 + 5;var y = "5" + 5;var z = "Hello" + 5;document.getElementById("demo").innerHTML =x + "<br>" + y + "<br>" + z;</script> 



<p id="demo"></p><script>var x = 16 + "Volvo";document.getElementById("demo").innerHTML = x;</script><p id="demo"></p><script>var x = 16 + 4 + "Volvo";document.getElementById("demo").innerHTML = x;</script><p id="demo"></p><script>var x = "Volvo" + 16 + 4;document.getElementById("demo").innerHTML = x;</script>

<!-- 46. JavaScript Has Dynamic TypesJavaScript has dynamic types. This means that the same variable can be used as different types:Example:var x; // Now x is undefined

var x = 5; // Now x is a Numbervar x = "John"; // Now x is a String -->

<p id="demo"></p><script>var carName1 = "Volvo XC60";var carName2 = 'Volvo XC60';var answer1 = "It's alright";var answer2 = "He is called 'Johnny'";var answer3 = 'He is called "Johnny"';document.getElementById("demo").innerHTML =carName1 + "<br>" + carName2 + "<br>" + answer1 + "<br>" + answer2 + "<br>" + answer3;</script> 

<p id="demo"></p><script>var x1 = 34.00;var x2 = 34;var y = 123e5;var z = 123e-5;document.getElementById("demo").innerHTML = x1 + "<br>" + x2 + "<br>" + y + "<br>" + z</script>

<!-- 49. JavaScript BooleansBooleans can only have two values: true or false.Examplevar x = true;var y = false;Booleans are often used in conditional testing.You will learn more about conditional testing later in this tutorial.

50. JavaScript ArraysJavaScript arrays are written with square brackets.Array items are separated by commas.The following code declares (creates) an array called cars, containing three items (car names):Examplevar cars = ["Saab", "Volvo", "BMW"]; --><p id="demo"></p><script>var cars = ["Saab","Volvo","BMW"];document.getElementById("demo").innerHTML = cars[0];</script>

<p id="demo"></p><script>var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"};document.getElementById("demo").innerHTML =person.firstName + " is " + person.age + " years old.";</script>

<p>The typeof operator returns the type of a variable or an expression.</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = typeof "john" + "<br>" + typeof 3.14 + "<br>" +typeof false + "<br>" +typeof [1,2,3,4] + "<br>" +typeof {name:'john', age:34};</script>

<p>Both the value, and the data type, of a variable with no value is <b>undefined</b>.</p><p id="demo"></p><script>var person;document.getElementById("demo").innerHTML =

person + "<br>" + typeof person;</script>

<p id="demo"></p><script>var car = "";document.getElementById("demo").innerHTML ="The value is: " +car + "<br>" +"The type is:" + typeof car;</script>

<p>This example calls a function which performs a calculation, and returns the result:</p><p id="demo"></p><script>function myFunction(a, b) { return a * b;}document.getElementById("demo").innerHTML = myFunction(4, 3);</script>





<!-- 58. Function ReturnWhen JavaScript reaches a return statement, the function will stop executing.If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.Functions often compute a return value. The return value is "returned" back to the "caller":ExampleCalculate the product of two numbers, and return the result:var x = myFunction(4, 3); // Function is called, return value will end up in xfunction myFunction(a, b) {

return a * b; // Function returns the product of a and b}The result in x will be: 12 --><p>This example calls a function which performs a calculation, and returns the result:</p><p id="demo"></p><script>function myFunction(a, b) { return a * b;}document.getElementById("demo").innerHTML = myFunction(4, 3);</script>

<p>This example calls a function to convert from Fahrenheit to Celsius:</p><p id="demo"></p><script>function toCelsius(f) { return (5/9) * (f-32);}document.getElementById("demo").innerHTML = toCelsius(32);</script>

<p>Accessing a function without (), will return the function definition:</p><p id="demo"></p><script>function toCelsius(f) { return (5/9) * (f-32);}document.getElementById("demo").innerHTML = toCelsius;//document.getElementById("demo").innerHTML = toCelsius(32);</script>

<p id="demo"></p><script>document.getElementById("demo").innerHTML ="The temperature is " + toCelsius(32) + " Centigrade";function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32);} </script>

<p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = "Hello World!";}</script><p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = "Hello World!";}myFunction();</script>

<p id="demo"></p><script>func myFunc { document.getElementById("demo").innerHTML = "Hello World!";}myFunction();</script><p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = "Hello World!";}myFunction();</script>

<p id="demo"></p><script>function myFunction() { // add code here}document.getElementById("demo").innerHTML = myFunction();</script><p id="demo"></p><script>function myFunction() { return 5 * 5;}document.getElementById("demo").innerHTML = myFunction();</script>

<p id="demo">Display the result here.</p><script>function myFunction(name) { return "Hello " + name;}</script><p id="demo">Display the result here.</p><script>function myFunction(name) { return "Hello " + name;}

<p>Creating a JavaScript Object.</p><p id="demo"></p><script>var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};document.getElementById("demo").innerHTML =person.firstName + " is " + person.age + " years old.";</script>

<p>There are two different ways to access an object property: </p><p>You can use person.property or person["property"].</p><p id="demo"></p><script>var person = { firstName: "John", lastName : "Doe", id : 5566};document.getElementById("demo").innerHTML =person.firstName + " " + person.lastName;</script> 

<p>There are two different ways to access an object property: </p><p>You can use person.property or person["property"].</p><p id="demo"></p><script>var person = {

firstName: "John", lastName : "Doe", id : 5566};document.getElementById("demo").innerHTML =person["firstName"] + " " + person["lastName"];</script>

<p>Creating and using an object method.</p><p>An object method is a function definition, stored as a property value.</p><p id="demo"></p><script>var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function(c) { return this.firstName + " " + this.lastName; }};document.getElementById("demo").innerHTML = person.fullName();</script><p>An object method is a function definition, stored as a property value.</p><p>If you access it without (), it will return the function definition:</p><p id="demo"></p><script>var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; }};document.getElementById("demo").innerHTML = person.fullName;</script>

<p id="demo">Display the result here.</p><script>var person = {firstName:"John", lastName:"Doe"};</script><p id="demo">Display the result here.</p><script>var person = {firstName:"John", lastName:"Doe"};document.getElementById("demo").innerHTML = person.firstName;</script><!-- Exercise 2:

Add the following property and value to the person object, and display it:country: USA --><p id="demo">Display the result here.</p><script>var person = {firstName:"John", lastName:"Doe"};</script><p id="demo">Display the result here.</p>

<script>var person = {firstName:"John", lastName:"Doe", country: "USA"};document.getElementById("demo").innerHTML = person.country;</script>



<p>A local variable can only be accessed from within the function where it was declared.</p><p id="demo"></p><script>myFunction();document.getElementById("demo").innerHTML ="I can display " + typeof carName;function myFunction() { var carName = "Volvo";}</script>

<p>A GLOBAL variable can be accessed from any script or function.</p><p id="demo"></p><script>var carName = "Volvo";myFunction();function myFunction() { document.getElementById("demo").innerHTML = "I can display " + carName;}</script>

<!-- 73. Automatically GlobalIf you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.

This code example will declare carName as a global variable, even if it is executed inside a function.Example// code here can use carNamefunction myFunction() { carName = "Volvo"; // code here can use carName} --><p>If you assign a value to a variable that has not been declared,it will automatically become a GLOBAL variable:</p>

<p id="demo"></p>

<script>myFunction();document.getElementById("demo").innerHTML ="I can display " + carName;

function myFunction() { carName = "Volvo";}</script>





<p>In HTML, all global variables will become a window variables.</p><p id="demo"></p><script>myFunction();document.getElementById("demo").innerHTML ="I can display " + window.carName;function myFunction() { carName = "Volvo";}</script>



<!-- 78. HTML EventsAn HTML event can be something the browser does, or something a user does.Here are some examples of HTML events: An HTML web page has finished loading

An HTML input field was changed An HTML button was clickedOften, when events happen, you may want to do something.JavaScript lets you execute code when events are detected.HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.With single quotes:<some-HTML-element some-event='some JavaScript'>With double quotes:<some-HTML-element some-event="some JavaScript">In the following example, an onclick attribute (with code), is added to a button element:Example:<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button> --><button onclick="getElementById('demo').innerHTML=Date()">The time is?</button><p id="demo"></p>

<p>Click the button to display the date.</p><button onclick="displayDate()">The time is?</button><script>function displayDate() { document.getElementById("demo").innerHTML = Date();}</script><p id="demo"></p>





<p someevent="this.innerHTML='Hello'">Click me.</p><p onclick="this.innerHTML='Hello'">Click me.</p>

<button>Click Me</button><p id="demo"></p>

var y = "We are the so-called \"Vikings\" from the north." --><p id="demo"></p><script>var x = 'It\'s alright';var y = "We are the so-called \"Vikings\" from the north.";document.getElementById("demo").innerHTML = x + "<br>" + y; </script>





<p id="demo"></p><script>var x = "John"; // x is a stringvar y = new String("John"); // y is an objectdocument.getElementById("demo").innerHTML =typeof x + "<br>" + typeof y;</script><p>Never create strings as objects.</p><p>Stings and objects cannot be safely compared.</p><p id="demo"></p><script>var x = "John"; // x is a string

var y = new String("John"); // y is an objectdocument.getElementById("demo").innerHTML = (x==y) +"<br>" + (x===y);</script><p>Never create strings as objects.</p><p>Stings and objects cannot be safely compared.</p><p id="demo"></p><script>var x = "John"; // x is a stringvar y = new String("John"); // y is an objectdocument.getElementById("demo").innerHTML = (x===y);</script><p>Never create strings as objects.</p><p>Objects cannot be safely compared.</p><p id="demo"></p><script>var x = new String("John"); // x is an objectvar y = new String("John"); // y is an objectdocument.getElementById("demo").innerHTML = (x==y);</script>

<!-- 86. String Properties and MethodsPrimitive values, like "John Doe", cannot have properties or methods (because they are not objects).But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.String methods are covered in next chapter.

String PropertiesProperty Descriptionconstructor Returns the function that created the String object's prototypelength Returns the length of a stringprototype Allows you to add properties and methods to an object

String MethodsMethod DescriptioncharAt() Returns the character at the specified index (position)charCodeAt() Returns the Unicode of the character at the specified indexconcat() Joins two or more strings, and returns a copy of the joined stringsfromCharCode() Converts Unicode values to charactersindexOf() Returns the position of the first found occurrence of a specified value in a stringlastIndexOf() Returns the position of the last found occurrence of a specified value in a stringlocaleCompare() Compares two strings in the current localematch() Searches a string for a match against a regular expression, and returns the matchesreplace() Searches a string for a value and returns a new string with the value replacedsearch() Searches a string for a value and returns the position of the matchslice() Extracts a part of a string and returns a new stringsplit() Splits a string into an array of substringssubstr() Extracts a part of a string from a start position through a number of characterssubstring() Extracts a part of a string between two specified positionstoLocaleLowerCase() Converts a string to lowercase letters, according to the host's localetoLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale

toLowerCase() Converts a string to lowercase letterstoString() Returns the value of a String objecttoUpperCase() Converts a string to uppercase letterstrim() Removes whitespace from both ends of a stringvalueOf() Returns the primitive value of a String object -->

<p id="demo">Display the result here.</p> <script>var txt;</script><p id="demo">Display the result here.</p> <script>var txt = "Hello World!";document.getElementById("demo").innerHTML = txt;</script>

<p id="demo">Display the result here.</p> <script>var txt = "Hello World!";</script><p id="demo">Display the result here.</p> <script>var txt = "Hello World!";document.getElementById("demo").innerHTML = txt.length;</script>

<p id="demo"></p> <script>document.getElementById("demo").innerHTML = "We are "Vikings"."; </script><p id="demo"></p> <script>document.getElementById("demo").innerHTML = "We are \"Vikings\"."; </script>

<p id="demo">Display the result here.</p> <script>var str1 = "Hello ";var str2 = "World!";</script><p id="demo">Display the result here.</p> <script>var str1 = "Hello ";var str2 = "World!";document.getElementById("demo").innerHTML = str1 + str2;</script>

<body><p id="p1">Please locate where 'locate' occurs!.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { var str = document.getElementById("p1").innerHTML; var pos = str.indexOf("locate"); document.getElementById("demo").innerHTML = pos;}</script><p id="p1">Please locate where 'locate' occurs!.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { var str = document.getElementById("p1").innerHTML; var pos = str.lastIndexOf("locate"); document.getElementById("demo").innerHTML = pos;}</script><p id="p1">Please locate where 'locate' occurs!.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { var str = document.getElementById("p1").innerHTML; var pos = str.search("locate"); document.getElementById("demo").innerHTML = pos;}</script><!-- Note: Did You Notice?The two methods, indexOf() and search(), are equal.They accept the same arguments (parameters), and they return the same value.The two methods are equal, but the search() method can take much more powerful search values.You will learn more about powerful search values in the chapter about regular expressions.

89. Extracting String PartsThere are 3 methods for extracting a part of a string:

slice(start, end)substring(start, end)substr(start, length)

a) The slice() Methodslice() extracts a part of a string and returns the extracted part in a new string.The method takes 2 parameters: the starting index (position), and the ending index (position).This example slices out a portion of a string from position 7 to position 13:Example

var str = "Apple, Banana, Kiwi";var res = str.slice(7,13);The result of res will be: Banana --><p>The slice() method extract a part of a stringand returns the extracted parts in a new string:</p><p id="demo"></p><script>var str = "Apple, Banana, Kiwi";document.getElementById("demo").innerHTML = str.slice(7,13);</script><p>The slice() method extract a part of a stringand returns the extracted parts in a new string:</p><p id="demo"></p><script>var str = "Apple, Banana, Kiwi";document.getElementById("demo").innerHTML = str.slice(-12,-6);</script><p>The slice() method extract a part of a stringand returns the extracted parts in a new string:</p><p id="demo"></p><script>var str = "Apple, Banana, Kiwi";document.getElementById("demo").innerHTML = str.slice(7);</script><p>The slice() method extract a part of a stringand returns the extracted parts in a new string:</p><p id="demo"></p><script>var str = "Apple, Banana, Kiwi";document.getElementById("demo").innerHTML = str.slice(-12);</script>

<p>The substr() method extract a part of a stringand returns the extracted parts in a new string:</p><p id="demo"></p><script>var str = "Apple, Banana, Kiwi";document.getElementById("demo").innerHTML = str.substring(7,13);</script>

<!-- c) The substr() Methodsubstr() is similar to slice().The difference is that the second parameter specifies the length of the extracted part.Example

text3 = text1.concat(" ",text2); --><p>The concat() method joins two or more strings:</p><p id="demo"></p><script>var text1 = "Hello";var text2 = "World!"document.getElementById("demo").innerHTML = text1.concat(" ",text2);</script>Hello World!<p>The charAt() method returns the character at a given position in a string:</p><p id="demo"></p><script>var str = "HELLO WORLD";document.getElementById("demo").innerHTML = str.charAt(0);</script>H (is at position 0)

<p>The charCodeAt() method returns the unicode of the character at a given position in a string:</p><p id="demo"></p><script>var str = "HELLO WORLD";document.getElementById("demo").innerHTML = str.charCodeAt(0);</script>



<p>Click "Try it" to display the first array element, after a string split.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { var str = "a,b,c,d,e,f"; var arr = str.split(",");

document.getElementById("demo").innerHTML = arr[0];}</script>result: a<p id="demo"></p><script>var str = "Hello";var arr = str.split("");var text = "";var i;for (i = 0; i < arr.length; i++) { text += arr[i] + "<br>"}document.getElementById("demo").innerHTML = text;</script>result: Hello

<p id="demo"></p><script>var txt = "Hello World";document.getElementById("demo").innerHTML = txt;</script>Hello World<p id="demo"></p><script>var txt = "Hello World";document.getElementById("demo").innerHTML = txt.indexOf("World");</script>6

<p id="demo"></p><script>var str = "Apple,Banana,Kiwi";document.getElementById("demo").innerHTML = str;</script><p id="demo"></p><script>var str = "Apple,Banana,Kiwi";document.getElementById("demo").innerHTML = str.slice(6);</script>

<p id="demo"></p><script>var txt = "Hello World";document.getElementById("demo").innerHTML = txt;</script><p id="demo"></p><script>

var txt = "Hello World";document.getElementById("demo").innerHTML = txt.replace("World", "Universe");</script>Hello World --> Hello Universe

<p id="demo"></p><script>var txt = "Hello World";document.getElementById("demo").innerHTML = txt;</script><p id="demo"></p><script>var txt = "Hello World";document.getElementById("demo").innerHTML = txt.toUpperCase();</script>HELLO WORLD

<p id="demo">Display the result here.</p><script>var str1 = "Hello ";var str2 = "World!";</script><p id="demo">Display the result here.</p><script>var str1 = "Hello ";var str2 = "World!";document.getElementById("demo").innerHTML = str1.concat(str2);</script>





<p>Integers are considered accurate up to 15 digits.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { var x = 999999999999999; var y = 9999999999999999;

typeof NaN; // returns "number" --><p id="demo"></p><script>var x = 123;var y = new Number(123);document.getElementById("demo").innerHTML = typeof x + "<br>" + typeof y;</script>numberobject

<p id="demo"></p><script>document.getElementById("demo").innerHTML = Number.MAX_VALUE;</script>1.7976931348623157e+308

<p id="demo">Display the result here.</p> <script>// Create the variable here</script><script>var number = 50;document.getElementById("demo").innerHTML = number;</script>

<p id="demo"></p> <script>var x = 5;var y = "6";

var z = x + y;document.getElementById("demo").innerHTML = z;</script>56<script>var x = 5;var y = 6;var z = x + y;document.getElementById("demo").innerHTML = z;</script>

<p id="demo"></p> <script>var number = 50;document.getElementById("demo").innerHTML = number;</script><script>var number = 50 / 3;document.getElementById("demo").innerHTML = number;</script>16.666666666666668

<p id="demo">Display the result here.</p> <script>// Create the variables here</script><script>var x = 8;var y = 5;document.getElementById("demo").innerHTML = x * y;</script>40





<p>The toString() method converts a number to a string.</p><p id="demo"></p><script>var x = 123;document.getElementById("demo").innerHTML =

x.toString() + "<br>" + (123).toString() + "<br>" + (100 + 23).toString();�</script>

<p>The toExponential() method returns a string, with the number rounded and written using exponential notation.</p><p>An optional parameter defines the number of digits behind the decimal point.</p><p id="demo"></p><script>var x = 9.656;document.getElementById("demo").innerHTML = x.toExponential() + "<br>" + x.toExponential(2) + "<br>" + x.toExponential(4) + "<br>" + x.toExponential(6);</script>9.656e+09.66e+09.6560e+09.656000e+0

<p>The toFixed() method rounds a number to a given number of digits.</p><p>For working with money, toFixed(2) is perfect.</p><p id="demo"></p><script>var x = 9.656;document.getElementById("demo").innerHTML = x.toFixed(0) + "<br>" + x.toFixed(2) + "<br>" + x.toFixed(4) + "<br>" + x.toFixed(6);</script>109.669.65609.656000

<p>The toPrecision() method returns a string, with a number written with a specified length:</p><p id="demo"></p><script>

var x = 9.656;document.getElementById("demo").innerHTML = x.toPrecision() + "<br>" + x.toPrecision(2) + "<br>" + x.toPrecision(4) + "<br>" + x.toPrecision(6); </script>9.6569.79.6569.65600



<p>The global JavaScript function Number() converts variables to numbers:</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = Number(true) + "<br>" + Number(false) + "<br>" + Number(new Date()) + "<br>" + Number(" 10") + "<br>" + Number("10 ") + "<br>" + Number("10 6"); </script>1014251509223691010NaN

<p>The global JavaScript function parseInt() converts strings to numbers:</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = parseInt("10") + "<br>" + parseInt("10.33") + "<br>" + parseInt("10 6") + "<br>" +

parseInt("10 years") + "<br>" + parseInt("years 10"); </script>10101010NaN

<p>The global JavaScript function parseFloat() converts strings to numbers:</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = parseFloat("10") + "<br>" + parseFloat("10.33") + "<br>" + parseFloat("10 6") + "<br>" + parseFloat("10 years") + "<br>" + parseFloat("years 10"); </script>1010.331010NaN

<p id="demo"></p><script>var x = 123;document.getElementById("demo").innerHTML = x.valueOf() + "<br>" + (123).valueOf() + "<br>" + (100 + 23).valueOf();</script>123123123

<p>Math.random() returns a random number between 0 and 1.</p><button onclick="myFunction()">Try it</button>

<p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = Math.random();}</script><p>Math.min() returns the lowest value.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = Math.min(0, 150, 30, 20, -5);}</script>-5

<p>Math.max() returns the highest value.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = Math.max(0, 150, 30, 20, -8);}</script>150

<p>Math.round() rounds a number to its nearest integer.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = Math.round(4.4);}</script>

<p>Math.ceil() rounds a number <strong>up</strong> to its nearest integer.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = Math.ceil(4.4);}</script>5

<p>Math.floor() rounds a number <strong>down</strong> to its nearest integer.</p>

<button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = Math.floor(4.7);}</script>4

<p>Math.floor() combined with Math.random() can return random integers.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = Math.floor(Math.random() * 11);}</script>0 - 10

<p>Math constants are E, PI, SQR2, SQR1_2, LN2, LN10, LOG2E, LOG10E</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { document.getElementById("demo").innerHTML = Math.E + "<br>" + Math.PI + "<br>" + Math.SQRT2 + "<br>" + Math.SQRT1_2 + "<br>" + Math.LN2 + "<br>" + Math.LN10 + "<br>" + Math.LOG2E + "<br>" + Math.LOG10E + "<br>";}</script>2.7182818284590453.1415926535897931.41421356237309510.70710678118654760.69314718055994532.3025850929940461.44269504088896340.4342944819032518

<!-- h) Math Object MethodsMethod Descriptionabs(x) Returns the absolute value of xacos(x) Returns the arccosine of x, in radiansasin(x) Returns the arcsine of x, in radiansatan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radiansatan2(y,x) Returns the arctangent of the quotient of its arguments

ceil(x) Returns x, rounded upwards to the nearest integercos(x) Returns the cosine of x (x is in radians)exp(x) Returns the value of Exfloor(x) Returns x, rounded downwards to the nearest integerlog(x) Returns the natural logarithm (base E) of xmax(x,y,z,...,n) Returns the number with the highest valuemin(x,y,z,...,n) Returns the number with the lowest valuepow(x,y) Returns the value of x to the power of yrandom() Returns a random number between 0 and 1round(x) Rounds x to the nearest integersin(x) Returns the sine of x (x is in radians)sqrt(x) Returns the square root of xtan(x) Returns the tangent of an angle -->



<p id="demo"></p><script>document.getElementById("demo").innerHTML = Date();</script>Sun Mar 01 2015 09:26:39 GMT+0100 (Mitteleuropäische Zeit)<p id="demo"></p><script>var d = new Date();document.getElementById("demo").innerHTML = d;</script>Sun Mar 01 2015 09:29:18 GMT+0100 (Mitteleuropäische Zeit)<p id="demo"></p>

Example<script>var d = new Date();document.getElementById("demo").innerHTML = d.toUTCString();</script> --><p>The toUTCString() method converts a date to a UTC string (date display standard).</p><p id="demo"></p><script>var d = new Date();document.getElementById("demo").innerHTML = d.toUTCString();</script>The toUTCString() method converts a date to a UTC string (date display standard).Sun, 01 Mar 2015 08:45:29 GMT<p id="demo"></p><script>var d = new Date();document.getElementById("demo").innerHTML = d.toDateString();</script>Sun Mar 01 2015

</body></html>

· an html input field was changed an html button was clicked often, when events happen, you may...

Documents