Web前端-JavaScript基础教程上

达达前端

发布于 2019-07-03 15:20:39

2.1K0

发布于 2019-07-03 15:20:39

文章被收录于专栏：达达前端达达前端

Web前端-JavaScript必备知识点

Web前端-JavaScript基础教程

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

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

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

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

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;

保留字：

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()构造函数，创建时间和日期的对象。

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

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

字符串

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

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

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>

结言

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

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

作者简介

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.03.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法