HTML定义了网页的内容。
CSS描述了网页的布局。
JavaScript描述了网页的布局。
一、什么是 JS ?
JS是JavaScript的简称。JS是一种脚本语言,用来给HTML网页增加动态的功能。
JS代码位于 < script type=“text/javascript”> < /script>之间。
< script type=“text/javascript”> ,表示< script>< /script>之间的代码是文本类型
(text),javascript是告诉浏览器里面的文本属于JavaScript语言。
二、JS写在哪里?
JS可以直接嵌入到HTML文件中,也可以单独写于一个后缀为 .js的文件中。
注意:JS文件中的JS代码不需要< script>< /script>。
HTML中引入JS文件:< script src=“文件路径”>< /script>
三、注释
1、单行注释 //
2、多行注释 /* */
四、变量
1、使用关键字 var 声明变量
五、函数
1、定义一个函数
六、输出内容
1、document.write() 用于直接在网页上输出内容。
2、通过变量输出
3、输出多项内容,使用 + 连接
4、输出HTML标签,标签使用双引号 " "
七、警告(alert消息对话框)
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。
1、语法
alert(字符串或变量)
2、下面代码
< script type="text/script">
var message="hello";
alert(message);
< /script>
注意:
1、在点击对话框”确定“按钮之前,不能进行其他操作。
2、消息对话框通常用于调试程序。
八、确认(confirm消息对话框)
confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
1、语法
confirm(变量或字符串)
2、返回值
当点击“确定”按钮时,返回true。
当点击“取消”按钮时,返回false。
注:通过返回值判断用户点了什么按钮
例子:
< script type="text/javascript">
var flag=confirm("Do you like JavaScript?");
if(flag){
document.write("oh yes");
else{
document.write("oh no");
}
}
< /script>
九、提问(prompt消息对话框)
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
1、语法
prompt(str1,str2)
2、参数说明
str1:要显示在消息对话框的文本,不可修改。
str2:文本框中的内容,可以修改。
3、返回值
点击“确定”按钮,文本框中的内容将作为函数返回值。
点击“取消”按钮,将返回null。
4、例子
<html>
<head>
<title>The First Web</title>
<script type="text/javascript">
function test(){
var score=prompt("请输入你的成绩:"); //弹出文本框,用户输入成绩
if(score<60){
document.write("不及格!");
}
else if(score>=60&&score<80){
document.write("良好!");
}
else if(score>=80&&score<=100){
document.write("优秀!");
}
else{
document.write("无成绩!");
}
}
</script>
</head>
<body>
<form>
<input type="button" name="button" onclick="test()" value="一键查询">
</form>
</body>
</html>
十、打开新窗口(window.open)
可以打开一个已经存在或新建的浏览器窗口。
1、语法
window.open([URL],[窗口名称],[参数字符串])
2、参数说明
参数字符串表
3、例子
打开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,scrollbars=yes,status=no")
< /script>
十一、关闭窗口
1、语法
window.close(); //关闭本窗口
<窗口对象>.close(); //关闭指定窗口
十二、DOM操作
1、认识DOM
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
HTML文档可以说是由节点构成的集合,三种常见的DOM节点:
1、元素节点:上图中< html>、< body>、< p>等都是元素节点,即标签。
2.、文本节点:向用户展示的内容,如< li>…< /li>中的JavaScript、DOM、CSS等文本。
3.、属性节点:元素属性,如< a>标签的链接属性href=“http://www.imooc.com”。
2、通过ID获取元素
在网页中,可以通过id找到标签,然后进行操作。
结果:null或[object HTMLParagraphElement]
3、innerHTML属性
innerHTML用于获取或者替换HTML元素的内容。
4、改变HTML样式
5、显示和隐藏
通过display属性来设置显示和隐藏的效果。
dispaly的取值:
none:隐藏
block:显示
6、控制类名(classname)