Hi, my name is Dilip a student of web designing course in this institute. It was our first class of JavaScript today by Ravi Sir and feeling very happy so I decided to share with you whatever I learnt in this class. I hope my efforts will help you in learning the basics of it. Let me make one thing clear that it is the class project given by sir to me to write.
JavaScript is an object oriented scripting language which is being used in web pages to make them interactive and dynamic. The study of JavaScript can be divided into two parts:
1. Core JavaScript and 2. Advanced JavaScript
Let me clear few points before going deeper in JavaScript. JavaScript core consists of basics of programmings while it works with HTML so it needs to understand DOM or Document Object Model very well. DOM works as an intermediary layer between JavaScript and HTML. DOM enables JavaScript to work with HTML. DOM provides so many properties, events, and methods which JavaScript uses to manipulate HTML such as innerHTML and value to set or get the value from HTML elements.
Lets talk about few things which I have covered so far. I am expecting a fare knowledge of HTML and JavaScript from you so I will not be discussing about integration of a .js file in HTML page.
Pop ups in JavaScript
There are three types of Pop ups mentioned below which we have come to know today in my JavaScript class.
Technically, Popups are the methods of Window object in JavaScript.
1. alert –
An alert dialog box is mostly used to give a message to the users. For example, if one input field requires to enter some text but the user does not provide any input, then as a part of validation, you can use an alert box to give a warning message.
Example
<body>
<script type="text/javascript">
alert('Welcome to JS');
</script>
</body>
2. prompt –
It helps in taking the input from the user. This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt() returns null.
Example
<script type="text/javascript">
var getAge = prompt('Enter ur age plz');
alert("You are "+getAge+" yrs old."); //You are (given age) yrs old.
</script>
Note: In the alert in above example we have used + to add string values with variable. So let me make my point clear and i.e. there + is being used for the concatenation not for the addition. For more explanation please see the below given lines:
- string + string; // concatenation
- string + number; // concatenation
- number + string; // concatenation
- number + number; // addition
3. confirm –
A confirmation dialog box is mostly used to take user’s consent on any option. It displays a dialog box with two buttons: Ok and Cancel.
Example:
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write("User wants to continue!");
}else{
document.write("User does not want to continue!");
}
}
Variables in JavaScript
Variable is a container where we can store values, and the same here we can use underscore and dollar sign in the name of variables and we can not repeat reserve keywords in variable. var keyword is necessary to declare the new variable.
We can declare many variable in one statement starting var and separating by commas like –
var person = “Naresh Pal”, batch = “morning”, price = 2200;
functions in JavaScript
We can define JavaScript function by function Keyword, and the underscore (_) and dollar sign ($) can only be used along with alpha-numeric characters in the name of functions like variables. The parentheses may include parameter names separated by commas.
Functions are very useful for maintaining the execution, organization, and re-usability of the code.
Example
<body>
<button onclick="additionFunc()">Click Me</button>
<script type="text/javascript">
//declaring function
function additionFunc()//header
{
//body
var num1 = 10;
var num2 = 15;
alert(num1+num2*5/2);
}
</script>
</body>
Above all the lines of code are in a function and it gets called when we click on the button. So, it is an example of code execution and manageability. And of course re-usability is the key of function as they can be called multiple times as per the need.
Scope in JavaScript
Local Scope –
Variables or functions declared within a JavaScript function, become LOCAL to the function. Local variables have local scope: They can only be accessed within the function.
function myFunction() {
var carName = "Volvo";
alert(carName); //Volvo
}
//trying to access a local variable out of the function
alert(carName); //Reference error: carName is not defined
Global Scope –
A variable or function declared outside a function, becomes GLOBAL. A global variable has global scope. All scripts and functions on a web page can access it. If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.
//A global variable as it is not inside any function
var carName = " Volvo";
function myFunction() {
alert(carName);
}
myFunction(); // Volvo
function myFunction2() {
alert(carName);
}
myFunction2(); // Volvo
You can see in above example, I could access a global variable ‘carName’ in two different functions as that was a global variable.
Important: Use global variables wisely and in limits. These variables are very dangerous for performance and good code.
How to use scope?
It is very easy to decide for the scope. When you need something to access everywhere in the page then keep that thing global and when not then keep that local. For instance if you want to access a variable or function inside a particular function then keep that variable or functions inside that particular function.
How scope is useful?
Scope is good for name-space and performance. Scope is very good when you want to create an uncluttered code which provides better readability.
Summary
All the above points are essential to work with JavaScript. Popups are just the methods useful for displaying messages, receiving information, and taking decisions from the viewers while variables are containers useful in storing values to be used later in your applications.
Functions are the building blocks of JavaScript which handles execution of the code and useful in making a well organized code structure. These are also helpful to create reusable code for better performance. Functions deal with scope too so when we declare a variable or a function inside a function which is local and variables and functions outside a function called global.
View Full Presentation on slideshare:
MVC Design Pattern in JavaScript
MVC Design Pattern in JavaScript by ADMEC Multimedia Institute from ADMEC Multimedia Institute
