JS入门

来源：互联网发布：怎么复制淘宝宝贝视频编辑：程序博客网时间：2024/05/16 07:04

入门：
1.html中引用javascript
<!DOCTYPE HTML>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>prompt</title>

<script type="text/javascript">

</head>

<body>

</body>

2.javascript输出内容

<script>
document.write("hello world");
</script>

3:javascript中的警告弹出框
alert;
<script>
alert("这是弹出的框");
</script>

4.javascript确认（confirm消息的确认)

function rec()
{
var message=confirm("你确定喜欢我吗");
if(messagge==true)
{ document.write("你很棒");
}
else
{ document.write("你是SB");
}
}

调用

<input name="button" type="button" value="请点击我" onclick ="rec()">

5JavaScript中的提问；prompt

fuction rec()
{
var score=prompt("你分数是？")；
if(score>90)
{document.write("你很棒");
}
else
{ document.write("你真垃圾");
}
}

调用
<input name="button" type="button" value="请点击我" onclick ="rec()">

6
javascript打开新窗口

Window.open( url,窗口名称，参数字符串)；
Url:要显示的网址或者路径
窗口名称：名称由字母，下划线，数字组成；
_self当前窗口显示目标网页
_blank新窗口显示网页
_top框架窗口的上部显示网页;
参数字符串：

实例
function Wopen(){
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

}

7:关闭窗口
window.close();
或者窗口对象
例如
var mynum=window.open('http:/www.imooc.com')
mynum.close();

8编程练习
<!DOCTYPE html>

<html>

<head>

<title> new document </title>

<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

<script type="text/javascript">

var message=confirm("是否打开网页");

if(message==true)

{
var s=prompt("确认打开网站","http://www.imooc.com");
if(s!=null)

{
window.open(s,'width:400px;height:500px;menubar=no;toolbar=no')
}
}
else
{

}
// 新窗口打开时弹出确认框，是否打开

// 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/

//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。



</script>

</head>

<body>
<input type="button" value="新窗口打开网站" onclick="openWindow()" />

</body>

</html>

9:认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

9.1 通过ID获取元素语法 document.getElementById("id")
<!DOCTYPE HTML>
<html>
<head>
<meta http-equivhttp-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p id="con">javascript</p>
<script>
var mystr=document.getElementById("con");//获取id为con 的标签
</script>
</body>
</html>

9.2 通过getElementById获取标签，然后通过innerHTML改变标签的内容
<!DOCTYPE HTML>
<html>
<head>
<meta http-equivhttp-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p id="con">javascript</p>
<script>
var mystr=document.getElementById("con");//获取id为con 的标签
mystr.innerHTML="helloworld"；//修改变标签里面的内容javascript为helloworld

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

9.3 通过getElementById获取标签，然后通过Object.style.property=new style;
改变html元素的样式属性
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>

9.4 通过getElementById获取标签，然后通过Object.style.display=none/block;隐藏(none) 显示(block)
改变html元素的样式属性
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.display=none;//标签内容隐藏；
mychar.style.display=block;//标签内容显示；
</script>

9.5 通过getElementById获取标签，然后通过className属性获取或者返回class属性
语法:object.className=classname
获取元素的class属性
为网页某个元素制定一个css样式来更改该元素的外观。
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>className属性</title>

<style>

body{ font-size:16px;}

.one{

border:1px
solid #eee;

width:230px;

height:50px;

background:#ccc;
color:red;
}

.two{
border:1px
solid #ccc;

width:230px;

height:50px;

background:#9CF;

color:blue;

}

</style>

</head>

<body>

<p id="p1" >
JavaScript使网页显示动态效果并实现与用户交互功能。
</p>

<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>

<input type="button" value="更改外观" onclick="modify()"/>

<script type="text/javascript">

function add(){

var p1 = document.getElementById("p1");
p1.className="one";
}

function modify(){

var p2 = document.getElementById("p2");
p2.className="two";
}

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

阅读全文

0 0