JavaScript基础学习

一、简介

JavaScript（JS）是一种基于对象和事件驱动的、并具有安全性能的脚本语言。当应用于HTML文档时，可为网站提供动态交互特性。

1、特点

• 一种解释性脚本语言（代码不进行预编译）。

• 主要用来向 HTML 页面添加交互行为。

• 可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。

• 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

2、应用场景

JavaScript应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。
开发者们基于 JavaScript 核心编写了大量实用工具，可以使开发工作事半功倍。其中包括：

• 浏览器应用程序接口： 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。
• 第三方 API： 让开发者可以在自己的站点中整合其它内容提供者提供的功能。
• 第三方框架和库： 用来快速构建网站和应用。

3、运行方式

• 直接在浏览器的控制台编写运行
• 编写一个独立的js文件，然后在Html文件中引入
• 用编辑软件如 Webstrom 或 VSCode 编写独立的js文件，由安装好的 Node.js 解释执行运行

二、基本语法

1、注意

• 对大小写敏感
• 自动忽略多余的空格

2、变量

变量是存储值的容器，用关键字 let 或 var 声明
eg：

var Myvariable；

3、语句

分号不是必要的：一行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。

当然，是建议习惯每条语句末尾加分号的。

常见的基础语句有：if do-while while for for-in for-of break continue switch
特殊的：for-of、forEach能简洁的遍历集合中的元素

var colors = ['red', 'green', 'blue', 'brown'];	//colors是一个数组
//传统遍历（基本不用了）
for(var i=0;i<colors.length;i++){
  console.log(colors[i]);
}
//for-in，专注下标
for(var c in colors){
  console.log(colors[c]);
}
//for-of，专注元素
for(var c of colors){
  console.log(c);
}
//高级遍历
colors.forEach(c => console.log(c));
var other = colors.map(c => c + 'X');//map不仅遍历，还返回另一个数组
console.log(other);

4、标识符

标识符是指变量、函数、属性的名字，或者函数的参数。

• 第一个字符只能是 字母、下划线（ _ ）或美元符号（ $ ） 之一；
• 其他字符可以是字母、下划线、美元符号或数字。

5、注释

类似于 CSS，JavaScript 中可以添加注释。

/*
这里的所有内容
都是注释。
*/

如果注释只有一行，可以更简单地将注释放在两个斜杠之后

// 这是一条注释。

6、运算符

• 一元操作符 ++ --

• 布尔操作符 && || ！： 除下列值为假外其余皆为真： false、null、undefined、‘’、0、NaN

• 算术操作符 + - * / %

• 关系操作符 <> <=>= == === != !==

• 条件（问号）操作符 ? :

• 赋值操作符 = += -+ *= /= %=

7、对象

对象Object是用于封装数据和方法的
创建对象有两种基本的方式：

//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){    //设置对象的方法/函数，注意此处
    console.log(this.name);
};
//方式二字面量：最常用
var person = {
    name: 'Lary Page',
    age: 47,
    job: 'Software Engineer',
    sayName: function(){        //注意此处
        console.log(this.name);
    }
};
console.log(person.job);
person.sayName();

除两种基本方式外，还有一种批量创建多个对象的方式：

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');

8、数组

ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别：

• ECMAScript 数组的 每一项可以保存任何类型的数据，可以但不建议。
• ECMAScript 数组的大小可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据

ECMAScript是JavaScript的核心，可以当作是一个标准。

创建数组有以下两种方法，我们常用第二种：

//方式一new
var colors = new Array('red', 'blue', 'green');
//方式二字面量
var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组
console.log(colors[1]);
colors[3] = 'brown';
console.log(colors.length);
var names = []; // 创建一个空数组
var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推荐！
console.log(hyBird[3].firstName);

9、链式语法

链式语法只需要让每个函数 return this 代表包含该函数的对象，这样其他函数就可以立即被调用。

//链式语法
var bird = {//定义对象字面量
  catapult: function() {
    console.log( 'Yippeeeeee!' );
    return this;//返回bird对象自身
  },
  destroy: function() {
    console.log( "That'll teach you... you dirty pig!" );
    return this;
  }
};
bird.catapult().destroy();

10、闭包

闭包是Closure，是函数的局部变量集合，只是这些局部变量 在函数返回后会继续存在。
当在一个函数内定义另外一个函数就会产生闭包。

function greeting(name) {
    var text = 'Hello ' + name; // local variable
    // 每次调用时，产生闭包，并返回内部函数对象给调用者
    return function() { console.log(text); }//注意该函数无名称，称为匿名函数
}
var sayHello = greeting('Closure');//
sayHello();  // 注意此处的使用方法。通过闭包访问到了局部变量text

上述代码的执行结果是：Hello Closure。是因为：
sayHello指向了greeting函数对象，sayHello()则对其进行调用，greeting函数执行完毕后将返回greeting函数内定义的匿名函数对象，而该匿名函数仍然可以访问到了定义在greeting之内的局部变量text，此时我们已从greeting函数中退出了。

三、技巧函数

1、事件

事件能够为网页添加真实的交互能力。
它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。 这里介绍两种实现方式：

document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}

let myHTML = document.querySelector('html');
myHTML.onclick = function() {
	alert('别戳我，我怕疼。');
};

2、HTML标签节点的操作

document.write(""); //输出的
 
document.getElementById("id名")； //获取html页面标签中，标签id属性等于此值的对象。
 
var id = document.getElementById("hid"); //获取id值为hid的标签对象
 
document.getElementsByTagName("标签名"); //获取当前文档执行的标签对象

3、HTML标签对象的操作

标签对象.innerHTML="内容"；//在标签对象内放置指定内容
 
标签对象.style.css属性名="值" //改变标签对象的样式。
 
示例：id.style.color="red";
 
//注意：属性名相当于变量名,所以css属性名中的减号要去掉，将后面的首字母大写。
 
font-size（css）---> fontSize(JS属性)
 
标签对象.value； //获取标签对象的value值
 
标签对象.value=”值“；//设置标签对象的value值

4、输出内容 document.write()

document.write()可直接在网页中输出内容。
直接在括号内填写输出内容即可，也可以使用变量引入。

5、警告（alert 消息对话框）

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

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

var mynum = 30;
 
alert("hello!");
 
alert(mynum);

结果将按顺序弹出消息框，同时包含一个确定按钮。

在点击对话框"确定"按钮前，不能进行任何其它操作。
消息对话框通常可以用于调试程序。

6、确认选择（confirm 消息对话框）

confirm 消息对话框是为了从用户那里获得信息，通常用于允许用户做选择的动作，如：“你对吗？”等。
弹出对话框包括 一个确定按钮和一个取消按钮。

语法：confirm(str);

• str：在消息对话框中要显示的文本
• 返回值：Boolean值
  当用户点击"确定"按钮时，返回true；
  当用户点击"取消"按钮时，返回false；

6、提问（prompt 消息对话框）

prompt是为了得到更特定的响应，通常用于询问一些需要与用户交互的信息。
弹出消息对话框包含 一个确定按钮、取消按钮与一个文本输入框。
语法：prompt(str1,str2);

• str1：要显示在消息对话框中的文本，不可修改；
• str2：文本框中的内容，可以修改；
• 返回值：
  1、点击确定按钮，文本框中的内容将作为函数返回值
  2、点击取消按钮，将返回null

7、打开新窗口（window.open）

语法：

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

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

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

1. 该名称由字母、数字和下划线字符组成。
2. 该字符串是一个由逗号分隔的特征列表，声明了被打开窗口的名称。可以是"_top"、“_blank”、“_selft”、"_parent"等。
   _blank ：在新窗口显示目标网页
   _selft ：在当前窗口显示目标网页
   _parent ：框架网页中当前整个窗口位置显示目标网页
   _top ：框架网页中在上部窗口中显示目标网页
3. 相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4. name 不能包含有空格。

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

top　　　　Number　　窗口顶部离开屏幕顶部的像素数
left　　　 　Number　　窗口左端离开屏幕左端的像素数
width　　　 Number　　 窗口的宽度
height　　　 Number　　窗口的高度
menubar　　yes,no　　 窗口有没有菜单
toolbar　　　yes,no　　 窗口有没有工具条
scrollbars　 yes,no　　 窗口有没有滚动条
status　　　 yes,no　　 窗口有没有状态栏

8、关闭窗口（window.close）

语法：

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

例如:关闭新建的窗口。

 <script type="text/javascript">
 
 var mywin=window.open('//www.jb51.net'); //将新打的窗口对象，存储在变量mywin中
 
 mywin.close();
 
 </script>

9、完善网页交互

图像切换器

这里将用新的 DOM API 为网页添加一张图片，并用 JavaScript 使图片在点击时进行切换。

1. 首先，找到一张想要在页面上展示的图片。
2. 将这张图片储存在你的images目录下。
3. 将图片重命名为’firefox2.png’（去掉引号）。
4. 打开 main.js 文件，输入下面的 JavaScript 代码：

let myImage = document.querySelector('img');
 
myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/firefox2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

这里首先把元素的引用存放在 myImage 变量里。然后将这个变量的 onclick 事件与一个匿名函数绑定。

每次点击图片时：
1、获取这张图片的 src 属性值。
2、用一个条件句来判断 src 的值是否等于原始图像的路径:
如果是，则将 src 的值改为第二张图片的路径，并在内加载该图片。
如果不是，意味着它已经修改过, 则把 src 的值重新设置为原始图片的路径，即原始状态。

添加个性信息

在用户初次进入站点时可将网页的标题改成一段个性化欢迎信息，即在标题中添加用户的名字。
名字信息会由Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。
还可以会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。

打开 index.html， 在 <script> 标签前添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：

<button>切换用户</button>

将以下代码原封不动添加到 main.js 文件底部，将获取新按钮和标题的引用，并保存至变量中：

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

然后添加以下函数来设置个性化欢迎信息。

function setUserName() {
  let myName = prompt('请输入你的名字。');
  localStorage.setItem('name', myName); //将数据存储在浏览器中供后续获取
  myHeading.textContent = 'Mozilla 酷毙了，' + myName;
}

接下来，添加以下的 if … else 块。可以称之为初始化代码，因为它在页面初次读取时进行构造工作：

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla 酷毙了，' + storedName;
}

最后，为按钮设置 onclick 事件处理器。按钮按下时运行 setUserName() 函数。这样用户就可以通过按这个按钮来自由设置新名字了：

myButton.onclick = function() {
   setUserName();
}

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名 。
另外，因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在。

小结

关于JavaScript的基础学习在这先告一段落，更多的应用实践应该是在web网页制作中了！