2.3 javascript
- javascript简图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9472ab27742d466e3cfd5ccef185c4b2.png#pic_center)
1.引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
console.log(123);
</script>
<script src="./js/myjs.js"></script>
</head>
<body>
<input type="button" value="点我" onclick="javascript:console.log(333)" />
</body>
</html>
2.基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var test;
test = 10;
test = "abc";
var myval1 = 10;
myval1 = 10.01;
myval1 = "str";
myval1 = false;
console.log(myval1);
console.log(typeof myval1);
var myval2;
myval2 ="2abc0abc15";
myval2 ="ab10.15";
var myval3 = parseInt(myval2);
console.log(typeof myval3);
console.log(myval3);
var myval4 = parseFloat(myval2);
console.log(typeof myval4);
console.log(myval4);
var myval5 = 10;
console.log(typeof myval5.toString());
console.log(myval5.toString());
</script>
</head>
<body>
</body>
</html>
3.运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var temp1 = 0.1;
var temp2 = 0.2;
console.log(parseFloat((temp1+temp2).toFixed(1)) );
console.log("abc"+123);
var temp3 = 1;
console.log(temp3++);
var val1 = 2;
var val2 = true;
console.log(val1==val2);
console.log(val1===val2);
var bol1 = false;
var bol2 = true;
console.log(bol1&&bol2);
</script>
</head>
<body>
</body>
</html>
4. 条件语句循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var myarr = [1,2,3,4,5,6];
document.write("<h1>abc</h1> abc");
</script>
</head>
<body>
</body>
</html>
5. 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
console.log(!isNaN("10"));
var temp = "1+2*3";
console.log(eval(temp));
function mySum(a,b){
return a+b;
}
var getTotal = mySum(1,3);
console.log(getTotal);
var myDiff = function (a,b){
return a-b;
}
console.log(myDiff(3,1));
console.log(typeof mySum);
var temp2 = 20;
function mytest(){
temp2 = 10;
console.log("函数内读取"+temp2);
}
mytest();
console.log("函数外读取"+temp2);
</script>
</head>
<body>
</body>
</html>
6.事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mydiv{
border: 1px solid black;
width: 100px;
height: 100px;
}
</style>
<script>
function mytest(){
console.log("被点击了");
}
function changeBGC(mycolor,myobj){
console.log(myobj);
myobj.style.backgroundColor = mycolor;
}
function myCopy(){
var temp = document.getElementById("text1").value;
document.getElementById("text2").value = temp;
}
function changeTextColor(mycolor){
document.getElementById("text1").style.color = mycolor;
}
function changeTextColor2(mycolor){
document.getElementById("text1").style.color = mycolor;
document.getElementById("text2").value = document.getElementById("text1").value;
}
function changeTitle(myObj){
var temp = myObj.value;
console.log(temp);
document.getElementById("mytitle").innerHTML = temp;
}
function getSelVal(){
console.log(document.getElementById("mysel").value) ;
}
</script>
</head>
<body>
<input type="button" value="点我" onclick="mytest()" />
<div id="mydiv" class="mydiv" onclick="mytest()" onmouseover="changeBGC('red',this)" onmouseout="changeBGC('white',this)">
testdiv
</div>
<hr />
<input id="text1" type="text" value="默认值" onfocus="changeTextColor('lightcoral')" onblur="changeTextColor2('black')"/>
<input type="button" value="复制" onclick="myCopy()"/>
<input id="text2" type="text" />
<hr />
<input type="text" value="默认值" onblur="changeTitle(this)"/>
<div id="mytitle">test</div>
<hr />
<select id="mysel" onchange="getSelVal()">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myInit(){
document.getElementById("text1").value ="abc123";
}
</script>
</head>
<body onload="myInit()">
<input id="text1" type="text" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span img{
vertical-align: middle;
display: none;
}
</style>
<script>
var myreg = /^1(3|4|5|7|8)\d{9}$/;
function regMyPhone(){
var currentVal = document.getElementById("text1").value;
document.getElementById("phoneImg").style.display = "inline";
console.log(document.getElementById("phoneImg").src);
console.log(document.getElementById("phoneImg").id);
var flag = false;
if(myreg.test(currentVal)){
document.getElementById("phoneImg").src = "img/ok.png";
flag = true;
}else{
document.getElementById("phoneImg").src = "img/wrong.png";
}
return flag;
}
function regMyMail(){
return true;
}
function mysubmit(){
return regMyPhone()&& regMyMail();
}
</script>
</head>
<body>
<hr />
<form action="1js引入方式.html" method="get" onsubmit="return mysubmit()">
<input id="text1" type="text" onkeyup="regMyPhone()"/><span id="regPhongSpan"><img id="phoneImg" src="img/ok.png" /></span>
<br />
<input id="text2" type="text" onkeyup="regMyMail()"/>
<br />
<input type="submit" />
</form>
</body>
</html>