标签:javascript 浏览器 标签 网页 元素
<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。
<script>标签要成对出现,并把JavaScript代码写在<script></script>之间
可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中
在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。
JS文件不能直接运行,需嵌入到HTML文件中执行,我们需在HTML中添加如下代码,就可将JS文件嵌入HTML文件中。
<script src="script.js"></script>
我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。
放在<head>部分
最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。
放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。
定义变量要用var。
 表示空格
alert()用于实现弹出警告小窗口(只有确定键) 语法:
alert(字符串或变量);
confirm 消息对话框通常用于允许用户做选择的动作(有确定和取消按键)语法:
confirm(字符串或变量); //返回值为true或false
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
语法:
prompt(str1, str2);
参数说明:
str1: 要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
1. 点击确定按钮,文本框中的内容将作为函数返回值
2. 点击取消按钮,将返回null
open()方法可以查找一个已经存在或者新建的浏览器窗口。
语法:window.open([URL],[窗口名称],[参数字符串])
参数说明:
URL:可选参数,在窗口中药显示网页的网址或路径。如果省略这个参数,或者他的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
该名称由字母、数字和下划线字符组成。
"_top"、"_blank"、"_self"具有特殊意义的名称。
_top:框架网页中在上部窗口中显示目标网页
_blank:在新窗口显示目标网页
_self在当前窗口显示目标网页
3.相同name的窗口只能创建一个,要想创建多个窗口则name不能相同
4.name不能包含有空格
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开
例如:打开http://www.imooc.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:
<script type="text/javascript"> window.open(‘http://www.imooc.com‘,‘_blank‘,‘width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes‘)
</script>
关闭窗口:
窗口对象.close();
简单例子:
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
function openWindow(){
// var result = confirm("是否要打开新网页?");
// if(result == true){
// window.open("http://www.imooc.com");
// }
// 新窗口打开时弹出确认框,是否打开
// var result = prompt("是否确定要打开下列网址","http://www.imooc.com");
// window.open(result);
// 通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/
var result = prompt("是否确定要打开下列网址","http://www.imooc.com");
window.open(result,"慕课网","width=400,height=500");
//打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。
}
</script>
</head>
<body>
<input type="button" value="新窗口打开网站" />
</body>
</html>
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的数结构(节点树)。
学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。
语法:
document.getElementById(“id”)
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法:
Object.innerHTML
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?
语法:
Object.style.property=new style;
<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>
网页中经常会看到显示和隐藏的效果,可通过display属性来设置。
语法:
Object.style.display = value;
value取值:none:隐藏; block:此元素将显示为块级元素(即显示)
本文出自 “11828641” 博客,请务必保留此出处http://11838641.blog.51cto.com/11828641/1895998
标签:javascript 浏览器 标签 网页 元素
原文地址:http://11838641.blog.51cto.com/11828641/1895998