【JavaScript】JavaScript入门篇

学习时间：2016.12.09

参考资料：http://www.imooc.com/learn/36

一、引入JS文件

二、语句与符号

每一句JavaScript代码格式:语句;

先来看看下面代码

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

例子中的alert("hello!");就是一个JavaScript语句。

一行的结束就被认定为语句的结束，通常在结尾加上一个分号";"来表示语句的结束。

看看下面这段代码,有三条语句，每句结束后都有”;”，按顺序执行语句。

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

学习到的语句

弹窗：alert()

document.write()

三、变量

定义变量使用关键字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
{ 条件不成立时执行的代码 }

五、函数

函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。

定义函数的基本语法:

function 函数名()
{
     函数代码;
}

创建一个提交按钮来调用函数

<input type="button" value="按钮里显示的内容 onclick=" 函数名()" />

六、常用语句

1.输出内容：document.write

2.alert消息对话框：alert(字符串或变量)

3.confirm消息对话框：

var 变量名=confirm(字符串或变量);
if(变量名==true)
{};
else
{};

4.prompt消息对话框：

var 变量名=prompt(显示在对话框中的文本，不可修改;文本框中的内容，可修改);
if(判断条件)
{}
else
{}

5.打开新窗口

window.open('新页面地址','在哪个窗口打开','参数字符串');

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

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

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

参数表如下：

6.关闭窗口

（1）当没有把打开的窗口对象储存在变量里时

window.close();

（2）当把打开的窗口对象储存在变量里时

var 变量名=window.open(); //将新打的窗口对象，存储在变量中
    变量名.close();

七、DOM操作

1.认识DOM

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

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中< html >、< body >、< p >等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如< li >…< /li >中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如< a >标签的链接属性href=” “。

   

2.通过ID获取元素

语法：

document.getElementById("id名")

获取的元素是一个对象，如果想对元素进行操作，我们要通过它的属性或者方法。

通过这个方式可以得到id名为指定的标签。

3.innerHTML属性

语法：

Object/*对象名*/.innerHTML

实例：

<h2 id="con">JavaScript</h2>

var mychar=document.getElementIdBy("con");//获取这个元素
document.write("变化前"+mychar.innerHTML);//输出这个元素里面的内容
mychar.innerHTML="HelloWorld";//改变这个元素里面的内容
document.write("变化后"+mychar.innerHTML);//输出这个元素里面的内容

4.改变HTML样式

Object/*对象名*/.style.property/*属性名*/="新样式";

var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#ccc";
mychar.style.width="300px";

5.显示和隐藏

使用display属性

Object.style.display = value

value取值：none（隐藏）

​ block（显示）

6.控制类名

object.className = classname