javaScript学习笔记

1.基本格式

表示在之间的是文本类型

2.可以与html文件独立使用

需要这种格式插入

3.JS在页面中的位置

4.变量

变量要先声明再赋值，如下：
var mychar;
mychar=”javascript”;
var mynum = 6;
变量可以重复赋值，如下：
var mychar;
mychar=”javascript”;
mychar=”hello”;
注意:
1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。
2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

6.逻辑语句

7.函数

8.输出

JavaScript-输出内容（document.write）
document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用”“括起，直接输出”“号内的内容。

document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。

第二种:通过变量，输出内容

var mystr="hello world!"; document.write(mystr); //直接写变量名，输出变量存储的内容。

第三种:输出多项内容，内容之间用+号连接。

var mystr="hello"; document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接

第四种:输出HTML标签，并起作用，标签使用”“括起来。

var mystr="hello"; document.write(mystr+"
");//输出hello后，输出一个换行符 document.write("JavaScript");

9.警示框

效果：

10.确认对话框

11.消息对话框

结果：

12.打开新的窗口

JavaScript-关闭窗口（window.close）
close()关闭窗口
用法：
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
例如:关闭新建的窗口。

var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中 mywin.close();

13.认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
先来看看下面代码:

将HTML代码分解为DOM节点层次图:

14.通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。
语法:
document.getElementById(“id”)
看看下面代码:

15.innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。
语法:
Object.innerHTML
注意:
1.Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素。
2.注意书写，innerHTML区分大小写。
我们通过id=”con”获取

元素，并将元素的内容输出和改变元素内容，代码如下:

结果：

16.改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法:
Object.style.property=new style;
注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。
基本属性表（property）:

看看下面的代码:

改变

元素的样式，将颜色改为红色，字号改为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>

结果:

灰色(#CCC)

17.显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。
value取值:

看看下面代码:

18.控制类名（className 属性）

className 属性设置或返回元素的class 属性。
语法：
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
看看下面代码，获得

元素的 class 属性和改变className：

结果：