~~~ Basis ~~~
JS可以让网页呈现各种动态效果。先学习基础语法和如何使用DOM进行简单操作。
JS代码位置:javascript作为一种脚本语言可以放在html页面中任何位置。但浏览器解释html时是按先后顺序的,所以前面的script就先被执行。
内部JS:<script type="text/javascript"> ... JS的内容 ...</script>
外部独立JS:<script src="script.js"></script>
其中script.js为独立的JS文件,例如:
~~~ Grammar ~~~
1)JS格式:以分号 ;
结尾
2)JS注释://
或/* ... */
3)JS变量:var 变量名
(变量名由英文字母、数字、下划线(_)或者美元符($)组成,数字不能放开头)
4)JS函数:
function functionname(argu1, argu2){
// code
// (optional) return xxx; 在仅仅希望退出函数时 ,也可使用 return 语句,返回值可不写。
}
注意: 在 JavaScript 函数内部声明的变量
- 使用 var声明的是局部变量,所以只能在函数内部访问它。会在函数运行以后被删除。
- 没有使用 var 关键字的变量为全局变量。
~~~ function: dialog & window~~~
1)JS在网页上打印信息:document.write(String s)
2)JS消息对话框-警告:alert();
举例:
<script type="text/javascript">
alert("hello!");
</script>
运行结果:
3)JS消息对话框-确认:boolean confirm(String 要显示的文本);
举例:
<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true) {
document.write("很好,加油!");
} else {
document.write("JS功能强大,要学习噢!");
}
</script>
运行结果:
4)JS消息对话框-提问:prompt(str1, str2);
str1: 要显示在消息对话框中的文本,不可修改。
str2: 文本框中的内容,可以修改
true时返回:文本框中的内容
false时返回:null
5)JS打开已存在/新建一个网页:window.open([URL], [窗口名称], [参数字符串])
6)JS关闭窗口:window.close();
或者 /[窗口对象].close();
第二种情况举例:
<script type="text/javascript">
//将新打的窗口对象,存储在变量mywin中
var mywin=window.open('http://www.imooc.com');
mywin.close();
</script>
~~~ JS的DOM操作权 ~~~
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1. 元素节点:上图中<html>、<body>、<p>
等都是元素节点,即标签。
**2. 文本节点: **向用户展示的内容,如结构图中三个<li>...</li>
展现的文本。
**3. 属性节点: **元素属性,如<a>
标签的链接属性href="http://www.imooc.com"。
~~~ JS 通过ID获取元素 ~~~
网页由标签将信息组织起来,而标签的id属性值是唯一的,它们就像是人的身份证号。
document.getElementById(“id”);
-> 通过该方法获取的元素是一个对象!如想对元素进行操作,我们要通过它的属性或方法
~~~ JS改变HTML内容 .innerHTML() ~~~
用于获取或替换 HTML 元素的内容。
Object.innerHTML
注意:Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
~~~ JS改变HTML样式~~~
Object.style.property=new style;
注意:这里的Object是获取的元素对象,仍然通过document.getElementById("id")获取的元素。
自己试一下 » »
以下是可修改的属性的一部分:
~~~ JS改变HTML资源文件 ~~~
document.getElementById("image").src = "picture.gif";
自己试一下 » »
~~~ JS控制的显示和隐藏 ~~~
Object.style.display = value
注意:这里的Object是获取的元素对象,仍然通过document.getElementById("id")获取的元素。
~~~ 控制类名(className 属性)~~~
object.className = classname
~~~ 万一有白目浏览器不支持咋JS怎么办?给个提示吧🐱~~~
<noscript>Sorry, your browser does not support JavaScript!</noscript>
自己试一下 » »
~~~ JS 对象 ~~~
JavaScript 对象是拥有属性和方法的数据。
"JavaScript 对象是键值对的容器"。键值对通常写法为name : value
(键与值以冒号分割), 举例:
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};```
- 访问对象属性:
person.lastName;
// 或者
person["lastName"];
- 使用对象方法:
name = person.fullName();
### ~~~ JS 触发HTML的事件 ~~~
**HTML事件**可以是浏览器行为,也可以是用户行为。
![常见的HTML 事件的事件](http://upload-images.jianshu.io/upload_images/2662224-d4a3572f35bbdf4b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)