JS 02: JavaScript Syntax

Javascript codes are written inside the <script> tag. The <script> tag usually placesd inside the head section of the HTML page. General syntax is:

<script type>
  <!—javascript codes are written here -->
</script>

The JavaScript codes goes in between the <script> ... </script> tags.

Lets write a hello world program using javascript

<html>
  <head>
    <script language = "javascript" type = "text/javascript">
      document.write("hello world");
    </script>
  </head>
  <body>
  </body>
</html>


The document.write() function takes a string as parameter and display the string in browser. This example code will simple display the "hello world" message:


  hello world


To display the same message when user clicked a button:

<html>
  <head>
    <script language = "javascript" type = "text/javascript">
      function DisplayGreeting(){
        alert(“Hello world”);
      }
    </script>
  </head>
  <body>
    <input type = “button” onclick = “displayGreetings()” value = “Click me”/>
  </body>
</html>


The second example is how function is written in JavaScript. This function is called when onclick event happen, This event is triggered when user clicked the button. variables in java script is declared using var keyword. this does not differentiate number, string or Boolean data type.

<script>
  var name;
  var age = 23;
  name = “Owen”;
  document.write(name);
</script>

JS supports arithmetic, comparison, logical, assignment and conditional operators

<scipt>
  var num1 = 21;
  var num2 = 21;
  var total = num1 + num2;
  document.write(total);
</script>

if else in javascript

<script>
  var phone = “samsung”;
  if(phone == “iphone”){
    document.write(“Phone is iPhone”);
  }else if(phone == “samsung”);
    document.write(“Phone is Samsung”);
  }else{
    document.write(“Unknown phone brand”);
  }
</script>

the switch

<script>
switch(number)
{
  case 1: document.write(“One”);
    break;
  case 2: document.write(“Two”);
    break;
  case 3: document.write(“Three”);
    break;
  case 4: document.write(“Four”);
    break;
  default:document.write(“Outside range of 1 to 4”);
}
</script>

while loop

<script>
  var num = 0;
  while(num < 5){
    document.write(“Num : “ + num +”<br/>”);
    num = num + 1;
  }
</script>

do while loop

<script>
  var num = 0;
  do{
    document.write(“Num : “ + num +”<br/>”);
    num = num + 1;
  } while(num < 5);
</script>

for loop

<script>
  var num ;
  for(num = 0; num < 5; num++){
    document.write(“Num : “ + num + ”<br/>”);
  }
</script>

sending argument to function

<head>
<script>
  function greet(name){
    alert(“hello “ + name + “, welcome!!”);
  }
</script>
</head>
<body>
  <input type = “button” onclick= “greet(‘Owen’)” value = “Click me”/>
</body>

Dialog boxes

We have used alert dialog box in previous examples, alert box is for showing warnings messages. Other type of dialog boxes are confirmation box, which takes yes or no as answer and another one is to take inputs from users, confirm() and prompt() respectively.


<script>
  alert(“Hi this is a message using alert.”);
</script>

this id the confirm

<script>
var userResponse = confirm("Confirm yes or no?");

if(userResponse == true){
  alert("You pressed yes");
}else{
  alert("you pressed no");
}
</script>

for the prompt

<script>
  var userInput = prompt("What is your name?");

  alert("Hi, " + userInput + ", welcome");
</script>

Comments

Post a Comment

Popular posts from this blog

Drawing Simple Pie Chart

Image
To draw pie chart with 5 sectors. The program calculates the total of all the input given by user and find the angle in degrees to draw each sectors. When the program first loads, chart based on default values is painted by the program. User can edit the values in the text field and presses draw button to redraw the chart. Each time the draw button is pressed, new set of angle is calculated and repainted. I have attached the the sources for this program. It is simple and needs upgrades. Pie.java This class executed the program and initializes the components JTextField and JPanel to draw the chart. package coolApp.graphics; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Pie { JTextField a,b,c,d,e; JButton btnDraw; double total; JPanel contentPane; Pie(){ JFrame frame = new JFrame("Pie - CoolApps"); frame.setSize(500,500); contentPane = new JPanel(); contentPane.setLayout(new BorderLayout()); frame...
Read more

VB.net connecting to SQL Server

Connecting to SQL server 2014 from VB.Net 2017, read values from the database and display the data in windows form. Before begin to write this program, first we need to import SqlClient class. Imports System.Data.SqlClient Step 1 Create a sql connection object. This is to make connection to object. Dim conn As New SqlConnection() Step 2 Set the connection string to the sqlconnection object: conn.ConnectionString = connStr Road block The variable connStr is a connection string. Connection object need connection string to make connection to database. It has information like who providing the database, the name of the database and some security information. Dim connStr As String = "Data Source = ServerInstanceName;Initial Catalog=testDB;Integrated Security=True" Let's break down the connection string into the three main components. Dim provider As String = "ServerInstanceName;" Dim database As String = "Initial Catalog=testDB;" Dim ...
Read more

Setting up data set and display it

Before we display some data in DataGridView control in Visual Basic window we must create a data set. Data Set is an object that can hold data tables where all the data is stored in rows and columns. the first step is to create a table. Dim  dataTableObjectName as DataTable = New DataTable(tableName) this will create a table which is reference using the dataTableObjectName Example Dim userTable As DataTable = New DataTable("Users") Next step is adding columns to the table Dim column as DataColumn dataTableObjectName.Columns.Add (columnName, columnType) Example userTable.Columns.Add("userID", Type.GetType("System.Int.32")) ' adding second and third column userTable.Columns.Add("userName", Type.GetType("System.String")) userTable.Columns.Add("userContact", Type.GetType("System.String")) once we we columns in the table we can add row The rows contains records or the data for each user. dat...
Read more