1小时0基础带你 Javascript入门建议收藏~

Posted 2021-06-20 贪吃ღ大魔王

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1小时0基础带你 Javascript入门建议收藏~相关的知识，希望对你有一定的参考价值。

javascript

1、背景介绍

为了提高网速而由网景公司的布兰登·艾奇来解决，他用10个工作日设计了js

1、`js`标准

ECMAScript是一个标准，而JavaScript是语言

2、`js`的基础概念

1、什么是`js`

一个支持面向对象的、跨平台的、脚本语言，依赖与html才能实现。

2、应用场景：

表单验证：规范用户输入数据，和后台数据进行交互 2. 网页特效：给页面内容加行为，让页面动起来 3. 游戏开发：飞机大战、打砖块
js的组成示意图
物联网：https://zhuanlan.zhihu.com/p/45509947
h5，是html的下一个版本，很强大，就目前而言，我们知道的h5只是一些标签，并不能完美的展示出他的强大之处，加入js后，才能激活这些标签深层次的功能。

3、`js`的组成

ECMAScript：核心

BOM：文档对象模型，提供了访问和操作网页类容的方法和接口

DOM：浏览器对象模型，提供了与浏览器交互的方法和接口

3、`js`的基础使用

1、`js`的写入位置

1、标签：script

<body>

<script>
//js代码的书写位置（建议）
</script><-这是表示结束的标签，不能乱写，除了用转译 符->
<noscript>
<p>本页面需要浏览器支持（启用）JavaScript。</p>
</noscript>  
</body>

传统的标准是写在head里面
实际上style和script写在哪里都是可以的
现代的web是放在body里面
但是出现了require.js后都大部分写在head里面，实现异步加载以及依赖关系处理
6个属性：⭐
- async:（可选）表示不影响其他操作立即下载脚本（异步操作）（填写布尔）
- charset(可选) 表示通过src属性指定的代码的字符集。大多浏览器忽略了
- defer:(可选) 表示延迟到文档全部解析完显示后执行(属性==属性值)
- src(可选) 表引入的js文件地址
- type:(可选) 可以看出是language属性，即脚本语言属性。

异步脚本一定会在页面的load事件之前执行，但可能在事件触发前后执行

实现XHTML的识别

<script>
    //<![CDATA[
        
    //]]>
</script>

2、引入`js`文件

软件使用外部文件，方便维护，缓存加载快，未来趋势

<script src="main.js"></script>

3、注释

//js的一行注释
/*
	js的多行注释
*/

2、严格模式

在js代码顶部添加“user strict”

或者在函数内部的顶部添加

function (){
    "user strict";
    //函数体
}

在严格模式下，ECMAScript3中的一些不确定就会得到处理，对某些不安全的操作抛出错误

不能匿名生产变量，函数没有this指向，不允许删除变量或对象，不允许删除函数，形参不能从重名

3、`js`的输出

文档对象熟成

document.write("hollo world");
//输出标签元素类容
document.write("<b>文字加粗</b>")；
document.write("<i>")；
document.write("文字倾斜")；
document.write("</i>")；

弹窗的形式显示
```
alert("hollo world");
```
弹出判断框显示
```
confirm("are you sure");
```
弹出输入框显示
```
prompt("hollo world");
```
调试窗口输出
```
console.log("hollo world");
```

4、变量的定义

ECMAScript的变量是松散类型的

1、var定义变量

var x;//var关键字后面是表示符或变量名。
/*表示符的规则：字母、数字、下划线组成，
    不能用数字开头---驼峰命名法
    不能与关键字和保留字冲突
*/

var a=12；//赋值
console.log(a);

 var a,b;//一次定义多个变量  声明
 var c=1,b=2;

 e= 13;//隐式声明
 console.log(e);

2、let定义

let a=12;//只能在所在的范围域内使用

3、常量定义

const a=1;

5、变量的类型

数字类型：var num=1;
字符串类型：var str="hollo world";
布尔类型：var t="true",f="false";
未定义类型：var under="undefined";
空对象类型：null;
对象类型：
特殊形式：function,这个特殊的类型
```
var arr=[1,2,3];
var age=12;
var obj={
    name:"obj",
    sex:"男",
    age
}
```
得注意的是：数组和对象都是对象类型的

前5个为简单类型或者是基础类型，后一个为复杂类型又叫引用类型。

误区：null==undefined返回的是true，但这两个完全不一样。
查看数据类型：console.log(typeof 表示符) typeof是一个操作符不是函数

1、Boolean类型

操作符：Boolean

数据类型	转换为true值	转换为false值
Boolean	true	false
Sreing	任何字符串	”“(空字符串)
Number	任何非零数值	0和NaN
Object	任何对象	null
Undefined	n/a	undefined

2、Number类型

1、进制

var a = 0b10；//二进制 
var a = 010;//八进制
var b = 0xA；//16进制
var c = 0xb；//小写字母或大写字母都可以，也为16进制
    console.log(a); //8
    console.log(b); //10
    console.log(c); //b

2、科学计数法

var num = 5e+5;  //5乘以10的5次方 （变大）
var num = 3e-3;//3乘以10的-3次方（小数）

3、浮点精度丢失

这是基于IEEE754数值的浮点计算的通病

var a=0.1+0.2;console.log(a);//结果为0.30000000000000004
var b=(0.1*10+0.2*10)/10;console.log(b);//解决精度丢失

4、范围

[5e-324，1.797e+0]超过就是-Infinity(负无穷)和Infinity(正无穷)

无穷是无法进行计算的

5、`NaN`

例：

var a = 1;
var b = '二';
var c = a - b;
console.log(c); // NaN   不是一个数字
console.log(typeof c); // NaN: not a number  不是一个数字

在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN

NaN的注意事项：

NaN的类型是number类型的，表示一个非数字
NaN不等于任何值，包括NaN本身
通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字

6、`NaN`的运用

var a = 123; 
var b = "abc"; 
console.log(isNaN(a)); // false 
console.log(isNaN(b)); // true 
console.log(isNaN(c)); // true

isNaN()函数用与检测数据是否为非数字类型

7、转换

操作符：Number

3、字符类型

1、转义字符

console.log("\\"");
/*
单引号不能包单引号，只能包双引号，就是自己不能包自己。
 实在不行用反斜杠\\转义字符（\\）
 */

符号	意义
\\n	换行
\\t	制表符
\\b	空格
\\	斜杠
‘’	单引号
‘	双引号

2、字符拼接

var lang="Java";lang+="Script";console.log(lang);
var lang="num";lang+=1;console.log(lang);

3、`toString()`

除了null和undefined其他类型都可以使用toString转换成字符串

但对象转字符串输出为[object Object]

var str=true.toString();

特殊运用

十进制转其他进制，输出结果为字符串

let num=10;
console.log(num.toString());//"10"
console.log(num.toString(2));//"1010"
console.log(num.toString(8));//"12"
console.log(num.toString(10));//"10"
console.log(num.toString(16));//"a"

4、`String()`

和toString()概念相同，用法不同

var str=String(true);

5、模板字符串

let a=97;
let str=`a=${a}`;
console.log(str);//a=97;
//不仅如此，还能将空格输出
console.log(`a       b`);//a      b

4、object类型⭐⭐

1、概念⭐⭐⭐

ECMAScript中的对象其实就是数据和功能的集合，凡是new出来的变量类型都是对象。

2、对象的创建

let obj=new Object();//不建议省略括号
let arr=new Array();//创建一个数组对象

3、属性和方法⭐

每一个object类型的数据都具有一下的属性和方法(宿主对象DOM&BOM除外)

constructor：保留着用于创建当前对象的函数，即构造函数(constructor)就是Object()；
hasOwnProperty(propertyName)：用于检测给的的属性在当前的实例中是否存在，作为参数的属性名(propertyName)必须以字符串形式指定，如obj.hasOwnProperty("name")
isPrototypeOf(object)：用于检测传入的对象是否是当前的原型
propertyIsEnumerable(propertyName)：用于检测给定的属性是否能够使用for-in语句来枚举
toLocaleString()：返回对象的字符串表示；
toString()：返回对象的字符串表示；
valueOf()：返回对象的字符串、数值或布尔值显示❓❓❓

5、6都是输出[object Object]

6、取整保留

1、`parseInt`取整关键词

1.1、小数取整

var a=89/5;
c=parseInt(a);//c=a的取整

1.2、取字符串最前面的数

正常情况

var a="123abc"
var c=parseInt(a);//c=a前面的数

特殊情况

var a="a12a12"
var c=parseInt(a);//c=NaN

2、`parseFloat`取浮点

var a="3.14";
var b=parseFloat(a);

效果不明显。

3、取小数后几位`toFixed`(位数)：

var a=3.141592453589;
var c=a;
console.log(c.toFixed(2))
//既保留两位小数
//输出的结果为字符串
//输出的是字符串

7、运算操作符

1、赋值“=”

var a=1;
a=10;console.log(a);

2、四则运算：

+ - * / ++ -- += -= *= /=

特殊使用

var str="10.1";
str=+str;console.log(str);//此时将str转换成Number类型，减号也能这样使用；

除+外，其他的均可将包含有效数字字符串转换成数字类型

3、字符运算(字符串的拼接)

var a="hollo",b="world",c=a+b;console.log(c);//holloworld
var a="a的值=",b=1,c=a+b;console.log(c);//a的值=1

4、比较运算(关系运算)

> < >= <= == ===

三元运算：a>b?a:b

== （判断值是否相对，不判断也不管是不是同类型）

=== (先判断是否同类型，再判断值是否相等)

var a=12,b="12";
console.log(a==b,a===b)//true false

5、逻辑运算

& | ! ~ && ||

按位非

var num1=25;
var num2=~num1;
console.log(num2);//-26

按位与

var result=25&3;console.log(result);//1

按位或

var res=25|3;console.log(res);//27

按位异

var res=25^3;console.log(res);//26

左移

var oldValue=2;//二进制的10
var newValue=oldValue << 5;//二进制的1000000，十进制的64；

有符号的右移动

var oldValue=64;//二进制的1000000
var newValue=oldValue >> 5;//二进制的10，十进制的2；

无符号的右移动

var oldValue=64;//二进制的1000000
var newValue=oldValue >>> 5;//二进制的10，十进制的2；
var oldValue=-64;
var newValue=oldValue >> 5;

短路操作⭐⭐

var res=true&&false;console.log(res);
var res=true||false;console.log(res);

可以用来解决兼容问题

8、语句

1、`if-else`语句:略

2、`do-while`语句

var  i = 0;
do{
    i += 2;
}while(i<10);
console.log(i);

3、`while`语句

var i=0;
while(i<10){
    i+=2;
}

4、`for`语句

for(var i=0;i<5;i++){console.log(i);}
for(let i=0;i<5;i++){
    for(let j=0;j<4;j++){
        console.log(i+j);
    }
}
for(;;){console.log("hollo world")}//无限循环
//注意，for里的参数可以提出去，但要在里面加判断条件使循环停止

5、`for-in`语句

用来枚举遍历对象类型的数据的迭代语句

for(let i in arr){console.log(i,arr[i])};
for(let key in obj){console.log(key,obj[key])};

注：不能对null和undefined使用

6、`label`语句

使用label语句可以在代码中添加标签，以便将来使用

start:for(var i=0;i<count;i++){console.log(i);};

7、`break`和`continue`语句

break是结束当前的语句，后面的语句将不再执行；
continue是跳过某个执行步骤，然后执行下一步代码；
outermost在双for循环中，里面的跳过外面的循环;(没用过)

8、`with`语句⭐

var qs=location.search,substring(1);
var hostName=localtion.hostname;
var url=localion.href;
//使用with语句，将localtion提出来公用
with(location){
    var qs=search,substring(1);
    var hostName=hostname;
    var url=href; 
}

9、`switch`语句

let num=2;
switch(num){//这个参数可以是字符串，或者是true。
	case num=1:
        console.log(num);
    break;
    case num=2:
        console.log(num);
    break;
    case num=3:
        console.log(num);
	break;
}

注：switch具有穿透的性质，没有break的话会从上往下，只要符合case条件便执行

可以合理使用这个性质

10、函数

function fn(){
    console.log("hollo world");
}
fn();
//解构赋值+默认值的函数调用
function add(num,{a,b},[c,d],e=15){
    console.log(num+a+b+c+d+e);
    //返回结果是return
    return num+a+b+c+d+e；
    //return 后面的所有代码都不再执行。函数结束
}
console.log(add(1,{a:2,b:3},[4,5])+15);//30 45
//匿名函数即调用
(function(){})();
function(){}();
var fn=function(){};
div.onclick=function(){};
~function(){}();//看不懂的神奇的调用，真的能用哦

/*****箭头函数*****/
let fn=()=>{};fn();
let fn=res=>console.log(res);fn(20);//单个参数或单条函数体不需要括号
let fn=(a,b)=>a+b;console.log(fn(1,2));//直接返回a+b

/*****函数默认值****/
let fn=(a,b=10)=>a+b;console.log(fn(1))以上是关于1小时0基础带你 Javascript入门 建议收藏~的主要内容，如果未能解决你的问题，请参考以下文章 
 一篇博文：带你 gulp入门 0基础必看，万字肝爆，建议收藏~
 大佬带你1小时入门 Python 爬虫
 一个小时，带你玩转前端交互,零基础入门做登录界面
 零基础1小时入门Vue（建议收藏）
 零基础1小时入门Vue（建议收藏）
 Java零基础如何入门？给初学者的建议，带你快速入门Java

1小时0基础带你 Javascript入门 建议收藏~