Web learning history record (6) - JS
Basic concepts of JS
JavaScript is a scripting language that runs on the front end of the browser. It does not need to be compiled and can be executed through browser interpretation. Its interpretation is called the JavaScript engine, which is part of the browser and widely used in client-side scripting languages.
HTML has no interactive function with users, and web pages can only be viewed but not operated. JavaScript is used to make web page interaction effects and improve user experience
Web front-end three layers:
structure layer HTML: describe the page structure
style layer CSS: beautify the page
behavior layer JavaScript: improve user experience from the perspective of interaction
JS components:
ECMAScript, which describes the syntax and basic objects of the language
Document Object Model (DOM), which describes the methods and interfaces for processing web content
Browser Object Model (BOM), which describes the methods and interfaces for interacting with the browser
JS and HTML integration
Embedded
can be placed anywhere through the script tag
<script>
</script>Outline
defines a js file
and introduces it through the script tag
<script type = "text /javascript" src = "">
</script>Basic syntax of JS
JavaScript is a weakly typed language. The variable type of JavaScript is determined by its value. To define a variable, you need to use the keyword 'var'
var 变量名 = 值；var can be omitted.
The last semicolon can be omitted.
Multiple variables can be defined at the same time, separated
Data type
number Numerical type: integer, floating point
boolean: Boolean type
String: contains characters and strings, single and double quotes can be mixed
object: object type
undefined: undefined type
typeof
is used to determine the type of a variable
typeof(变量名)
typeof 变量名Convert a string to a numeric type
parseInt(): Convert a string to an integer. If a string contains non-numeric characters, the parseInt function will start to fetch numeric characters from the first letter. Once a non-numeric character is found, immediately stop getting characters and Output the number already obtained, if none, the conversion fails. If the conversion fails, return NaN
parseFloat: Convert a string to a decimal
isNaN: Determine whether it is a number before conversion, and return false if it is
Operators
Relational operators: >, >=, <, <=,
number type and string when doing -*+/, the string will automatically perform type conversion, and the value in the signature string satisfies the number type
== Comparing Values
=== Comparing Values and Types
Statement
Same as Java
function
code that executes repeatedly
function 函数名(参数列表){
函数体
}Get element (label) method
You can use the getElementById method on the built-in object document to get the element with the id attribute set on the page, get an html object, and then assign it to a variable
The click event
is bound through the event attribute of the label
<input type = "button" onclick = "函数名(参数列表)"/>dispatch event
元素对象.onclick = function(){};practise
Use js to complete simple data verification**
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 25px;
padding-right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font-weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form action="https://www.baidu.com" method="get" id="myform" onsubmit="return checkData()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">用户名：</td>
<td class="center">
<input id="username" name="user" type="text" class="in" />
<span id="usernamespan"></span>
</td>
</tr>
<tr>
<td class="left">密码：</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
</td>
</tr>
<tr>
<td class="left">确认密码：</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
</td>
</tr>
<tr>
<td class="left">电子邮箱：</td>
<td class="center">
<input id="email" name="email" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 以1开头, 第二为是3,4,5,7,8的11位数字-->
<td class="left">手机号码：</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in" />
<span id="mobilespan"></span>
</td>
</tr>
<tr>
<td class="left">生日：</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in"/>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="img/register.jpg" />
</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
<script>
function checkData() {
var username = document.getElementById("username").value;
if(username == null || username ==""){
alert("Error");
return false;
}
return true;
}
</script>
</html>get out of focus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="inputid" οnfοcus="_onfocus()" onblur = "_onblur()" value="haha">
</body>
<script>
function _onfocus() {
var i = document.getElementById("inputid").value;
console .log("get" + i)
}
function _onblur() {
console.log("lost")
}
</script>
</html>content change
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="id" onchange="change(this)">
<option value="1">11111</option>
<option value="3">33333</option>
<option value="2">22222</option>
</select>
</body>
<script>
function change(obj) {
console.log(obj.value)
}
</script>
</html>Wait for the page to finish loading onload
mouse event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box" id="id" onmousedown="_onmousedown(this)" onmouseleave="_onmouseleave(this)" onmouseout="_onmouseout(this)" onmousemove="_onmousemove(this)">
</div>
</body>
<script>
function _onmousedown(obj) {
obj.style.backgroundColor = "red";
}
function _onmouseleave(obj){
obj.style.backgroundColor = "blue";
}
function _onmouseout(obj) {
obj.style.backgroundColor = "black";
}
function _onmousemove(obj) {
obj.style.backgroundColor = "green";
}
</script>
</html>Keyboard event
onkeydown() keyboard press
onkeyup() keyboard lift
Complete the picture carousel effect
The timing task
setInterval(code,time) calls the function or calculates the expression according to the specified cycle
Method 1: function name setInterval(show,3000);
Method 2: function string setInterval("show()",3000);
Code
<script>
var i = 1;
setInterval("changeImg()",3000);
function changeImg() {
i++;
if (i == 4){
i = 1;
}
var imgEle = document.getElementById("imgId");
imgEle.src = "../img/banner_"+i+".jpg";
}
</script>BOM
Browser Object Model
In order to facilitate the operation of the browser, js encapsulates each object in the browser, so that developers can easily operate each object in the browser
Five objects in the BOM
window form object
navigator browser object
screen screen object
history history object
location current path information
Regular expression
Method 1:
var reg = new RegExp("Regular");
Method 2:
var reg = /regular/;
innerHTML
inserts html into a label area
to support html tags
, which will overwrite the previous content
practise
The font appears in the focused form box
<script>
function showTips() {
var userspan = document.getElementById("usernamespan");
userspan.innerText = "输入内容"
}
function checkData() {
var username = document.getElementById("username").value;
if (username == null || username == "") {
alert("Error");
return false;
}
else {
var userspan = document.getElementById("usernamespan");
userspan.innerText = "";
return true;
}
}
function usertips(obj) {
var username = obj.value;
var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
var flag = reg.test(username);
if (flag){
document.getElementById("usernamespan").innerText = "";
}
else {
document.getElementById("usernamespan").innerText = "重新输入";
}
}
function telTips() {
var userspan = document.getElementById("mobilespan");
userspan.innerText = "输入内容"
}
function telips(obj) {
var tel = obj.value;
var reg = /[1]\d{10}$/;
var flag = reg.test(tel);
if (flag){
document.getElementById("mobilespan").innerText = "";
}
else {
document.getElementById("mobilespan").innerText = "重新输入";
}
}
</script>DOM
Document Object Model, which allows users to operate on elements in web pages
The entire document is a document node
Each HTML element is an element node
The text inside an HTML element is a text node
Each tag attribute is an attribute node
Comments are comment nodes
practise
Select one of the check boxes, select all below, and set all to select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" width="500px" align="center">
<tr>
<td>
<input type="checkbox" id="all" onclick="selectAll(this)"/>
</td>
<td>
商品名称
</td>
<td>
商品价格
</td>
<td>
商品数量
</td>
<td>
商品操作
</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "one"/>
</td>
<td>
Mac
</td>
<td>
18000
</td>
<td>
20
</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "one"/>
</td>
<td>
Mac
</td>
<td>
18000
</td>
<td>
20
</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "one"/>
</td>
<td>
Mac
</td>
<td>
18000
</td>
<td>
20
</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</table>
</body>
<script>
function selectAll(obj) {
var ones = document.getElementsByClassName("one");
var a = obj.checked;
for (var i = 0; i < ones.length; i++) {
ones[i].checked = a
}
}
</script>
</html>Use JS to manipulate CSS styles
If there are multiple words spliced in JS, use camel case
Method 1:
label object. style. stylename="stylevalue"
JS controls the secondary linkage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
籍贯:<select id = "provinceId" οnchange="refreshCity(this)">
<option value="-1">-请选择-</option>
<option value="0">广东</option>
<option value="1">湖北</option>
<option value="2">山东</option>
</select>
<select id="cityId">
<option>-请选择-</option>
</select>
</body>
<script>
var city = new Array(3);
city[0] = ["深圳","惠州","东莞","广州"];
city[1] = ["武汉","黄冈","鄂州","黄石"];
city[2] = ["济南","青岛","威海","日照","烟台"];
function refreshCity(obj){
var cityselect = document.getElementById("cityId");
cityselect.innerText = "<option>-请选择-</option>"
var pValue = obj.value;
if(pValue > -1){
var cityArray = city[pValue];
}
for(var i = 0 ;i<cityArray.length;i++){
var cityValue = cityArray[i];
var opEle = document.createElement("option");
var textNode = document.createTextNode(cityValue);
opEle.appendChild(textNode);
cityselect.appendChild(opEle);
}
}
</script>
</html>electronic clock
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="id"></span>
</body>
<script>
setInterval("showTime()",1000);
function showTime() {
var myData = new Date();
var dateStr = myData.toLocaleString();
document.getElementById("id").innerHTML = dateStr;
}
</script>
</html>