Web前端-JavaScript基础教程上

时间 2019-11-26

原文原文链接

Web前端-JavaScript基础教程javascript

将放入菜单栏中，便于阅读！css

JavaScript是web前端开发的编程语言，大多数网站都使用到了JavaScript，因此咱们要进行学习，JavaScript是必备的前端技能。html

HTML是用来描述网页的结构，css是用来描述网页的延时，而JavaScript是用来描述网页的行为的。前端

JavaScript是一种高端，动态，弱类型的编程语言。来源于Java，它的一等函数来源于Scheme，原型来源于Self。html5

var x; // 声明变量为x
x=0; // 给变量赋值为0

var student = {
 name: "dashu",
 age: "12"
};

// 经过"."或"[]"来访问对象属性
student.name;

student["age"];

// 建立新的属性，进行添加操做
student.tall = "123";

// {}空对象，没有属性
student.dog = {};

var num = [1,2,3,4,5];
num[0];
num.length;
num[num.length-1];

// 添加新元素
num[num.length] = 6;
// 改变已有的元素
num[num.length] = 7;

// 定义空元素 
var em = [];
em.length;

// 数组对象
var students = [
 { name: dashu1, age: 1 },
 { name: dashu2, age: 2 }
];

var dashu = {
 dog: [ [1,2], [3,4] ],
 dog1: [ [2,3] ]
};

function add(x) {
 return x+1;
}
add(1);

var num = function(x) {
 return x+1;
}

var arrs = []; // 定义空数组
arrs.push(1,2,3); // push()添加元素
arrs.reverse(); // 元素次序反转

// 两点
points.dist = function() {
 var p1 = this[0];
 var p2 = this[1];
  // 数组的两个元素
  // x 轴距离
  var a = p2.x - p1.x;
  var b = p2.y - p2.y;
  return Math.sqrt( a*a + b*b); //平方根
};
points.dist();

function da(x) {
 if(x>=0）{
  return x;
 }else{
  return -x;
 }
}

// 计算阶乘
function da(n){
 var num = 1;
 while(n>1){
  num *= n;
  n--;
 }
 return num;
}

function Point(x,y) {
 this.x = x;
 this.y = y;
}

var a = new Point(1,1);

Point.prototype.r = function() {
 return Math.sqrt{
  this.x * this.x +  this.y * this.y
 };
}

p.r();

<html>
<head>
<script src="library.js"></script>
</head>
<body>
<p>html</p>
<script>
</script>
</body>
</html>

<script>
 function add(){
  var a = confirm("html");
  if(a){
   window.location = "";
  }
 }
 setTimeout(add, 2222);
</script>

windwo.onload = function() {
 var images = document.getElementsByTagName("img");
 for(var i = 0; i<images.length; i++){
  var image = images[i];
  if(image.addEventListener){
    image.addEventListener("click", hide, false);
   }else{
    image.attachEvent("onclick", hide);
   }
 }
}

font-weight: bold;
text-decoration: underline;
border: solid black 1px;
vertical-align: top;

保留字：java

break, delete, function, return, typeof
case, do, if, switch, var
catch, else, in, this, void
continue, false, instanceof, throw, while
debugger, finally, new, true, with
default, for, null, try

class const enum export extends import super

implements let privae public yield
interface package protected static

abstract double gote native static 
boolean enum implements package supper
byte export import private synchronized
char extends int protected throws
class final interface public transient
const float long short volatile

Math.pow() 次幂
Math.round() 四舍五入
Math.ceil() 向上求整
Math.floor() 向下求整
Math.abs() 求绝对值

Math.max()
Math.min()

Math.random() 随机数
Math.PI 圆周率
Math.E 天然对数的底数

Math.sqrt() 平方根
Math.pow() 立方根

日期和时间：Date()构造函数，建立时间和日期的对象。node

var now = new Date(); 当前日期和时间

文本：是字符串，是由一组16位组成的不可变的有序列。react

字符串jquery

var s = "dashu";
s.charAt(0);

布尔值，在JavaScript中有布尔值类型，为true和false。webpack

null在JavaScript中表示空值，null的typeof运行为字符串object。null为特殊的对象值，含义为非对象。

null类型的惟一一个成语，它表示数字，字符串和对象是“无值”的。

undefined值表示“空值”，代表变量没有初始化，代表属性或元素不存在，返回没有值就为undefined。值为“未定义”，运行typeof时，返回的“undefined”。

全局属性：

undefined，Infinity，NaN

String()，Number()，Boolean()

var s = "dashu";
var n = "123";
var b = true;
var S = new String(s);
var N = new String(n);
var B = new String(b);

““和”=”

第一个将原始值和其包装对象视为相等
第二个则是视为不等

undefined, null, 布尔值, 数字, 字符串
数组和函数

var str = "dashu";
str.toUpperCase();
s;

var a = { x:1 };
a.x = 3;
a.y = 3;

var a = [1,2,3];
a[0]=2;

var a = { x: 1 };
var b = { x: 1 };

a === b // false

var a = [];
var b = [];

a === b; // false

对于上面的也是不相等的。

只有指向同样的引用才是相等的。

var a = [];
var b = a;
b[0] = 1;
a[0]; // 1
a === b // true

复制数组：

var a = [ 1,2,3 ];
var b = [];
for(var i = 0; i<a.length; i++){
 b[i] = a[i];
}

比较数组：

function equalArrays(a,b){
 if(a.length != b.length) return false;
 for(var i = 0; i<a.lenght; i++)
  if(a[i] !== b[i]) return false;
 return true;
}

类型转换：

"2" * "3" // 6
undefined 转 字符串 "undefined"，数字"NaN"，布尔值"false"

null 转字符串"null"， 数字为0

"" 空字符串 转数字 0

相等：

null == undefined
"0" == 0
0 == false
"0" == false

Number("2"); // 2
String(false); // "false"
Boolean([]); // true
Object(2) // new Number(2);

toFixed根据小数点后的指定数字转字符串

var a = 1234.567;
a.toFixed(0) // "1234"
a.toFixed(2) // "1234.56"

parseInt("1 dash"); // 1
parseFloat(" 2, dashu") // 2

toString()返回一个反映对象的字符串。

[1,2,3].toString(); // "1,2,3"

valueOf()方法返回对象自己

变量声明：

var i;

循环：

for(var i = 0; i<6; i++){
 console.log(i);
};

for(var item in lists) console.log(item);

做用域：

var q = "dashu"; // 声明一个全局变量
function add() {
 var q = "da"; // 声明一个局部变量
 return q;
}

声明全局变量能够不用var声明

function test(item) {
 var i = 0;
 if(typeof item == "object"){
  var j = 0;
 for(var k = 0; k < 10; k ++){
   console.log(k);
  }
  console.log(j);
 }
}

函数定义表达式：

var a = function(x) {
 return x++;
}

ECMAScript 6 入门

let用于声明变量，只有在所在代码块有效

{
 let a = 1;
 var b = 2;
}

a // ReferenceError: a is not defined.
b // 2

let只有在它所在的代码块有效：

for (let i = 0; i < 10; i++) {
}
console.log(i);
// ReferenceError: i is not defined

for (let i = 0; i < 3; i++) {
  let i = 'a';
  console.log(i);
}
// a
// a
// a

函数内部变量i和循环变量i不在同一做用域。

// var 
console.log(a); // 输出undefined
var a= 2;

// let 
console.log(b); // 报错ReferenceError
let b= 2;

var命令会发生变量的提高，运行时，变量a已经存在了，而let不会。

暂时性死区：

var a= 123;

if (true) {
  a= '123'; // ReferenceError
  let a;
}

若是一个变量没有被声明，不会报错：

typeof a // "undefined"

若是调用函数，而函数中的参数变量没有被声明，就会致使死区，报错。

// 不报错
var a = a;

// 报错
let a = a;
// ReferenceError: x is not defined

不能够重复声明：

// 报错
function b() {
  let a = 100;
  var a = 10;
}

// 报错
function b() {
  let a = 100;
  let a = 10;
}

块级做用域的须要，若是没有块级做用域可能会覆盖外层变量，块级做用域，如，变量循环i，循环结束后，没有消失，而是变为全局变量。

外层代码块不受内层代码块的影响。

function add() {
  let a = 5;
  if (true) {
    let a = 1;
  }
  console.log(a); // 5
}

在ES6中容许使用块级做用域中声明函数。

`const`命令

const声明常量的值，一旦声明，就不能改变。

const PI = 3.14;
PI // 3.14

PI = 1;
// TypeError: Assignment to constant variable.

const一旦声明变量，就要进行初始化，不赋值，就报错

const a;
// SyntaxError: Missing initializer in const declaration

const只在声明的块中有效，声明的变量不会提高，存在暂时性死区，不能重复声明，本质是指变量指向内存地址所保存的数据不能改动。

const a= {};

a.prop = b;
a.prop // b 

// 将 a 指向另外一个对象，就会报错
a= {}; // TypeError: "a" is read-only

const ab = [];
ab.push('dashu'); // 可执行
ab.length = 0;    // 可执行
ab = ['dashu'];    // 报错，这就致使了错误，由于把一个数组赋值给变量，就不是同个地址了

Object.freeze对象冻结

const foo = Object.freeze({});

// 下面一行不起做用；
// 会报错
foo.prop = 12;

顶层对象

window.a = 1;
a // 1

a = 2;
window.a // 2

// es6开始
// var,function声明变量是全局变量，是顶层对象的属性

var a = 1;
window.a // 1

// let const class 声明就不是了
let b = 1;
window.b // undefined

IE: trident内核
Firefox: gecko内核
Safari: webkit内核
Opera: Blink内核
Chrome: Blink

<!DOCTYPE> 声明位于文档中的最前面位置，处于<html>标签以前。

用于告诉浏览器文档使用哪一种HTML或XHTML规范。

区分Quirks模式和Standards模式区别：

Standards模式是标准模式，遇到一个问题是之前的规则不兼容新的规则，使用了新的功能，就弄个参数，若是等于就使用新的规则，不等于就使用以前的规则，这就是Quirks模式。

区分与，布局，样式解析，脚本执行，三个方面。

div+css布局table优势，改变的时候方便，只改css文件，页面加载速度快，结构化清晰，页面显示简洁，表现与结构分离，易于seo优化。

JavaScript的数据类型有：

基本数据类型：

String, Boolean, Number, Undefined, Null

引用数据类型：

Object

JavaScript中的继承：

原型链继承，构造函数继承，组合继承，寄生式继承等

DOM操做：

createDocumentFragment();
createElement()
createTextNode()
appendChild()
removeChild()
replaceChild()
insertBefore()
getElementsByTagName()
getElementsByName()
getElementsById()

JavaScript中typeof返回的数据：

object number function boolean underfined

JavaScript本地对象能够实例化，内置对象不能实例化，宿主自带document,window。

var str = '123';
str = str.split('').reverse().join('');
// '321'

200：请求已成功
302：请求的资源临时从不一样的 URI 响应请求
403：服务器已经理解请求，可是拒绝执行它
404：请求失败

node.js, mongodb, npm, mvvm, react, angularjs, webpack等

应用 web 标准进行设计，99%的网站都须要被重构。

数组解构：

let a = 1;
let b = 2;
let c = 3;

let [a, b, c] = [1, 2, 3];

let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

var {x = 2} = {x: undefined};
x // 2

var {x = 2} = {x: null};
x // null

let {length : len} = 'hello';
len // 5

如何优化页面的加载速度？

减小css文件的数量和大小，压缩css和js文件代码；图片的大小；把css样式表放在顶部，把js放置在底部；减小http请求数，使用外部js或css。

页面性能优化：压缩，合并，减小请求，diam层析优化

内存泄漏的缘由有：内存泄漏是任何对象在不使用时它还存在，致使内存泄漏为setTimeout，闭包，控制台日志，循环等。

从服务器推送数据到客户端：

html5 websocket
websocket flash

库：

jquery, yui, prototype, dojo, ext.js

框架：

modernizr, underscore, backbone

前端开发：

Sublime Text, Eclipse, Notepad, Firebug, HttpWatch

前端路由
是指
在不进行后端请求的状况下对页面进行跳转

双向数据绑定：angular

单向数据绑定：knockout

单纯地 View 层: React

jquery优化，优先使用id选择器，jquery若是要使用dom元素，就建议存储一个变量保存使用，使用dom操做的过程很是耗性能。

class前使用tag。

jquery操做dom的框架，jqueryui是基于jquery作的一个ui组件库。

jquery一个对象能够同时绑定多个事件，底层实现原理：addEventListener与attachEvent兼容处理作事件注册。

Jquery.extend 用来扩展 jQuery 对象自己
jquery.fn.extend 用来扩展 jQuery 实例的

如何将数组转换为json字符串，而后换回来？

$.parseJSON('{"name":"dashu"}');
JSON.stringify

在jquery.fn中的init返回的this指的是？返回this又是？

this是执行init构造函数自身的，其实就是jquery实例对象，返回this实现jquery的链式操做。

http状态码：

1##: 用于指定客户端的动做；
2##: 用于表示请求成功；
3##: 用于定位头信息；
4##: 用于指出客户端的错误；
400 语义有误
401 当前请求须要用户验证
403 服务器已经接收请求，但拒绝执行
5##: 用于指出服务器的错误
503: 服务不可用

前端开发优化：

减小http请求次数，css,js代码压缩，图片大小控制适合，CDN托管，Data缓存。能够用innerHTML代替dom操做，减小dom操做次数，优化js性能。

能够多用className,少用全局变量，缓存dom节点。

少用css表达式，图片预加载，样式放顶部，脚本放在底部，使用div+css布局。

var str=$("a").attr("href")

将数组转化为 json 字符串

$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}

jquery是一个js库，而jquery ui是在jquery基础上，利用jquery的扩展性设计的插件。

sub，add.call(sub,3,1) == add(3,1) 
alert(4);

function add(a,b){
alert(a+b);
}
function sub(a,b){
alert(a-b);
}
add.call(sub,3,1);

异步加载方式：

defer, ie
async,
callBack

上述描述的json术语是一种轻量级的数据交换格式，数据格式简单，易于读写。

判断对象是否属于某个类：

instanceof

原型对象也是普通的对象，不为Null，就叫原型链

setInterval（fn1,500）// 重复执行

setInterval（fn1(),500）// 只执行一次

原生JavaScript，return false;只阻止默认行为
jQuery中的return false; 既阻止默认行为，又阻止冒泡

事件委托指利用冒泡的原理，本身所要触发的事件，让其余元素取执行。

join()表示用数据中所用元素拼接成字符串。
split()把字符串分割开。
slice()能够从已有的数组返回选定的元素。
splice()从数据中添加或删除，返回被删除的部分数组。

闭包读取函数内部的变量值，并保持在内存中。

apply()和 call()

做用是同样的，传递的参数就不一样了。

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

阻止冒泡：

ev.stopPropagation();
ev.cancelBubble = true;

高性能的JavaScript?

使用DocumentFragment，clone，innerHTML，switch，三目运算符，setInterval等。

call()和apply()区别在于apply的参数是数组形式，而call的参数是单个的值。

dom操做：

createDocumentFragment()
createTextNode()
appendChild()
removeChild()
replaceChild()
insertBefore()
getElementsByTagName()
getElementsByName()
getElementById()

class Point {
add(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}
}

判断一个对象是否属于某个类:

instanceof constructor

严格模式

"use strict";

　　function strict(){
　　　　"use strict";
　　　　return "这是严格模式。";
　　}

　　function notStrict() {
　　　　return "这是正常模式。";
　　}

window.onload()方法须要等全部元素加载完毕才执行，$(document).ready只要dom结构加载完毕就行。

页面加载性能优化：

压缩css,js文件；合并Js.css文件，减小http请求，使用外部js,css文件，减小dom操做。

this:

var User = {
count: 1,
add: function() {
return this.count;
}
};
console.log(User.add()); 
var func = User.add;
console.log(func());

1 和 undefined

数组去重：

var arrs = [ 1,2,2,3,4 ];
function add(){
 // 定义一个空数组
 var newArr = [];
 // 定义一个空对象
 var obj = {};
 // 定义索引
 var index = 0;
 // 定义数组的长度
 var long = arr.length
 // 循环索引
 for(var i = 0; i<long; i++){
  if(obj[arrs[i]]==undefined){
   obj[arrs[i]] = 1;
   newArr[index++] = arr[i];
  }else if(obj[arrs[i]==1){
   continue;
  }
  return newArr;
 }
 var new Arr2 = add(arrs);
}

// 数组去重：

function add(array){
    var aaa = []; //一个新的临时数组
    for(var i = 0; i < array.length; i++){
        if(aaa.indexOf(array[i]) == -1){
            aaa.push(array[i]);
        }
    }
    return temp;
}

var arr = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(add(arr));

function add(arr){
 arr.sort();
 for(var i = 0; i<arr.length-1; i++){
  if(arr[i] == arr[i+1]){
   arr.splice(i,1);
   i--;
   }
 }
 return arr;
}

function add(arr){
 // 定义一个空数组
 var newArr=[];
 for(var i=0; i<arr.length; i++){
  if(newArr.indexOf(arr[i]) == -1){
   newArr.push(arr[i]);
  }
 }
 return newArr;
}

function add(arr){
 var obj = {};
 var newArr = [];
 for(var i = 0; i<arr.length; i++){
  if(obj[arr[i]] == nudefined){
   newArr.push(arr[i]);
    obj[arr[i]] = 1;
  }
 }
 return newArr;
}

ajax的过程，建立XMLHttpRequest对象，建立一个异步调用对象，建立新的HTTP请求，并指定HTPP请求的方法，url以及验证信息，设置响应HTTP请求状态变化的函数，发送HTTP请求，获取异步调用返回的数据。

如何解决跨域问题，跨域就是，协议，域名，端口相同才同域，不然为跨域。ajax不能够跨域获取数据，能够获取文件内容，使用js脚本，函数调用，调用的参数为服务器返回的数据。

ajax请求，XMLHttpRequest标准浏览器，ActiveXObjectie浏览器：

var ha = null; // 建立对象
if(window.XMLHttpRequest){
 ha = new XMLHttpRequest();
}else{
 ha = new ActiveXObject("Microsoft.XMLHTTP");
}
ha.open(“方式”,”地址”,”标志位”);//初始化请求
ha.setRequestHeader(“”,””);//设置 http 头信息
ha.onreadystatechange =function(){}//指定回调函数
ha.send();//发送请求

标签语义化复合物文档语义的标签。
用正确的标签作正确的事情，html语义化让页面的内容结构化，便于对浏览器，搜索引擎解析。

伪类清除浮动，after伪元素，clear:both，

window, document, location, screen, history, navigator
alert() open() close() setInterval() setTimeout() clearInterval() clearTimeout()

$.ajax({
 url: "",
 data: // post数组
 dataType: "json",
 type: "POST",
 success: function(data){
 },
 error: function(){
 }
});

内存泄漏：setTimeout,闭包，控制台日志，循环。

<script>标签的位置

<!DOCTYPE html>
<html>
<head>
<title></title>
<script></script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script></script>
</body>
</html>

异步脚本：

<script type="text/javascript" async src=""></script>

结言

好了，欢迎在留言区留言，与你们分享你的经验和心得。

感谢你学习今天的内容，若是你以为这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

做者简介

达叔，理工男，简书做者&全栈工程师，感性理性兼备的写做者，我的独立开发者，我相信你也能够！阅读他的文章，会上瘾！，帮你成为更好的本身。长按下方二维码可关注，欢迎分享，置顶尤佳。

Web前端-JavaScript基础教程上

const命令

顶层对象

结言

`const`命令