1. What is javascript?
javascript belongs to the Chinese network scripting language, which can be used in html, web, and more suitable for servers, mobile phones, computers and other devices.
Second, the basic usage of Javascript?
js scripts can be placed in <body> and <head> in html, and <script> tags are used to insert javasript scripts in html.
Usually in order to operate a tag in html, we should first find the position of the tag in the document:
1. Use id to find elements in html
2. Find elements in html by tag name
events in js
1. onclick event
Mouse click event, when the user single-machine mouse, the onClick event is generated, and the event handler or handler or code specified by onClick is called and executed.
<!DOCTYPE html>
<html>
<head>
<title>onClick事件</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" name="onclick" value="按钮" onClick=alert("弹框") />
</body>
</html>
2. onchange event
It is a form-related event that occurs when the value of a character entered using a text or text element changes, and an option state change in the select table also triggers the event.
<!DOCTYPE html>
<html>
<head>
<title>onchange事件</title>
<meta charset="utf-8">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<textarea name="textarea" cols="50" rows="5"
onchange=alert("输入留言内容")></textarea>
</form>
</body>
</html>
3. onSelect event
The onSelect event is an event that occurs when the content of the text box is selected.
<!DOCTYPE html>
<html>
<head>
<title>onSelect事件</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" name="text" value="select" onselect=alert("Select input content") />
</body>
</html>
4. onLoad event
This event occurs when the home is in a web document. The role of the onLoad event is to detect the cookie value when a page file is loaded for the first time, and assign it to a variable so that it can be used by the source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onLoad事件</title>
<script type="text/javascript">
function MM_popupMsg(msg) {
alert(msg);
}
</script>
</head>
<body onload="MM_popupMsg('Welcome!!!')">
</body>
</html>
5. onUnload event
The event onUnload event is raised when the page is exited, and the state of the connkie can be updated
6. onBlur event
The event of losing focus corresponds to the event of gaining focus. When the text object, textarea object or select object is not in focus and exits the background, this event is raised
7. onMouseOver event
onMouseOver is an event that is fired when the mouse pointer moves over an object's range.
8. onMouseOut event
onMouseOut is an event that is triggered when the mouse pointer leaves the scope of an object.
9. onDblClick event
The onDbClick event is an event fired when the mouse is double-clicked.
Common methods in js
1. Modify the content of the tag attribute in the html
<!DOCTYPE html>
<html>
<p id="p1">hello world</p>
<script type="text/javascript">
document.getElementById("p1").innerHtML="new hello world";
</script>
</html>
2. Display the current time
In many cases, the current time is displayed on the web page. Here is how to display the current time:
getHours() gets the current hours
getMinutes() gets the current minutes
getSeconds() gets the current number of seconds
<script type="text/javascript">
function showtime() {
var hours = now_time.getHours(); // Get the current hours
var minutes = now_time.getMinutes(); // Get the current minutes
var seconds = now_time. getSeconds(); // Get the current number of seconds
var timer = "" + ((hours > 12) ? hours-12 : hours); // The time obtained by getHours() is 24-hour
timeer += ((minutes < 10) ? ":0" : ":") + minutes;
timeer += ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.show.value = timeer;
setTimeout( "showtime()",1000); // Set the showtime() function to be called automatically once a second
}
</script>
3. Get the current date
getYear() gets the current year
getMonth() gets the current month
Note: When displaying the month, add 1 to the obtained month, because the value of the month is from 0 to 11
getDate() Get the current day
getDay() gets the current week number
Note: In the value obtained by the getDay() method, 0 represents Sunday, and there is no 7 in the obtained value
4. Automatically switch pictures
<script type="text/javascript">
var img = new Array(3);
var nums = 0;
if (document.images) {
img[i] = new Image(); // Create an object instance
img[i].src = "images/00" + i + ".jpg" ;
}
function fort() { // image switching function
nums++ ;
document.images[0].src = img[nums].src;
if (nums == 3) {
nums = 0;
}
}
function slide() {
setInterval("fort()", 1000);
}
</script>