Kids

Can

JavaScript

<-----Back        Next --->

String

example1:

Hangman Game






String Datatype

String is the data type for text
You can make a String variable by encasing text in double quotes or single quotes:

 var 
 myString 
 = 
 ' I like pancakes ' 
 ; 


 var  
 myString2 
 = 
 " with bacon " 
 ; 

Stings can simply be added togetter with +.

 myString 
 + 
 myString2 
 = 
 " I like pancakes with bacon" 
 ; 

A character in a String can be accessed with an index number(just like an Array).

 var 
 myWord 
 = 
 'pancake' 
 ; 


 myWord 
 [ 3 ] 
 = 
 'c' 
 ; 



Play with Strings ......... .... "TryoutPanel1"
<script> var riddle='What starts with an E and ends with an E and has only one Letter ? '; var answer=" An Envelope"; function showAnswer(){ document.getElementById("joke").innerHTML= riddle + answer; } function showIndex(){ var index=prompt("which index would you like to see?"); document.getElementById("joke").innerHTML= riddle[index]; } //........make more functions for the string </script> <h3 id="joke" ondblclick="showIndex()" title="doubleClick to show index"> What starts with an E and ends with an E and has only one Letter ? </h3> <button onclick="showAnswer()"> click for the answer</button> <br> <br> <br> <ul><li>Write functions with String methods: <b>substring()</b>, <b>indexOf()</b>,<b>concat()</b> etc.(13)</li> <li>Call them from the <b>onclick</b> handler of a button(17)</li></ul>



The String Object

The String Object has lots of very handy methods to search or manipulate the String.
Try them all out.

String1 = " "

These are some of the String Class methods. Click on the Methods below to enter them in the tryout Panel.
Enter the necesary parameters. Then click the = button so show the result.
Change the String1 value in the input field above


String1.charAt( "par" )


info

String1.charAt( int )

String1.indexOf( " String " )

String1.lastIndexOf( " String " )

String1.concat( " String " )

String1.substr( int , int )

String1.substring( int , int )

String1.split( " String " )

string1.replace( " String "," String " )

String1.toUpperCase( )

String1.toLowerCase( )

String1.slice( int , int )

String1.search( " String ")



Hangman game......... .... "TryoutPanel2"
<script> var word= "pineapple"; // change the word for a new game var correctNum=0; // amount of correct guessed letters var errNum=0; // amount of errors var hangingMan= new Array("/pics/hangman0.gif", "/pics/hangman1.gif", "/pics/hangman2.gif", "/pics/hangman3.gif", // progressive pics to show the hanging man "/pics/hangman4.gif", "/pics/hangman5.gif", "/pics/hangman6.gif", "/pics/hangman7.gif", "/pics/hangman8.gif", "/pics/hangman9.gif", "/pics/hangman10.gif"); function setOut(){ // draw dashes for each letter of the word var i; var line= document.getElementById('dashes'); for(i=0;i<word.length;i++){ var p=document.createElement("p"); p.style.fontSize='35px'; p.style.visibility='visible'; p.style.color='green'; p.style.width='20px'; p.style.display='inline'; p.style.padding='10px'; p.innerHTML='_'; line.appendChild(p); } } function check(){ var answers=document.getElementById('dashes').getElementsByTagName('p'); var letter=document.getElementById("guess").value; var index=0; var nextindex=0; var isFound=false; // boolean that turns true if // correct letter is guessed while(index < word.length && !isFound && index!=-1){ index=word.indexOf(letter,nextindex); if(index!=-1){ isFound=(answers[index].innerHTML=="_"); // check if that letter was still open nextindex=index+1; } } if(isFound){ answers[index].innerHTML=word.charAt(index); // set correct letter on the correct dash correctNum+=1; // count on the correct letter if(correctNum==word.length){ // if all letters are guessed you WIN document.getElementById("mssg").innerHTML="You Win !!!"; } } else{ // wrong answer : change the pict errNum+=1; document.getElementById('pic').src=hangingMan[errNum]; if(errNum==10){ document.getElementById("mssg").innerHTML="You Loose !!!"; } } } </script> <p style="font-size:25px">Hangman Game</p><br><br> <div id="dashes" style="display:inline"></div><br> <div > <img id="pic" src="/pics/hangman0.gif" style="width:300px;height:300px "/> </div> <button onclick="setOut()" >click to get a word</button> <div><input id="guess" type="text" style="width:30px"/> <input type="button" value="enter a letter and submit" onclick="check()"/> </div> <p id="mssg"></p>






<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email