>>
Site Map
>>
Forums
>>
JavaScript_HTML
Forum module - topics in forum:
JavaScript_HTML - tìm hiểu và trao đỏi các mã java để làm trang web bạn sinh động hơn, các thủ thuật code html css
JavaScript Variables - Function = biến và các hàm số
JavaScript Variables
Variables in Javascript behave the same as variables in most popular programming languages (C, C++, etc) except that you don't have to declare variables before you use them. If you don't know what declaring is, don't worry about it, it isn't important!
Javascript Using Variables
A variable's purpose is to store information so that it can be used later. A variable is a symbolic name that represents some data that you set. To think of a variable name in real world terms, picture that the name is a grocery bag and the data it represents are the groceries. The name wraps up the data so you can move it around a lot easier, but the name is not the data!
A Variable Example
When using a variable for the first time it is not necessary to use "var" before the variable name, but it is a good programming practice to make it crystal clear when a variable is being used for the first time in the program. Here we are showing how the same variable can take on different values throughout a script.
HTML & Javascript Code:
| Code: : |
<body>
<script type="text/javascript">
<!--
var linebreak = "<br />"
var my_var = "Hello World!"
document.write(my_var)
document.write(linebreak)
my_var = "I am learning javascript!"
document.write(my_var)
document.write(linebreak)
my_var = "Script is Finishing up..."
document.write(my_var)
//-->
</script>
</body> |
Display:
| Quote: : |
Hello World!
I am learning javascript!
Script is Finishing up... |
We made two variables in this example. One to hold the HTML for a line break and the other was a dynamic variable that had a total of three different values throughout the script.
To assign a value to a variable you use the equal sign (=) with the variable on the left and the value to be assigned on the right. If you swap the order then your script will not work correctly! In english the Javascript "myVar = 'Hello World!'" would be: myVar equals 'Hello World!'.
The first time we used a variable we placed var in front to signify its first use. In subsequent assignments of the same variable we did not need the var.
Javascript Variable Naming Conventions
When choosing a variable name you must first be sure that you do not use any of the Javascript reserved names Found Here . Another good practice is choosing variable names that are descriptive of what the variable holds. If you have a variable that holds the size of a shoe, then name it "shoe_size" to make your Javascript more readable.
Finally, Javascript variable names may not start with a numeral (0-9). These variable names would be illegal: 7lucky, 99bottlesofbeer, and 3zacharm.
A good rule of thumb is to have your variable names start with a lowercase letter (a-z) and use underscores to separate a name with multiple words (i.e. my_var, strong_man, happy_coder, etc).
=====================
javascript Functions
If you have any programming experience, then you do not need to spend much time on this lesson. Functions in Javascript behave similar to numerous programming languages (C, C++, PHP, etc). If this is your first time learning about functions, then be sure to go through this lesson very thoroughly as a solid understanding of functions will make the rest of this tutorial much easier to follow.
What's a Function?
A function is a piece of code that sits dormant until it is referenced or called upon to do its "function". In addition to controllable execution, functions are also a great time saver for doing repeatable tasks.
Instead of having to type out the code every time you want something done, you can simply call the function multiple times to get the same effect. This benefit is also known as "code reusability".
Example Function in Javascript
A function does not execute when the page loads and so it should be placed inside the head of your HTML document. Creating a function is really quite easy, all you have to do is tell the browser you're making a function, give the function a name, and then write the Javascript like normal. Below is the example alert function from the previous lesson.
HTML & Javascript Code:
| Code: : |
<html>
<head>
<script type="text/javascript">
<!--
function popup() {
a***lert("Hello World")
<!-- xoa *** di , delete *** when use this code-->
}
//-->
</script>
</head>
<body>
<input type="button" onclick="popup()" value="popup">
</body>
</html> |
We first told the browser we were going to be using a function by typing "function". Next, we gave our function a name, so that we could use it later. Since we are making a pop up alert, we called our function "popup".
The curly braces "{,}" define the boundaries of our function code. All popup function code must be contained within the curly braces.
Something that might be slightly confusing is that within our "popup" function we use another function called "alert" which brings up a popup box with the text that we supply it. It is perfectly OK to use functions within functions, like we have done here. Furthermore, this is one of the great things about using functions!
What we didn't talk about was how we got this function to execute when the button is clicked. The click is called an event, and we will be talking about how to make functions execute from various types of events in the next lesson.
Writing Your Own Function
You can also make your own functions to be used on your webpage. If you would like to write your own function then you must use the special keyword function
Events in Javascript
Events in Javascript
The absolute coolest thing about Javascript is the ability to create dynamic web pages that increase user interaction, making the visitor feel like the website is almost coming alive right before their eyes.
The building blocks of an interactive web page is the Javascript event system. An event in Javascript is something that happens with or on the web page. A few example of events:
* A mouse click
* The web page loading
* Mousing over a hot spot on the web page, also known as hovering
* Selecting an input box in an HTML form
* A keystroke
A Couple of Examples Using Events
Javascript has predefined names that cover numerous events that can occur, including the ones listed above. To capture an event and make something happen when that event occurs you must specify the event, the HTML element that will be waiting for the event, and the function(s) that will be run when the event occurs.
We have used a Javascript event in a previous lesson, where we had an alert popup when the button was clicked. This was an "onclick" Javascript event. We will do that same example again, as well as the mouseover and mouseout events.
HTML & Javascript Code:
| Code: : |
<html>
<head>
<script type="text/javascript">
<!--
function popup() {
a****lert("Hello World")
<!-- dele **** when test this code -->
}
//-->
</script>
</head>
<body>
<input type="button" value="Click Me!" onclick="popup()"><br />
<a href="#" onmouseover="" onMouseout="popup()"">
Hover Me!</a>
</body>
</html> |
With the button we used the event onClick event as our desired action and told it to call our popup function that is defined in our header. To call a function you must give the function name followed up with parenthesis "()".
Our mouseover and mouseout events were combined on one HTML element, a link. We wanted to do nothing when someone put their mouse on the link, but when the mouse leaves (onMouseout) we displayed a popup.
