Javascript基础笔记——入门篇

前言

在学习完HTML和CSS之后，我们就要开始学习世界上最流行的编程语言——Javascript！

它可用于HTML和WEB，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

什么是Javascript？

1. Javacript是脚本语言；

2. Javascript是在浏览器客户端执行的脚本语言；

3. Javascript是一种编程语言，是可以插入HTML页面的编程代码；

4. Javascript可以由所有现代主流浏览器执行；

5. HTML体现页面结构；CSS体现页面样式；Javascript体现页面行为，让网页呈现出各种动态效果，用于浏览器页面与用户的交互；

如何插入Javascript？

1. Javascript代码插入在之间;

2. 元素可以插入在HTML文件中的...元素之间；

3. 元素也可以插入在HTML文件中的...元素之间，在标签的前面（推荐此种方法）；

4. Javascript还可以独立（就像CSS一样），我们可以引用外部JS文件，利于平稳退化；

5. HTML文件中引用JS外部文件，要写成：（与引用CSS外部文件的元素和属性href不同），插入在HTML文件中的地方同上述的2和3；

Javascript基础语法

Javascript语句和符号

一行的结束被认定为一条语句的结束，通常在语句的结尾加上英文的分号。

Javascript注释

1. 注释的作用是提高代码的可读性，帮助自己和别人阅读和理解我们所编写的JavaScript代码；

2. 注释的内容不会在网页中显示；

3. 注释可分为单行注释与多行注释两种；

4. 单行注释：// 我是注释

5. 多行注释：/* 我是注释 */

Javascript变量（variable）

1. 字面上看，变量是可变的量；

2. 编程角度讲，变量是用于存储某种数值的存储器；

3. 先声明变量再赋值，使用关键字 var 声明变量：var 变量名；

4. 变量取名：①必须使用英文字母、下划线、或美元符号开头；②可以由多个英文字母、数字、下划线或美元符号组成；③不能使用JavaScript关键命名；

5. JavaScript区分大小写，所以两个名字相同，却有着不同大小写的变量名是不一样的；

6. 全局变量：函数外部声明的变量，页面都可以访问，在页面关闭后被删除；

7. 局部变量：函数内部声明的变量，只能在函数内部访问，在函数执行完毕后被删除；

JavaScript判断语句（if / if...else）

基于不同的条件执行不同的语句动作：

if(条件)
{
    条件为true时执行的语句；
}
else
{
    条件为false时执行的语句；
}

JavaScript函数

1. 函数是完成某些特定功能的一组语句；

2. 函数是被调用时执行的可重复使用的代码块；

3. 多次使用同一段代码时，可把它们封装成函数；

4. 用JavaScript关键词 function 来定义函数：

function 函数名()
{
    要执行的代码；
}

也可以定义带参数的函数，可以有任意多的参数，以逗号分隔：

function 函数名(参数1,参数2,...)
{
    要执行的代码;
}

有时，我们想让函数将值返回调用它的地方，通过使用 return 语句就可以实现，使用 return 语句时，函数会停止执行，并返回指定的值：（JavaScript 不会停止执行，JavaScript 将从调用函数的地方继续执行代码。）

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

5. 函数需要调用才能运行，可以使用不同的参数来调用函数，会有不同的结果；

互动

传统方法：document.write()方法 和 innerHTML属性

1. document.write()方法：可以把字符串插入到HTML文档里，并直接在网页中输出内容；

①直接输出引号中内容：

②通过变量输出内容：

③输出多项内容，用加号连接：

④输出HTML标签，并起作用，用引号括起来：（输出hello后输出一个换行符）

2. innerHTML属性：用来读（获取）、写（替换）某个元素里的HTML内容；

语法：object.innerHTML（object 是获取的元素对象)

写入或替换内容：object.innerHTML=" 需要写入或替换的内容 ";

警告（alert）消息对话框

在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。

语法：alert(字符串或变量);

在输出字符串时要用引号括起来，变量则不用。

alert消息对话框包含一个“确定”按钮；alert可以用于调试程序。

确认（confirm）消息对话框

通常用于允许用户做选择的动作；包含一个“确定”按钮和一个“取消”按钮；用户在点击按钮前不能对网页做其他操作。

语法：confirm("要显示的文本");

返回值：confirm会有个返回值；当用户点击"确定"按钮时，返回true；当用户点击"取消"按钮时，返回false； 通过返回值可以判断用户点击了什么按钮。

提问（prompt）消息对话框

通常用于询问一些需要与用户交互的信息；包含一个“确定”按钮、一个“取消”按钮与一个文本输入框；在用户点击按钮前不能进行任何其它操作。

语法：prompt(str1,str2); 

str1：显示在消息对话框中的文本，不可修改；

str2：文本框中的内容，可以修改；

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

window.open打开新窗口

查找一个已经存在或者新建的浏览器窗口。

语法：window.open(URL, 窗口名称, 参数字符串);

URL：可选参数，窗口中要显示的网页网址或路径；如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
                   1. 名称由字母、数字和下划线字符组成；
                   2. _blank：在新窗口显示目标网页；_self：在当前窗口显示目标网页；_top：框架网页中在上部窗口中显示目标网页；
                   3. 相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
                   4. name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。（图片来自慕课网）

window.close关闭窗口

语法：关闭本窗口：window.close(); 

             关闭指定窗口： 窗口对象.close();

什么是DOM？

1. DOM是文档对象模型；

2. 当创建一个网页并把它加载到浏览器时，DOM就随之生成，它把你编写的网页文档转换为文档对象；

3. DOM代表着加载到浏览器窗口的网页，它把文档表示为一棵节点树：包括 ①元素节点；②属性节点；③文本节点。

DOM操作1

通过ID获取元素

在网页中，我们可以通过id先找到标签，然后进行操作。

语法：document.getElementById("id");

这个调用将返回一个对象。可以利用typeof操作符查看操作数是字符串、数值、函数、布尔值还是对象。

通过标签名称获取元素

在网页中，我们可以通过标签名字先找到标签，然后进行操作。

语法：document.getElementsByTagName("tag");

这个调用将返回一个对象数组。可以利用length属性查出数组里的元素个数。

DOM Core 和 HTML-DOM

1. DOM Core：getElementById，getElementByTagName，getAttribute，setAttribute等都是DOM Core的组成部分，支持DOM的任何一种程序设计语言都可以使用它们，它们   并不专属于Javascript，它们的用途也并非仅限于处理网页，也可以用来处理任何一种标记语言编写出来的文档。

2. HTML-DOM：在使用Javascript语言和DOM为HTML文件编写脚本时，还有许多属性可供选用。例如方法document.write();，属性onclick、innerHTML，这些属性属于HTML-DOM， 它们只能用来处理Web文档。

HTML-DOM

改变HTML样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

语法：object.style.css样式属性名 = new style;

display属性

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。

语法：object.style.display = value;

value取值：1. none：此元素不会被显示（隐藏）；

                      2. block：此元素将显示为块级元素。

className属性

控制类名：className 属性设置或返回元素的class 属性。

语法：object.className = classname;

作用：1. 获取元素的class 属性；
            2. 为网页中的某个元素指定一个css样式来更改该元素的外观。