前端之JavaScript-CFANZ编程社区

前端之JavaScript

javascript的历史：

为了蹭JavJava热度，改名为javascript。

特点：对于其他语言，你需要学习语言的各种功能，而对于 JavaScript，你常常需要学习各种解决问题的模式。而且由于来源多样，从一开始就注定，JavaScript 的编程风格是函数式编程和面向对象编程的一种混合体。

JavaScript介绍：

javascript 入门易学性:

JavaScript 对初学者比较友好。可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
JavaScript 是有界面效果的（相比之下，C 语言只有白底黑字）。
JavaScript 的入门较简单（进阶不易）。比如，JS 是弱变量类型的语言，变量只需要用 var/let/const 来声明。而 Java 中变量的声明，要根据变量的类型来定义。

// ES5 写法
var a;

// ES6 写法
const a;
let a;

JavaScript 的组成

JavaScript 基础分为三个部分：

ECMAScript：JavaScript 的语法标准。包括变量、表达式、运算符、函数、if 语句、for 语句等。
DOM：Document Object Model（文档对象模型），JS 操作页面上的元素（标签）的 API。比如让盒子移动、变色、改变大小、轮播图等等。
BOM：Browser Object Model（浏览器对象模型），JS 操作浏览器部分功能的 API。通过 BOM 可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 是浏览器运行环境为 JS 提供的 API。

第一行Javascript：hello world

行内式：写在标签内部。
内嵌式（内联式）：写在 head 标签中。
外链式：引入外部 JS 文件。

代码中的引号,HTML中引号用双引号，js中用单引号

方式一行内式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <input type="button" value="点我点我" onclick="alert('千古壹号 Hello 方式1')" />
    </body>
</html>

方式二内嵌式

我们可以在 HTML 页面的 <body> 标签里放入<script type=”text/javascript”></script>标签对，并在<script>里书写 JavaScript 代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            // 在这里写 js 代码
            alert('千古壹号 hello 方式2');
            console.log('qianguyihao hello 方式2');
        </script>
    </body>
</html>

text 表示纯文本，因为 JavaScript 代码本身就是纯文本。
可以将多行 JS 代码写到 <script> 标签中。
内嵌式 JS 是学习时常用的方式。

方式三:外链式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <!-- 外链式：引入外部的 js 文件：这个 utils.js 文件与当前的 html 文件，处于同一级目录 -->
        <script src="utils.js"></script>
    </body>
</html>

通过外部链接,使html与js分离,做到高内聚,低耦合,有利于代码的结构化和复用

关于window.onload:先加载，最后执行

当js代码写在中的时候，无法操作标签元素，因为浏览器默认会从上至下解析网页，故加载标签元素时js元素还未被加载，自然无法操控标签元素。

解决办法

当需要通过JS来操作界面上的标签元素的时候，用windo.onload将JS代码进行包裹

<head>
  window.onload = function(){
    // 这里可以写操作界面元素的JS代码，等页面加载完毕后再执行
    ...
  }
</head>

window.onload的含义是:等界面所有内容加载完毕后再执行{}中的代码。

做到了先加载，最后执行，等页面加载完毕后再执行。

JavaScript 一些简单的语法规则

JS对格式要求不敏感，每一条语句以分号结尾
如果你不写；浏览器会给你补上，会消耗系统资源和性能，甚至出现错误
所有符号都是英文的
JS严格区分大小写

前端代码的注释

HTML 的注释

<!-- 我是 HTML 注释  --><!--头部开始-->
<div class="header"></div>
<!--头部结束-->

<!--内容开始-->
<div class="main"></div>
<!--内容结束-->

<!--底部开始-->
<div class="footer"></div>
<!--底部结束-->

CSS的注释

<style type="text/css">
    /* 我是 CSS 注释 */
    p {
        font-weight: bold;
        font-style: italic;
        color: red;
    }
</style>

注意：CSS 只有/* */这种注释，没有//这种注释。而且注释要写在<style>标签里面才算生效。

JavaScript 的注释

// 我是注释
/*
	多行注释1
	多行注释2
*/

JavaScript输出语句

弹窗：alert()语句–只有一个确定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script>
            alert('千古壹号');
        </script>
    </body>
</html>

弹窗：confirm()语句（含确定/取消）

var result = confirm('你听说过千古壹号吗？');
console.log(result);

弹出输入框：prompt()语句
prompt()专门弹出能够让用户输入的对话框

var a = prompt('请随便输入点什么东西吧');
console.log(a);

alert()和 prompt()的区别：

alert() 语句中可以输出数字和字符串，如果要输出字符串，则必须用引号括起来；prompt()语句中，用户不管输入什么内容，都是字符串。
prompt() 会返回用户输入的内容。我们可以用一个变量，来接收用户输入的内容。

网页内容区域输出：document.write()语句

document.write('千古前端图文教程');

控制台输出：console.log()打印日志

console.log('千古壹号1'); //普通打印
console.warn('千古壹号2'); //警告打印
console.error('千古壹号3'); //错误打印

总结：alert() 主要用来显示消息给用户，console.log() 用来给程序员做调试用。

常量:数字和字符串

常量:数字常量,字符串常量,布尔常量,自定义常量

数字常量:

// 不需要加引号
alert(996); // 996是整数
alert(3.14); // 3.14是浮点数（即带了小数）

字符串常量

console.log('996');

console.log("千古壹号，永不止步");

布尔常量

if (true) {
	console.log('如果为真，就走这里面的代码);
}

自定义常量

const 常量名称 = 常量取值;

变量

变量表示可以被修改的数据,我们通过[变量名]获取数据,甚至修改数据

本质:变量是程序在内存中申请的一块用来存放数据的空间。

####　变量的定义与声明

var name; // 定义一个名为 name 的变量。name是变量名。
const name; // 定义一个常量

let age; // 定义一个变量

变量的赋值

name = '千古壹号';
// 定义：声明一个变量
var num;
// 赋值：往变量中存储数据
num = 996;
// 取值：从变量中获取存储的数据
console.log(num);
var a = 100; // ES5语法
console.log(a);

const b = hello; // ES6 语法

let c = world; // ES6 语法
c = qianguyihao; // 修改 变量 C 的值

变量初始化

var name;
name = 'qianguyhihao';
var name = 'qianguyihao';
//修改变量的值
var a = 100;
a = 110;

console.log(a); // 打印结果：110。因为 110 覆盖了 100
// 同时定义多个变量
var num1, num2;
// 定义多个变量的同时，进行初始化
var num1 = 10, num2 = 20;
var num1, num2;
num1 = num2 = 10; // 重点在这一行

console.log(num1); // 10
console.log(num2); // 10
var num1, num2 = 10;

console.log(num1); // undefined
console.log(num2); // 10
// 变量之间可以相互赋值
var num1, num2;
num1 = 10;
num2 = num1; // 把 num1 的值拷贝一份，赋值给 num2
console.log(num2); // 10
//变量重复定义
var name = '许嵩';
var name = '千古壹号'; // 这里会重新定义一个新的变量 name

console.log(name); // 千古壹号

变量声明和赋值的特殊情况

变量建议先声明后使用

var a;
a = 100;
console.log(a); // 打印结果：100

变量的命名规则

只能由字母(A-Z、a-z)、数字(0-9)、下划线(_)、美元符( $ )组成。
不能以数字开头。必须以字母(A-Z、a-z)、下划线(_)或者美元符( $ )开头。变量名中不允许出现空格。尤其注意，变量名中不能出现中划线-，很多人写了多年代码都不知道这一点，让人大跌眼镜。
严格区分大小写（JS 是区分大小写的语言）。
不能使用 JS 语言中保留的「关键字」和「保留字」作为变量名。下一篇文章会讲。
变量名长度不能超过 255 个字符。
汉语可以作为变量名。但是不建议使用，因为 low。

标识符

标识符：在JS中所有的可以由我们自主命名的都可以称之为标识符。包括：变量名，函数名，属性名，参数名都是属于标识符

标识符的命名规则和变量的命令规则是一样的。关于变量的命名规则，详见上一段。

标识符不能使用语言中保留的关键字及保留字。

关键字

if、else、switch、break、case、default、for、in、do、while、

var、let、const、void、function、continue、return、

try、catch、finally、throw、debugger、

this、typeof、instanceof、delete、with、

export、new、class、extends、super、with、yield、import、static、

true、false、null、undefined、NaN

保留字以后会成为关键字

enum、await

abstract、boolean、byte、char、double、final、float、goto、int、long、native、short、synchronized、transient、volatile、

arguments eval Infinity

# 以下关键字只在严格模式中被当成保留字，在ES6中是属于关键字
implements、interface、package、private、protected、public