Js tutorial(Basic concepts, running a program ,console,variable,types etc..)

What am I learning? This is JavaScript (JS), a programming language. There are many languages, but JS has many uses and is easy to learn. What can we use JavaScript for? ● make websites respond to user interaction ● build apps and games (e.g. blackjack) ● access information on the Internet (e.g. find out the top trending words on Twitter by topic) ● organize and present data (e.g. automate spreadsheet work; data visualization)

Example:Confirm box <html> <head> <script> confirm('This is an example of using JS to create some interaction on a website. Click OK to continue!'); </script> </head> <body></body> </html>

Interactive JavaScript ● What is programming? ○ Programming is like writing a list of instructions to the computer so it can do cool stuff with your information. ○ To do any of these actions, the program needs an input. You can ask for input with a prompt. ○ Examples: ■ prompt("What is your name?"); ■ prompt("What is Ubuntu?");

Next task Modify the above program by asking student name using prompt box <html> <head> <script> confirm('This is an example of using JS to create some interaction on a website. Click OK to continue!'); prompt(“what is your name?”); </script></head> <body></body> </html>

Data Types , Numbers & Strings Data comes in various types. You have used two already! 1. Numbers are quantities, just like you're used to. You can do math with them. 2. strings are sequences of characters, like the letters a-z, spaces, and even numbers. These are all strings: "Ryan", "4" and "What is your name?" Strings are extremely useful as labels, names, and content for your programs. ● To make a number in your code, just write a number as numerals without quotes: 42, 190.12334. ● To write a string, surround words with quotes: "What is your name?"

Task ● Write a string with at least 3 words. Check out the examples of strings above Eg: document.write(“something”);

Try to yourself ... What will be the output???

Datatype:Boolean Nice job! Next let's look at booleans. A boolean is either true or false. For example, comparing two numbers returns a true or false result: 23 > 10 is true 5 < 4 is false

Task.. Let's compare two numbers 10&20 to return a true result:

Using console.log You may have noticed that the interpreter doesn't print out every single thing it does. So if we want to know what it's thinking, we sometimes have to ask it to speak to us. console.log() will take whatever is inside the parentheses and log it to the console below your code—that's why it's called console.log()! This is commonly called printing out. ● console.log(2 * 5) ● console.log("Hello")

Try it yourself.. 1. <html> 2. <head><script> 3. confirm('This is an example of using JS to create some interaction on a website. Click OK to continue!'); 4. console.log(10*10); 5. console.log("Lets start..."); 6. </script></head> 7. <body></body> 8. </html>

Comparisons So far we've learned about three data types: ● strings (e.g. "dogs go woof!") ● numbers (e.g. 4, 10) ● booleans (e.g. false, 5 > 4) Now let's learn more about comparison operators.

List of comparison operators: > Greater than < Less than <= Less than or equal to >= Greater than or equal to === Equal to !== Not equal to Try to use each of the operators above ● console.log(15 4); // 15 > 4 evaluates to true, so true is printed. // Fill in with >, <, === so that the following print out true: ● console.log("Xiao Hui".length 122); ● console.log("Goody Donaldson".length 8); ● console.log(8*2 16); Choose the correct comparison operator to make each of the four statements print out true.

List of comparison operators: > Greater than < Less than <= Less than or equal to >= Greater than or equal to === Equal to !== Not equal to Try to use each of the operators above ● console.log(15 > 4); // 15 > 4 evaluates to true, so true is printed. // Fill in with >, <, === so that the following print out true: ● console.log("Xiao Hui".length < 122); ● console.log("Goody Donaldson".length > 8); ● console.log(8*2 === 16); Choose the correct comparison operator to make each of the four statements print out true.

Variables We have learned how to do a few things now: make strings,numbers, do basic math. Not bad for a day's work! To do more complex coding, we need a way to 'save' the values from our coding. We do this by defining a variable with a specific, case-sensitive name. Once you create (or declare) a variable as having a particular name, you can then call up that value by typing the variable name. Syntax: var varName = data;

Variables.. Example: ● var myName = "Leng"; ● var isOdd = true; Task ● Create a variable called myAge and type in your age.

Task Follow the instructions in the comments in the code to continue. 1. // Declare a variable on line 3 called 2. // myCountry and give it a string value. 3. // Use console.log to print out the length of the variable myCountry. 4. // Use console.log to print out the first three letters of myCountry.

Task Follow the instructions in the comments in the code to continue. 1. // Declare a variable on line 3 called 2. // myCountry and give it a string value. 3. var myCountry="india" 4. // Use console.log to print out the length of the variable myCountry. 5. console.log(myCountry.length); 6. // Use console.log to print out the first three letters of myCountry. 7. console.log(myCountry.substring(0,3));

Change variable values So far, we've seen ● how to create a variable ● how to use a variable Let's now see how to change a variable's value. A variable's value is easily changed. Just pretend you are creating a new variable while using the same name of the existing variable! Example: var myAge = "Thirty"; myAge = "Thirty-one"; Now the value of myAge is "Thirty-one"!

typeof() You can use the JavaScript typeof operator to find the type of a JavaScript variable. 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <script> 5. var x ="Cybersquare"+ 2017; 6. var myvar=5; 7. var bool =true; 8. alert(typeof myvar); //alerts "number" 9. alert(typeof x) 10. </script> 11. </head> 12. <body> 13. <p>You can use the JavaScript typeof operator to find the type of a JavaScript variable.</p> 14. </body> 15. </html>

Conclusion Let's do a quick review! ● Datatypes ● Variables ● Manipulating numbers & strings ● Manipulating numbers & strings

Js tutorial(Basic concepts, running a program ,console,variable,types etc..)

More Related Content

Similar to Js tutorial(Basic concepts, running a program ,console,variable,types etc..)

More from reshmy12

Recently uploaded

Js tutorial(Basic concepts, running a program ,console,variable,types etc..)