Home >  > Java script入门

Java script入门

0

HTML、CSS、Java Script是做网站必备的三项,所以学好Java script是必须的。
Java script主要解决的是动态的问题,比如点一个按钮,显示文字,让文字变色等。另外,它还可以向html节点中添加元素,可以删除html元素。

一、hello world
1.hello world

<script>
document.write("hello,world") //向世界宣布我要学习这门语言啦!
</script>

成果展示 :

2.动态

 <html>
 <body onLoad="alert('hi')">//注意单引号和双引号!
</body>
</html>

成果展示 :

二、第二次学习
1.修改HTML
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

document.getElementById(id).innerHTML=new HTML

还可以修改html属性、改变Css

document.getElementById("image").src="landscape.jpg";
document.getElementById("p2").style.color="blue";

2.使用函数
HTML 事件属性,即将函数写在html元素里面。

<!DOCTYPE html>
<html>
<body>

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

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

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

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

</body>
</html>

使用 HTML DOM 来分配事件,即通过使用 JavaScript 来向 HTML 元素分配事件

<!DOCTYPE html>
<html>
<head>
</head>
<body>

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

<button id="myBtn">点击这里</button>

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

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

</body>
</html> 

3.创建节点

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

本文暂无标签

发表评论

*

*