javascript-CSDN博客

JavaScript

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

JavaScript：写入 HTML 输出

结果

JavaScript：对事件作出反应（四种）

后面同上，只是不同功能（一定要亲手打一下看一下效果）

JavaScript：改变 HTML 内容

JavaScript：改变 HTML 图像

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

比较运算符

<!DOCTYPE html>
<html>
<body>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>


function testA(){
alert(isNaN(2));
alert(isNaN(3.2));
alert(isNaN("2"));
alert("判断=================================");
var a=0;
alert(a = 2);
alert(a == "2");
alert(a === "2");

}
</script>
<button type="button" οnclick="testA()">点击这里</button>
</body>
</html>

运算结果：
false，false，false，2，true，false

变量：

<html>
<body>

<script>


function testB(){
var a,b,c
a=1;
b=4;
c=a+b;

alert(c);
}
</script>
<button type="button" οnclick="testB()">点击这里</button>
</body>
</html>

运算结果：
5
数组：

<html>
<body>

<script>


function testC(){
var i;
var cars=new Array();
cars[0]="goupeng";
cars[1]="gouhuo";
cars[2]="goubi";

for(i=0;i<cars.length;i++){
document.write(cars[i]+"</br>");
}
}
</script>
<button type="button" οnclick="testC()">点击这里</button>
</body>
</html>

运算结果：
goupeng，gouhuo，goubi
JavaScript的对象：

<html>
<body>

<script>


  function testA(){
  var student={
      userId:1,
      username:"gouhuo",
      sex:1,
      password:"21313",
      flag:1
  }
  alert(student.userId);
  alert(student.username);
  alert(student.sex);
  alert(student.password);
  alert(student.flag);
  
  }
</script>
<button type="button" οnclick="testA()">点击这里</button>
</body>
</html>

运算结果：
1，gouhuo，1，21313,，1
switch：

<html>
<body>

<script>

  function testF(){
  var x;
var d=new Date().getDay();
switch (d)
  {
  case 0:
    x="Today it's Sunday";
    break;
  case 1:
    x="Today it's Monday";
    break;
  case 2:
    x="Today it's Tuesday";
    break;
  case 3:
    x="Today it's Wednesday";
    break;
  case 4:
    x="Today it's Thursday";
    break;
  case 5:
    x="Today it's Friday";
    break;
  case 6:
    x="Today it's Saturday";
    break;
  }
  alert(x);
  }
</script>
<button type="button" οnclick="testF()">点击这里</button>
</body>
</html>

运算结果：

Today it's Tuesday

JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

for：

<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>

</body>
</html>

for/in：

<html>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56}; 

for (x in person)
{
txt=txt + person[x];
}

document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

while ：

<html>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

do/while：

<html>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5)  
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

break：

<html>
<body>

<p>点击按钮，测试带有 break 语句的循环。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    break;
    }
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

continue ：

<html>
<body>

<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的步进。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    continue;
    }
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

HTML 事件属性

<html>
<body>

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button οnclick="displayDate()">点击这里</button>

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

onload 和 onunload 事件

<html>
<body οnlοad="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("已启用 cookie")
	}
else
	{
	alert("未启用 cookie")
	}
}
</script>

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>
</html>

onmouseover 和 onmouseout 事件

<html>
<body>

<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

onmousedown、onmouseup 以及 onclick 事件

<html>
<body>

<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

添加和删除节点（HTML 元素）。

增加：

<html>
<body>



<script>
function testB(){
var div1=document.getElementById("div1");
var p=document.createElement("p");

p.innerHTML="我是新创建的";
div1.appendChild(p);

}
</script>
<input type="button" value="增加" οnclick="testB()"/>
  <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
</body>
</html>

删除：

<html>
<body>



<script>
function testC(){
var div1=document.getElementById("div1");
var p=document.getElementById("p1");


div1.removeChild(p);

}
</script>
<input type="button" value="删除" οnclick="testC()"/>
  <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
</body>
</html>

Window 尺寸

<html>
<body>



<script>
function testE(){
var w=window.innerWidth
var h=window.innerHeight
x=document.getElementById("hw");
x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"
alert("完成");
}
</script>
<input type="button" value="gao" οnclick="testE()"/>
<p id="hw"></p>
</div>
</body>
</html>

Window Location

<html>
<body>



<script>

function testAA(){
alert(location.hostname );
alert(location.pathname);
alert(location.port);
alert(location.protocol);
}
</script>
<input type="button" value="aaaaaaaa" οnclick="testAA()"/>

</div>
</body>
</html>

function testBB(){
var username=document.getElementById("name").value;
location.href="https://www.baidu.com?name="+username;
}

Window History

<html>
<body>



<script>
function testCC()
  {
  window.history.back()
  }
</script>
<input type="button" value="转转" οnclick="testCC()"/>

</div>
</body>
</html>

运行结果：
转到上一页

eval选择的转化成代码：

<html>
<head></head>
<body>
<script>

    function  testB(){
    eval("x=10;y=20;document.write(x*y)")

         document.write(eval("2+2"))

           var x=10
        document.write(eval(x+17))
    } 
</script>
<input type="button" value="A" οnclick="testB()"/>
</body>
</html>

转移字符型：

<html>
<head></head>
<body>
<script>
function testC(){
    var a="狗";
    a=escape(a);
    alert(escape(a));
    a=unescape(a);
    alert(a);
    }
</script>
<input type="button" value="A" οnclick="testC()"/>
</body>
</html>

验证不能为空：

<html>
<head></head>
<body>
<script>
function testAA(){
		var aa=true;
		var pwd=document.getElementById("pwd");
		var email=document.getElementById("email");
		if(email.value==""){
		alert("邮箱不能为空");
		return false;
		}else{
		alert(email.value);
		}
		if(pwd.value==""){
		alert("密码不能为空");
		return false;
		}else{
		alert(pwd.value);
		}
		
		}
		
</script>

<form id="loginBaiDu" name="loginBaiDu" method="get" οnsubmit="return testAA()" >
  			邮箱：
  			<input type="text" id="email" name="email"/>
  			<br>
  			密码：
  			<input type="text" id="pwd" name="pwd"/>
  			<br>
  			<input type="submit" value="登录"/>
			<input type="reset" value="清空"/>
  	</form>
</body>
</html>

重置：

<html>
<head></head>
<body>
<script>

function testCC(){
var logo=document.getElementById("logo");
logo.reset();
alert("清空");
}		
</script>

<form id="logo" name="logo" method="get" " >
  			邮箱：
  			<input type="text" id="email" name="email"/>
  			
  			<br>
  			
			<input type="reset" value="清空"/>
  	</form>
</body>
</html>