一, 认识 javascript
1-1
为什么学习 JavaScript
一), 你知道, 为什么 JavaScript 非常值得我们学习吗?
所有主流浏览器都支持 JavaScript.
目前, 全世界大部分网页都使用 JavaScript.
它可以让网页呈现各种动态效果.
做为一个 web 开发师, 如果你想提供漂亮的网页, 令用户满意的上网体验, JavaScript 是必不可少的工具.
二), 易学性
1. 学习环境无外不在, 只要有文本编辑器, 就能编写 JavaScript 程序.
2. 我们可以用简单命令, 完成一些基本操作.
1-2
引用 JS 外部文件
通过前面知识学习, 我们知道使用 <script type="text/javascript">标签在 html 文件中添加 JavaScript 代码
我们也可以把 HTML 文件和 JS 代码分开, 并单独创建一个 JavaScript 文件(简称 JS 文件), 其文件后缀通常为. js, 然后将 JS 代码直接写在 JS 文件中.
注意: 在 JS 文件中, 不需要 < script > 标签, 直接编写 JavaScript 代码就可以了.
JS 文件不能直接运行, 需嵌入到 HTML 文件中执行, 我们需在 HTML 中添加如下代码, 就可将 JS 文件嵌入 HTML 文件中.
- <script src="script.js"></script>
- 1-3
JS 的位置
我们可以将 JavaScript 代码放在 html 文件中任何位置, 但是我们一般放在网页的 head 或者 body 部分.
放在 < head > 部分
最常用的方式是在页面中 head 部分放置 < script > 元素, 浏览器解析 head 部分就会执行这个代码, 然后才解析页面的其余部分.
放在 < body > 部分
JavaScript 代码在网页读取到该语句的时候就会执行.
注意: javascript 作为一种脚本语言可以放在 html 页面中任何位置, 但是浏览器解释 html 时是按先后顺序的, 所以前面的 script 就先被执行. 比如进行页面显示初始化的 js 必须放在 head 里面, 因为初始化都要求提前进行(如给页面 body 设置 CSS 等); 而如果是通过事件调用执行的 function 那么对位置没什么要求的.
1-4
js 语句和符号
JavaScript 语句是发给浏览器的命令. 这些命令的作用是告诉浏览器要做的事情.
每一句 JavaScript 代码格式:
语句;
先来看看下面代码
<script type="text/javascript">
alert("hello!");
</script>
例子中的 alert("hello!"); 就是一个 JavaScript 语句.
一行的结束就被认定为语句的结束, 通常在结尾加上一个分号 ";" 来表示语句的结束.
注意:
";" 分号要在英文状态下输入, 同样, JS 中的代码和符号都要在英文状态下输入.
虽然分号 ";" 也可以不写, 但我们要养成编程的好习惯, 记得在语句末尾写上分号.
1-5
注释很重要, 和 Java 一样.
注释的作用是提高代码的可读性, 帮助自己和别人阅读和理解你所编写的 JavaScript 代码, 注释的内容不会在网页中显示. 注释可分为单行注释与多行注释两种.
我们为了方便阅读, 注释内容一般放到需要解释语句的结尾处或周围.
单行注释, 在注释内容前加符号 "//".
<script type="text/javascript">
document.write("单行注释使用'//'"); // 我是注释, 该语句功能在网页中输出内容
</script>
多行注释以 "/" 开始, 以 "/" 结束.
- <script type="text/javascript">
- document.write("多行注释使用 / 注释内容 /");
- /
多行注释
养成书写注释的良好习惯
/
1-6
变量
从字面上看, 变量是可变的量; 从编程角度讲, 变量是用于存储某种 / 某些数值的存储器. 我们可以把变量看做一个盒子, 为了区分盒子, 可以用 BOX1,BOX2 等名称代表不同盒子, BOX1 就是盒子的名字(也就是变量的名字).
定义变量使用关键字 var,
语法如下:
var 变量名
变量名可以任意取名, 但要遵循命名规则:
1. 变量名必须使用字母或者下划线 () 开始.
2. 变量名必须使用英文字母, 数字, 下划线 () 组成.
3. 变量名不能使用 JavaScript 关键词与 JavaScript 保留字.
变量要先声明再赋值, 如下:
- var mychar;
- mychar="javascript";
变量可以重复赋值, 如下:
- var mychar;
- mychar="javascript";
- mychar="hello";
注意:
在 JS 中区分大小写, 如变量 mychar 与 myChar 是不一样的, 表示是两个变量.
变量虽然也可以不声明, 直接使用, 但不规范, 需要先声明, 后使用.
1-7
函数
函数是完成某个特定功能的一组语句. 如没有函数, 完成任务可能需要五行, 十行, 甚至更多的代码. 这时我们就可以把完成特定功能的代码块放到一个函数里, 直接调用这个函数, 就省重复输入大量代码的麻烦.
如何定义一个函数呢? 基本语法如下:
function 函数名()
{
函数代码;
}
说明:
function 定义函数的关键字.
"函数名" 你为函数取的名字.
"函数代码" 替换为完成特定功能的代码.
我们来编写一个实现两数相加的简单函数, 并给函数起个有意义的名字:"add2", 代码如下:
- function add2(){
- var sum = 3 + 2;
- alert(sum);
- }
二, js 的互动
1-1
1, 输出内容(document.write)
2, 警告(alert 消息对话框)
我们在访问网站的时候, 有时会突然弹出一个小窗口, 上面写着一段提示信息文字. 如果你不点击 "确定", 就不能对网页做任何操作, 这个小窗口就是使用 alert 实现的.
语法:
alert(字符串或变量);
3, 确认(confirm 消息对话框)
confirm 消息对话框通常用于允许用户做选择的动作, 如:"你对吗?" 等. 弹出对话框(包括一个确定按钮和一个取消按钮).
语法:
confirm(str);
参数说明:
str: 在消息对话框中要显示的文本
返回值: Boolean 值
返回值:
当用户点击 "确定" 按钮时, 返回 true
当用户点击 "取消" 按钮时, 返回 false
注: 通过返回值可以判断用户点击了什么按钮
看下面的代码:
- <script type="text/javascript">
- var mymessage=confirm("你喜欢 JavaScript 吗?");
- if(mymessage==true)
- { document.write("很好, 加油!"); }
- else
{ document.write("JS 功能强大, 要学习噢!"); }
</script>
注: 消息对话框是排它的, 即用户在点击对话框按钮前, 不能进行任何其它操作.
4, 提问(prompt 消息对话框)
prompt 弹出消息对话框, 通常用于询问一些需要与用户交互的信息. 弹出消息对话框(包含一个确定按钮, 取消按钮与一个文本输入框).
语法:
prompt(str1, str2);
参数说明:
str1: 要显示在消息对话框中的文本, 不可修改
str2: 文本框中的内容, 可以修改.(但是写代码时不用写 str2, 写的话就是文本框中的默认内容)
返回值:
点击确定按钮, 文本框中的内容将作为函数返回值
点击取消按钮, 将返回 null
看看下面代码:
- var myname=prompt("请输入你的姓名:");
- if(myname!=null)
- { alert("你好"+myname); }
- else
- { alert("你好 my friend."); }
5, 打开新窗口(window.open)
open() 方法用于打开一个新的窗口.
语法:
window.open(<URL>, <窗口名称>, <参数字符串>)
参数说明:
URL: 打开窗口的网址或路径.
窗口名称: 被打开窗口的名称.
可以是 "_top","_blank","_selft" 等.
参数字符串: 设置窗口参数, 各参数用逗号隔开.
参数表:
例如: 打开 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 http://www.imooc.com%27%2C%27_blank%27%2C%27width%3D300%2Cheight%3D200%2Cmenubar%3Dno%2Ctoolbar%3Dno/ , status=no,scrollbars=yes')
</script>
注意:
a. 参数之间逗号及等号前后有空格, 该字符串无效, 只有删除空格才能正常运行.
b. 运行结果考虑浏览器兼容问题.
二, DOM 操作
2-1 认识 DOM
文档对象模型 DOM(Document Object Model)定义访问和处理 HTML 文档的标准方法. DOM 将 HTML 文档呈现为带有元素, 属性和文本的树结构(节点树).
先来看看下面代码:
<a href="http://www.imooc.com">JavaScript http://www.imooc.com%22%3Ejavascript/ DOM</a>
HTML 文档可以说由节点构成的集合, 三种常见的 DOM 节点:
元素节点: 上面的 < a > 等都是元素节点, 即标签.
文本节点: 向用户展示的内容, 如上面的的 JavaScript DOM 等文本内容.
属性节点: 元素属性, 如 < a > 标签的链接属性 href="http://www.imooc.com" http://www.imooc.com%22/ ;.
2-2
通过 ID 获取元素
学过 HTML/CSS 样式, 都知道, 网页由标签将信息组织起来, 而标签的 id 属性值是唯一的, 就像是每人有一个身份证号一样, 只要通过身份证号就可以找到相对应的人. 那么在网页中, 我们通过 id 先找到标签, 然后进行操作.
语法:
- document.getElementById("id")
- 2-3
innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容.
语法:
Object.innerHTML
注意:
1.Object 是获取的元素对象, 如通过 document.getElementById("ID")获取的元素.
2. 注意书写, innerHTML 区分大小写.
我们通过 id="con" 获取 < p> 元素, 并将元素的内容输出和改变元素内容, 代码如下:
- <script type="text/javascript">
- var mychar=document.getElementById("con");
- document.write("原标题:"+mychar.innerHTML+"<br>");// 输出原 h2 标签内容
- mychar.innerHTML="修改后的内容"
- document.write("修改后的标题:"+mychar.innerHTML); // 输出修改后 h2 标签内容
- </script>
- 2-4
改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 如何改变 HTML 元素的样式呢?
语法:
Object.style.property=new style;
注意: Object 是获取的元素对象, 如通过 document.getElementById("id")获取的元素.
注意: 该表只是一小部分 CSS 样式属性, 其它样式也可以通过该方法设置和修改.
看看下面的代码:
改变 <p> 元素的样式, 将颜色改为红色, 字号改为 20, 背景颜色改为蓝:
- <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>
- 2-5
显示和隐藏(display 属性)
网页中经常会看到显示和隐藏的效果, 可通过 display 属性来设置.
语法:
Object.style.display = value
注意: Object 是获取的元素对象, 如通过 document.getElementById("id")获取的元素.
value 取值:
none: 隐藏内容
block: 显示内容.
2-6
控制类名(className 属性)
className 属性设置或返回元素的 class 属性.
语法:
object.className = classname
作用:
1. 获取元素的 class 属性
为网页内的某个元素指定一个 css 样式来更改该元素的外观
- <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"> 要添加样式的内容</p>
- <input type="button" value="添加样式" onclick="add()"/>
- <p id="p2" class="one">要更改样式的内容</p>
- <input type="button" value="更改外观" onclick="modify()"/>
- <script type="text/javascript">
- var mychar=document.getElementById("p2");
- document.write("p2 元素 class 值为:"+mychar.className)
- function add(){
- var p1 = document.getElementById("p1");
- p1.className="one";
- }
- function modify(){
- var p2 = document.getElementById("p2");
- p2.className="two";
- }
- </script>
- </body>
来源: http://www.qdfuns.com/note/31721/9252424f1e1747128db9237ed12b0961.html