零基础JavaScript入门学习笔记
目录
准备篇
如何插入JS
引用JS外部文件
JS在页面中的位置
认识语句和符号
注释很重要
什么是变量
判断语句（if...else）
什么是函数
常用互动方法
输出内容（document.write）
警告（alert 消息对话框）
确认（confirm 消息对话框）
提问（prompt 消息对话框）
打开新窗口（window.open）
关闭窗口（window.close）
小测试
DOM操作
认识DOM
通过ID获取元素
innerHTML 属性
改变 HTML 样式
显示和隐藏（display属性）
控制类名（className 属性）
练习
准备篇
如何插入JS
你只需一步操作,使用之间。
插入js代码
之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。
引用JS外部文件
通过前面知识学习，我们知道使用
JS在页面中的位置
我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
放在部分
最常用的方式是在页面中head部分放置
例子中的alert("hello!");就是一个JavaScript语句。
一行的结束就被认定为语句的结束，通常在结尾加上一个分号";"来表示语句的结束。
看看下面这段代码,有三条语句，每句结束后都有";"，按顺序执行语句。
注意:
1. “;”分号要在英文状态下输入，同样，JS中的代码和符号都要在英文状态下输入。
2. 虽然分号“;”也可以不写，但我们要养成编程的好习惯，记得在语句末尾写上分号。
注释很重要
注释的作用是提高代码的可读性，帮助自己和别人阅读和理解你所编写的JavaScript代码，注释的内容不会在网页中显示。注释可分为单行注释与多行注释两种。
我们为了方便阅读，注释内容一般放到需要解释语句的结尾处或周围。
单行注释，在注释内容前加符号 “//”
多行注释以"/*"开始，以"*/"结束。
什么是变量
什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。
定义变量使用关键字var,语法如下：
var 变量名变量名可以任意取名，但要遵循命名规则:
1.变量必须使用字母、下划线(_)或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字。
变量要先声明再赋值，如下：
var mychar;
mychar="javascript";
var mynum = 6;变量可以重复赋值，如下：
var mychar;
mychar="javascript";
mychar="hello";注意:
1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。
2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。
判断语句（if...else）
if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。
语法:
if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }假设我们通过年龄来判断是否为成年人，如年龄大于等于18岁，是成年人，否则不是成年人。代码表示如下:
什么是函数
函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。
如何定义一个函数呢？基本语法如下:
function 函数名()
{
函数代码;
}说明:
1. function定义函数的关键字。
2. "函数名"你为函数取的名字。
3. "函数代码"替换为完成特定功能的代码。
我们来编写一个实现两数相加的简单函数,并给函数起个有意义的名字：“add2”，代码如下：
function add2(){
var sum = 3 + 2;
alert(sum);
}函数调用:
函数定义好后，是不能自动执行的，所以需调用它,只需直接在需要的位置写函数就ok了,代码如下:
函数调用
常用互动方法
输出内容（document.write）
document.write()可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用""括起，直接输出""号内的内容。
第二种:通过变量，输出内容
第三种:输出多项内容，内容之间用+号连接。
第四种:输出HTML标签，并起作用，标签使用""括起来。
例子：
使用document.write输出mychar变量的内容,同时输出一个换行符。
使用document.write一条语句,通过变量mystr,mychar,"的忠实粉丝!"，输出完整的一句"我是JavaScript的忠实粉丝!"。
document.write
警告（alert 消息对话框）
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。
语法:
alert(字符串或变量); 看下面的代码:
注:alert弹出消息对话框(包含一个确定按钮)。
结果:按顺序弹出消息框
注意:
1. 在点击对话框"确定"按钮前，不能进行任何其它操作。
2. 消息对话框通常可以用于调试程序。
3. alert输出内容，可以是字符串或变量，与document.write 相似。
确认（confirm 消息对话框）
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
语法:
confirm(str);参数说明:
str：在消息对话框中要显示的文本
返回值: Boolean值返回值:
当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false注: 通过返回值可以判断用户点击了什么按钮
看下面的代码:
注: 消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作。
提问（prompt 消息对话框）
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法:
prompt(str1, str2);参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改返回值:
1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null看看下面代码:
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }结果：
打开新窗口（window.open）
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法：
window.open([URL], [窗口名称], [参数字符串])参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。参数表:
例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：
注意：运行结果考虑浏览器兼容问题。
举例：打开http://www.imooc.com网页，将在新窗体中打开，宽为600，高为400，距屏顶100像素，屏左0像素。当点击按钮时，打开新窗口。
window.open
关闭窗口（window.close）
close()关闭窗口
用法：
window.close(); //关闭本窗口或
<窗口对象>.close(); //关闭指定的窗口例如:关闭新建的窗口。
注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。小测试
制作新按钮，“新窗口打开网站” ，点击打开新窗口。
1、新窗口打开时弹出确认框，是否打开
提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。2、通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
new document
DOM操作
认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
DOM
javascript DOM
对HTML元素进行操作，可添加、改变或移除CSS样式等
- JAVAScript
- DOM
- CSS
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，三种常见的DOM节点:
1. 元素节点：上图中、
、等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如
3. 属性节点:元素属性，如标签的链接属性href="http://www.imooc.com"。
看下面代码:
JavaScript DOM
通过ID获取元素
学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作
语法:
document.getElementById("id") 注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
例：通过document.getElementById获取id为con的p标签。
document.getElementById
JavaScript
innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法:
Object.innerHTML
注意:
1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。
2.注意书写，innerHTML区分大小写。
例：通过id获取h2标签元素,并赋给变量mychar。
使用innerHTML属性，将获取的h2标签内容修改为"Hello world!"
innerHTML
javascript
JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。
改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法:
Object.style.property=new style;注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
基本属性表（property）:
注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。
看看下面的代码:
改变
元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：
Hello World!
显示和隐藏（display属性）
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
value取值:
例：
display
JavaScript
做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。
控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
例：
任务
我们通过className属性来设置元素的样式:
给id="p1"元素通过className添加"类名为one"的样式。当点击"添加样式"按钮，第一段文字添加样式。
给id="p2"元素通过className修改为"类名为two"的样式。当点击"更改外观"按钮，第二段文字更改样式。
className属性
JavaScript使网页显示动态效果并实现与用户交互功能。
JavaScript使网页显示动态效果并实现与用户交互功能。
练习
请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。
一、定义"改变颜色"的函数
提示:
obj.style.color
obj.style.backgroundColor 二、定义"改变宽高"的函数
提示:
obj.style.width
obj.style.height 三、定义"隐藏内容"的函数
提示:
obj.style.display="none";四、定义"显示内容"的函数
提示:
obj.style.display="block";五、定义"取消设置"的函数
提示:
使用confirm()确定框，来确认是否取消设置。
如是将以上所有的设置恢复原始值,否则不做操作。
六、当点击相应按钮，执行相应操作，为按钮添加相应事件
javascript
JavaScript课程
JavaScript为网页添加动态效果并实现与用户交互的功能。
1. JavaScript入门篇，让不懂JS的你，快速了解JS。
2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。
3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。