JavaScript 快速入门

主要整理自慕课网教程：JavaScript 入门篇
假定读者有一定编程经验，但不熟悉 JS（比如我）

0 为什么要学习 JavaScript？

所有主流浏览器都支持 JavaScript；
目前，全世界大部分网页都是用 JavaScript；
他可以让网页呈现各种动态效果；
作为一个 Web 开发师，如果想提供漂亮的网页、令用户满意的上网体验，JavaScript 是必不可少的工具；
学习环境无处不在，只要有文本编辑器，就能编写 JavaScript 程序；
JavaScript 还能干很多事情：服务端开发，移动开发，游戏开发，甚至嵌入式……
工作需要

1.1 如何插入 JS

在 HTML 中使用一对 script 标签，通常放在 head 标签内。
```
<script type="text/javascript">
//JS 代码
</script>
```
写入单独的 JS 文件，然后在 HTML 中引用。
```
<script src="script.js"></script>
```

1.2 语句与符号

语句末尾加上分号，是个好习惯。

<script type="text/javascript">
  alert("hello!");
  document.write("I");
  document.write("love");
  document.write("JavaScript");
</script>

1.3 注释

与 C++、Java 相同。

单行注释，在注释内容前加“//”。
多行注释，以“/*”开始，以“*/”结束。

1.4 变量

先声明，再使用。养成好习惯。
声明语法是 var 变量名。

var my char;
mychar = "javascript";
var myna = 6;
mychar = "hello";

1.5 JavaScript 判断语句

<script type="text/javascript">
  var maybe = 18;
  if (maybe >= 18) {
    document.write("你是成年人。");
  } else {
    document.write("未满 18 岁，你不是成年人。");
  }
</script>

1.6 函数

下面是一个实现两数相加的函数，取名为“add2”。

function add2() {
  var sum = 3 + 2;
  alert(sum);
}

2.1 JavaScript 输出内容

document.write() 可用于向 HTML 输出流写内容。示例如下：

<script type="text/javascript">
  var mystr = "hello";
  document.write(mystr + "<br>");
  document.write("JavaScript");
</script>

输出空格参考：JS中如何输出空格

2.2 JavaScript 警告（alert 消息对话框）

通常用于调试程序。

<script type="text/javascript">
  var mynum = 30;
  alert("hello!");
  alert(mynum);
</script>

2.3 JavaScript 确认（confirm 消息对话框）

包含一个确定按钮和取消按钮。

当用户点击“确定”按钮时，返回true
当用户点击“取消”按钮时，返回false

<script type="text/javascript">
  var mymessage=confirm("你喜欢JavaScript吗？");
  if (mymessage==true) {
    document.write("很好，加油！");
  } else {
    document.write("JS功能强大，要学习噢！");
  }
</script>

2.4 JavaScript 提问（prompt 消息对话框）

通常用于询问一些需要与用户交互的信息。包含一个确定按钮、取消按钮与一个文本输入框。

点击确定按钮，文本框中的内容将作为函数返回值
点击取消按钮，将返回 null

var myname = prompt("请输入你的姓名：");
if (myname != null) {
  alert("你好" + myname);
} else {
  alert("你好 my friend.");
}

2.5 JavaScript 打开新窗口（window.open）

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：

window.open([URL], [窗口名称], [参数字符串])

参数说明：

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称；可选参数，被打开窗口的名称。

该名称由字母、数字和下划线字符组成。

“_top”、“_blank”、“_self”具有特殊意义。

_blank：在新窗口显示目标网页

_self：在当前窗口显示目标网页

_top：框架网页中在上部窗口中显示目标网页

相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表：
open 参数表
例如：打开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>

2.6 JavaScript 关闭窗口（window.close）

用法：
window.close(); // 关闭本窗口 <窗口对象>.close(); // 关闭指定的窗口

例如，关闭新建的窗口

<script type="text/javascript">
  var mywin = window.open('http://www.imooc.com'); // 将新打开的窗口对象，存储在变量 mywin 中
  mywin.close(); // 打开新窗口之后马上关闭，所以看不到被打开的窗口
</script>

2.7 编程练习

制作新按钮，“新窗口打开网站”，点击打开新窗口。

习题地址

3.1 认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。三种常见的DOM节点：

元素节点：<html>、<body>、<p>等都是元素节点，即标签；
文本节点：向用户展示的内容，如<li>…</li>中的文本
属性节点：元素属性，如<a>标签的链接属性href

看下面代码：

<a href="http://www.imooc.com">JavaScript DOM</a>

3.2 通过ID获取元素

语法：document.getElementById("id")

示例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>
</body>
</html>

3.3 innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法：Object.innerHTML

3.4 改变 HTML 样式

语法：Object.style.property=new style;

基本属性表（property）：

基本属性表

（表中只是一部分 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>

3.5 显示和隐藏（display 属性）

语法：Object.style.display = value

value 取值：

“none”，此元素不会被显示（即隐藏）
“block”，此元素将显示为块级元素（即显示）

3.6 控制类名（className 属性）

className 属性设置或返回元素的 class 属性。

语法：object.className = classname

作用：

获取元素的 class 属性
为网页内的某个元素指定一个 css 样式来更改该元素的外观

3.7 去掉元素属性 removeAttribute

语法：object.removeAttribute(attr)

例如清空 object 元素的样式：object.removeAttribute("style");

4.1 编程挑战

编写”改变颜色”、”改变宽高”、”隐藏内容”、”显示内容”、”取消设置”的函数，点击相应按钮执行相应操作，点击”取消设置”按钮后，提示是否取消设置，如是执行操作，否则不做操作。

挑战地址

技术分享 / 成长笔记

JavaScript 快速入门

0 为什么要学习 JavaScript？

1.1 如何插入 JS

1.2 语句与符号

1.3 注释

1.4 变量

1.5 JavaScript 判断语句

1.6 函数

2.1 JavaScript 输出内容

2.2 JavaScript 警告（alert 消息对话框）

2.3 JavaScript 确认（confirm 消息对话框）

2.4 JavaScript 提问（prompt 消息对话框）

2.5 JavaScript 打开新窗口（window.open）

2.6 JavaScript 关闭窗口（window.close）

2.7 编程练习

3.1 认识DOM

3.2 通过ID获取元素

3.3 innerHTML 属性

3.4 改变 HTML 样式

3.5 显示和隐藏（display 属性）

3.6 控制类名（className 属性）

3.7 去掉元素属性 removeAttribute

4.1 编程挑战

You may also like...

发表回复取消回复

技术分享 / 成长笔记

JavaScript 快速入门

0 为什么要学习 JavaScript？

1.1 如何插入 JS

1.2 语句与符号

1.3 注释

1.4 变量

1.5 JavaScript 判断语句

1.6 函数

2.1 JavaScript 输出内容

2.2 JavaScript 警告（alert 消息对话框）

2.3 JavaScript 确认（confirm 消息对话框）

2.4 JavaScript 提问（prompt 消息对话框）

2.5 JavaScript 打开新窗口（window.open）

2.6 JavaScript 关闭窗口（window.close）

2.7 编程练习

3.1 认识DOM

3.2 通过ID获取元素

3.3 innerHTML 属性

3.4 改变 HTML 样式

3.5 显示和隐藏（display 属性）

3.6 控制类名（className 属性）

3.7 去掉元素属性 removeAttribute

4.1 编程挑战

You may also like...

Python 练习册 => 0001 生成 200 个激活码

给 JPanel 设置 padding

c语言：编写一个将输入复制到输出的程序，并将其中的多个空格用一个空格代替

发表回复 取消回复

3.7 去掉元素属性 removeAttribute

发表回复取消回复