JavaScript

JavaScript简单介绍

如果说一个网页是一幢房子，HTML结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。 CSS是装饰材料，是油漆，是用来装饰房子的。CSS如果没有HTML结构那也就什么都不是了，没有了实际使用价值。 而JavaScript就是房屋的开关，用来进行互动，产生动态效果。 如一个按钮，一个选择框的改变等等，都需要用到JavaScript来对此行为进行编写。

JavaScript编写位置

JavaScript可以编写在html中的head、body、以及他们之外的部分，需要用script标签来将内容包括起来。当然和css一样，我们也可以使用外部的js文件，要使用这样的js文件，就仅仅需要一行语句，如<script scr="yyf.js"></script>，当一个同一种js需要被多个网页使用时，这样的方式就显得非常实用。外部文件中放置脚本有如下优势：

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

JavaScript显示输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

alert就是在页面上方弹出一个警告框，如alert(“ok!”)，警告框中的内容就是ok!。
DOM.write可以写入一行内容，也可以写入一行html代码，如document.write("<h1>这是一个标题</h1>");
也可以：

<script>
document.write(5+7);
</script>

innerHTML可以直接用来修改、读取某个html元素的内容

<p id="demo">我的第一个段落</p><script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

需要强调在js中，innerHTML、value、textContent、innerText的区别：
1、value：应用于表单的输入框（textarea除外）

2、innerHTML:可以写入HTML代码，写入的HTML代码可以被解析，获得时候也可以获得HTML代码

3、innerText：获得内容的时候，会忽略HTML代码，写入HTML代码不能解析。获得内容与HTML解析的内容一样

4、textContent：获得内容的时候，会忽略HTML代码，写入HTML代码不能解析。获取的内容与源码内容一样

JavaScript 遍历方法

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);

JavaScript 对象

在面向对象的编程中，有一个重要理念，“万物皆对象”，这句话在js中也同样适用。如一个people，他有name，age，sex，三个属性，那么一个叫jack的人，年龄18，性别男，在js中就该如下表示:

var people={name : "jack",age : 18,sex : "男"};

可以发现，js对象和json对象一样，都是以键值对的方式进行描绘一个对象的。但是区别在与，json对象中的“键”，是有冒号的，如：

var people={"name ": "jack","age" : 18,"sex" : "男"};

这就导致了一个vue+element+axios的动态生成表格的问题。axios通过后端返回的是一个js对象数组（jsonarray自动转换成一个js对象数组），element+vue使用的数据也是用的js对象数组，

<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template><script>export default {data() {return {tableData: axiosdata;}}}</script>//axiosdata是axios返回的一个js对象数组如下：[{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]

效果：

详情参见element表格
而同样的传输前后端工具ajax就不行了，如果ajax传给前端的数据是jsonarray，他就不会自动转换为js对象，那这个element的动态表格就没有内容，我们需要先将jsonarray转换成js对象数组才行。（好像扯远了）

JavaScript 函数

js的函数的写法千篇一律，都是在script中写 function （函数名）（参数）{}
但是要怎么调用这些函数呢，可以通过html中某个元素的事件属性来调用，如οnclick=“clickFuc()”；如οnchange="selectChangeFuc()"等等。
如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试实例</title>
<script>
function myFunction()
{alert("Hello World!");
}
</script>
</head><body>
<button onclick="myFunction()">点我</button>
</body>
</html>

也可以直接在script里面调用函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试实例</title>
</head>
<body>
<p id="yyf">一个段落</p>
</body>
<script>
function pFuc(){document.getElementById("yyf").innerHTML="修改段落";}
pFuc();
</script>
</html>

也可以使用window.οnlοad=某个函数名，在网页加载完成时自动执行一个括号内的函数。注意：一个html只能有一个onload函数
其他的细节与c++的函数都差不多了，也可以有返回值，但是不用在函数名前面写返回类型。（我的理解是js中的所有类型的声明都是var，所以返回的也是一个var）

JavaScript 事件

事件的存在使js的函数有了用武之地，当网页出现一个事件时，我们需要通过函数来对该事件的发生进行一个反应。常见的事件有：

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

更多事件列表: JavaScript 参考手册 - HTML DOM 事件

TypeScript

TypeScipt 是什么？

ypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

TypeScript支持未来的ES6甚至ES7。在TypeScript中，可以直接使用ES6的最新特性，在编译时它会自动编译到ES3或ES5。

TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。（来自万能的棋歌教学网）
我的理解是，TypeScript与javaScript 的关系就像 scss和css 一样，前者都是后者的一个优化写法。

TypeScript 的let 和const

打开typeScript学习乐园可以看到，以前javascript中的var在typescript中都没有了，都变成了let，如果要用一个常量，则声明方式为const。

let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
let age: number = 89;
let age = 64;//error!const pi: number = 3.14159;//pi以后不可改变，类似常量
pi = 3.14;//error!

TypeScript 解构

解构一词的意思是，将对象、数组中的元素拆分到指定变量中，以方便使用。如下：

//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {a: "foo",b: 12,c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);

TypeScript 函数

1.不带参数的函数：
语法格式如下：

function function_name():return_type { // 语句return value;
}

return_type 是返回值的类型。
return 关键词后跟着要返回的结果。
一般情况下，一个函数只有一个 return 语句。
返回值的类型需要与函数定义的返回类型(return_type)一致。
typescript 实例：

// 函数定义
function greet():string { // 返回一个字符串return "Hello World"
} function caller() { var msg = greet() // 调用 greet() 函数 console.log(msg)
} // 调用函数
caller()

对比javascript:

// 函数定义
function greet() {return "Hello World";
}
function caller() {var msg = greet(); // 调用 greet() 函数 console.log(msg);
}
// 调用函数
caller();

实例中定义了函数 greet()，返回值的类型为 string。
greet() 函数通过 return 语句返回给调用它的地方，即变量 msg，之后输出该返回值。

2.带参数的函数:
语法格式如下：

function func_name( param1 [:datatype], param2 [:datatype]) {
}

其中：param1、param2 为参数名，datatype 为参数类型。
ts实例：

function add(x: number, y: number): number {return x + y;
}
console.log(add(1,2))

js实例：

function add(x, y) {return x + y;
}
console.log(add(1, 2));

TypeScript 的类与继承、派生

1.ts的类：
ts的类简单易懂，js的类看起来就不那么轻松了，因为ts优化了js，来看看它们对类代码的编写：
ts:

class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}greet() {return "Hello, " + this.greeting;}
}

js:

var Greeter = /** @class */ (function () {function Greeter(message) {this.greeting = message;}Greeter.prototype.greet = function () {return "Hello, " + this.greeting;};return Greeter;
}());

可见，ts的类就跟我们java，c++的类好相似，所以ts的类相比js的类确实易懂了不少。当然，ts的类也有public，private，get，set函数，所以我们编写起来和java一样，非常熟悉方便快捷。
2.ts的继承与派生：
ts的继承与派生：

class Animal {constructor(public name: string) { }move(distanceInMeters: number = 0) {console.log(`${this.name} moved ${distanceInMeters}m.`);}
}class Snake extends Animal {constructor(name: string) { super(name); }move(distanceInMeters = 5) {console.log("Slithering...");super.move(distanceInMeters);}
}class Horse extends Animal {constructor(name: string) { super(name); }move(distanceInMeters = 45) {console.log("Galloping...");super.move(distanceInMeters);}
}

js的继承与派生：

var __extends = (this && this.__extends) || (function () {var extendStatics = function (d, b) {extendStatics = Object.setPrototypeOf ||({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };return extendStatics(d, b);}return function (d, b) {extendStatics(d, b);function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());};
})();
var Animal = /** @class */ (function () {function Animal(name) {this.name = name;}Animal.prototype.move = function (distanceInMeters) {if (distanceInMeters === void 0) { distanceInMeters = 0; }console.log(this.name + " moved " + distanceInMeters + "m.");};return Animal;
}());
var Snake = /** @class */ (function (_super) {__extends(Snake, _super);function Snake(name) {return _super.call(this, name) || this;}Snake.prototype.move = function (distanceInMeters) {if (distanceInMeters === void 0) { distanceInMeters = 5; }console.log("Slithering...");_super.prototype.move.call(this, distanceInMeters);};return Snake;
}(Animal));
var Horse = /** @class */ (function (_super) {__extends(Horse, _super);function Horse(name) {return _super.call(this, name) || this;}Horse.prototype.move = function (distanceInMeters) {if (distanceInMeters === void 0) { distanceInMeters = 45; }console.log("Galloping...");_super.prototype.move.call(this, distanceInMeters);};return Horse;
}(Animal));

我只能说，ts简直帮了我们大忙。总的来说，ts使js中的部分代码优化成了我们熟悉的模样，又易懂更容易编写。

yyf学习JavaScriptTypeScript相关推荐

yyf的HTMLCSS学习历程
HTML&CSS介绍 HTML 是超文本标记语言(HyperText Markup Language)的缩写,是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记 ...
深度学习基础知识（八）：神经网络基础之导数
这个专栏主要是想和大家分享一下深度学习的基础知识,主要是以吴恩达老师深度学习课程内容作为基础,并补充了很多其他内容希望让整体内容更加容易理解和系统化.如果想要了解具体专栏里面有什么内容的话,可以看一看 ...
java入门慕路径,Java入门基础知识总结学习教程大全【必看经典】
类型的表达式,是循环条件,表达式3是党执行了一遍循环之后,修改控制循环的变量值. ??? for语句的执行过程是这样的:首先计算表达式1,完成必要的初始化工作:然后判断表达式2的值,如果表达式的值为t ...
Java EE学习心得
–Java EE学习心得 1. 称为编程专家的秘诀是: 思考-----编程--------思考------编程--.. 编程不能一步到位,不能一上来就编,必须先思考如何写,怎样写?然后再编程 ...
FastAI 2019课程学习笔记 lesson 2：自行获取数据并创建分类器
文章目录数据获取 google_images_download 的安装和使用挂载google 个人硬盘到Google colab中删除不能打开文件创建ImageDataBunch 训练模型解 ...
FastAI 课程学习笔记 lesson 1：宠物图片分类
文章目录代码解析神奇的"%" 导入fastAI 库下载解压数据集 untar_data 获取帮助文档 help() ? ?? doc 设置路径 get_image_files ...
深度学习学习指南-工具篇
colab Colab是由Google提供的云计算服务,通过它可以让开发者很方便的使用google的免费资源(CPU.GPU.TPU)来训练自己的模型. 学习经验总结如何使用命令行? 通过!+cmd ...
Redis学习之路(一)--下载安装redis
redis学习之路--下载安装redis windows安装redis 1.下载redis 2.安装 3.查看是否安装成功 windows安装redis 1.下载redis 网址:https://gi ...
python内置库之学习configparser库(一)
python内置库之学习configparser库(一) 1.引言 ini文件简介 [节] 键=值注:节不能重复出现 2.自己封装了一个增删改查的类,可以参考一下 import configpars ...

yyf学习JavaScriptTypeScript