前端之JavaScript基础1

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41282726/article/details/96429553

1. vscode 常用快捷键

  1. Ctrl + / : 注释

  2. Alt+B : 快速开启浏览器

  3. 复制 : shift + alt + ↓

  4. 移动 : alt + ↓

  5. 格式化代码规范 : shift + alt + F

  6. 折叠侧边栏 : Ctrl + B

  7. ctr + ` => 切换vscode终端

  8. 浏览器调出控制台

    F12 打开控制台

    mac双系统的 F12 = fn+F12

以前讲过的 :

  1. Ctrl+N : 新建

  2. Ctrl + C : 复制 ( 光标在这一行即可)

  3. Ctrl + X : 删除当前行

  4. Ctrl+Z 撤销这一次操作

  5. Ctrl+Shift+Z : 反撤销

2. JavaScript介绍

2.1 为什么要学JavaScript?

网页三部分:

HTML:控制网页的 结构

CSS:控制网页的 样式

JavaScript控制网页的行为

  • 最初的javascript

    • 用于判断客户端的输入(表单校验)

  • 现在的JavaScript:现在的JS无所不能

  • 异步与服务器交互(AJAX)

  • 网页和特效(演示)

  • 服务端开发(nodejs)

  • 命令行工具开发(nodejs)

  • 桌面程序(Electron)

  • app开发(ReatNative)

  • 控制硬件--物联网(Ruff)

  • 游戏开发(cavans, cocos2d-js)

2.2 什么是JavaScript?

概念 : JavaScript 是一种运行在 客户端脚本语言

客户端 : 相对服务端而言的 ; 移动客户端 + PC客户端 (浏览器)

脚本语言 :

  • 编译语言:Java/C/C++/OC/Swift... 运行代码之前,把所有的代码先编译一遍,再运行每一行代码

  • 脚本语言:JavaScript/PHP/Python... 运行一行解析一行,不需要提前编译 , 非编译语言

2.3 JavaScript历史

  • 1995年,Netscape(网景)公司的Brendan Eich(布兰登·艾奇)(伊利诺伊大学香槟分校),花了10天时间为Netscape Navigator2.0开发了一个位置为LiveScript的脚本程序,目的是在浏览器中执行预检测程序(表单校验)

  • 后来Netscape在与Sun合作之后将其改名为JavaScript。目的是为了利用 Java 这个因特网时髦词汇。

  • 微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript(这样命名是为了避免与 Netscape 潜在的许可纠纷)

  • 三足鼎立阶段:

    • CEnvi的scriptEase

    • Netscape的JavaScript

    • IE的JScript

  • 标准化阶段:1997年,ECMA(欧洲计算机制造商协会)邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39,最终锤炼出来了ECMA-262,该标准定义了一门全新的脚本语言,名为ECMAScript

2.4 javascript的组成 (记忆)

  • ECMAScript - JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准,与具体实现无关

  • DOM:一套操作网页元素的API

  • BOM:一套操作浏览器功能的API

3.JavaScript入门

3.1 JavaScript书写位置

第一种 : 写在script标签中

<script>
  alert('Hello World!');
</script>

 第二种 : 引入一个js文件

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

**注意: script 可以放在很多地方,但是我们一般规范些在body里面,放在 html 下面;. 使用src 引入的标签 不能再在标签内写js代码里

3.2 注释

注释代码不会被执行,仅仅起到一个提示的作用。注释可以对复杂的代码进行解释,方便后期的维护和开发。

单行注释 :

// 这是单行注释, 单行注释只能写一行代码
//  快捷键: ctrl + / 

多行注释 :

/*
	这是多行注释,在多行注释中可以
	换行
	sublime Text :  快捷键  ctrl + shift + /
	vscode : 选中多行直接注释,即可,但是这种多行注释 如果需要得自己手写
/*
  • 在写代码的时候,需要写注释,这是一个良好的习惯,

  • 大家初学,一定多写注释 ! 把理解的知识再写一遍,效果会更好!!

3.3 输出语句 (5种)

alert : 警告框

//alert会弹出一个警告框
alert("hello world");

confirm : 确认框

//confirm弹出一个确定框
confirm("我帅吗?");

prompt : 输入框

//prompt:弹出一个输入框,可以输入值
prompt("请输入你的真是年龄");

document.write : 网页中写入内容

//可以识别标签
document.write("hello world");
document.write("<h1>hello world</h1>");

控制台输出 :

//F12打开控制台,在console中可以看到打印的信息
console.log("hello word");

总结:alert、comfirm、prompt 三个用户体验太差,只有在学习的时候会用到。console.log经常用来打印日志,项目调试的时候非常有用。

4. 变量

变量 : 可以变化的量          变量的作用 : 存储数据         声明 : 用 var 来声明

4.1 如何使用变量

1)直接声明变量

//  var 来声明变量的
//  age : 变量名
//  结构 : var + 变量名 ; 
 var age;
 console.log

2)先声明,后赋值

var name;  // 声明一个变量 name
name = '小马哥'; // 一个等号 是赋值,,后面的值赋值给前面的
 console.log

3)同时声明+赋值

var name = '小马哥' 
 console.log

4)同时声明多个变量并赋值

var age = 10,name= 'zs' 
// 相当于
var age = 10;
var name = 'zs';

5)不声明变量,直接赋值(不会报错,但是不推荐)

//  没有用 var 修饰的不管代码在哪里都是全局的
// 不推荐 
height=100;
console.log(height);

6)不声明变量,也不赋值变量,直接使用(会报错)

 //   weight is not defined 要知道是没有定义,估计是变量名写错了
 console.log(weight);

结论:

  • 变量需要声明之后,才能使用,养成一个良好的编程习惯。

  • javascript代码一旦报错了,后面的代码就不再执行了。

4.2 变量的命名规则和规范

 

规则 : ( 必须遵守的,不遵守会报错 )

  • 字母数字下划线$符号组成 ;

  • 不能以数字开头

  • 区分大小写

  • 不能关键字保留字 (不用死记 , 慢慢就见多了)

/关键字:对于js来说有特殊意义的一些单词
//保留字:js保留了一些单词,这些单词现在不用,但是以后要用。

规范 : (建议遵守的 不遵守不会报错)

  • 变量名必须有意义

  • 遵守驼峰命名法。 首字母小写,后面单词的首字母需要大写!

    myName, userPassword

关键字:

保留字:

4.3 变量的练习

1)交换两个变量的值

 var temp = a;
        a = b;
        b = temp;

2)不使用临时变量,交换两个数值变量的值

			 //    a      b
var a = a+b; //    33     21
    b = a-b; //    33      12
    a = a-b; //    21     12

5. 数据类型

javascript中数据类型分为简单数据类型和复杂数据类型,今天只学简单数据类型 ( 5个 )

number、string、boolean、undefined、null

数值 字符串 布尔 声明未赋值 空类型

5.1 number-数字类型

5.1.1 进制

在javascript中表示一个数字,除了有我们常用的十进制11, 22,33等,还可以使用八进制、十六进制表示等。

十进制 :

//我们最常用的进制,进行算术运算的时候,八进制和十六进制最终都要转换成二进制,计算机只识别二进制
//逢10进1
var num = 9;
var num = 29;

八进制: 

// 0开头的数字, 逢8进1
var num1 = 010;
var num2 = 0121;

// 八进制 0-7  逢八进一 , 10
var ba = 0321; 
// 12 = 2*8^0 + 1*8^1 = 10
// 321 = 1*8^0 + 2*8^1 + 3*8^2 = 1+16+ 192 = 209
console.log(ba);

 

十六进制 :

// 0x开头的数字,逢16进1,  数字范围1-9A-F
var num = 0xA;
var num = 0x12;

tips : 关于二进制,计算机在只认识二进制,所以所有的代码最终都会转换成二进制数据。

5.1.2 浮点数

浮点数: 

var num = 0.1;

科学计数法 :

//当一次数字很大的时候,可以用科学计数法来表示
var num = 5e+5;  //5乘以10的5次方
var num = 3e-3;//3乘以10的-3次方

浮点数精度丢失问题 :

//在进行浮点数运算的时候,可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;
0.2 + 0.2 = 0.4;

//尽量少用浮点数进行运算,不要让浮点数进行比较。

解决办法 : 根据小数点后面的位数量 乘以对应的整数;
0.1 + 0.2  ==> (0.1*10+0.2*10) / 10 = 0.3
0.01 + 0.02 呢? ===>(0.01*100+0.02*100)/100

5.1.3 数值范围

最小值:Number.MIN_VALUE,这个值为: 5e-324
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
无穷大:Infinity    1/0
无穷小:-Infinity

5.2 字符串类型

字符串类型,使用双引号 " 或者 ' 包裹起来的字符

//双引号和单引号必须成对出现
var str = 'hello world';
var str = "hello world";

var num1 = 12;
var num2 = '12';
可以通过颜色

5.2.1 字符串长度

每一个字符串都有一个length属性,可以获取到字符串中字符串的个数

var str = "akdjflksjdflk";
console.log(str.length);

5.2.2 转义字符

思考,如何打印?

  • 引号可以嵌套,但是只能相互嵌套,不能嵌套自己 (单双号相互嵌套)

  • 通过转义符

5.2.3 字符串拼接

  • +号具有字符串拼接功能,它能将两个字符串拼接成一个字符串。

  • +号同时具有算术加法的功能,它能将两个数字进行相加

  • 如果+号两边有一个是字符串,那么就是拼串的功能,如果都是数字,那么就是算数的功能。

// 第一种情况 : 字符串 + 字符串
var a = "hello";
var b = "itcast";
console.log(a + b);//字符串拼接功能

// 第二种情况 : 数值 + 数值
var a = 100;
var b = 100;
console.log(a + b);//加法

// 第三种情况 : 字符串 + 数值
var a = 'abc';
var b = 100;
console.log(a + b);//字符串拼接功能

5.3 布尔类型

布尔类型:true 和 false

注意:

1. 区分大小写,不要写成True或者是False了

2. 'true' 和 true , 前者是字符串类型

5.4 undefined和null

他们都属于获取非正常值的类型

  • undefined表示一个没有赋值的变量

  • null表示一个空的值, ( 例如 : 获取一个元素,id写错了,获取不到,返回一个null)

5.5 字面量赋值 与 变量赋值

  • 字面量赋值,字面量也叫直接量,一眼能够识别是什么类型的变量,比如11, "abc", true, false, undefined, null等都是字面量,可以直接会使用。

  • 变量赋值:浏览器必须要经过声明之后,才认识变量,如果没有声明,直接使用变量是会报错的。

6. 操作符

变量可以存储数据,我们还需要学习操作符来操作这些数据 :

算术运算符         赋值运算符        一元运算符          逻辑运算符       比较运算符

6.1 算术运算符

+、—、*、/、%

注意 :

​ 整除 => 余数==0 例如: 能被7整除 : i%7==0

6.2 赋值运算符

赋值运算符有: = , +=, -=, *=, /=, %=

var num = 10;
num += 1;   //num = num + 1;
num -= 1;   //num = num - 1;
num *= 2;   //num = num * 2;
num /= 2;   //num = num / 2;
num % = 2;  //num = num % 2;

6.3 一元运算符

一元运算符:只有一个操作数的运算符

二元运算符:有两个操作数的运算符,比如算术运算符、赋值运算符

自增运算符:++

  • 先自增: ++i

  • 后自增:i++

异同点 :
1. 相同点 : 代码执行之后, 数值都会 + 1
2. 不同点 : 就是在自增的时候使用就会出现不同

//先自增:
var num = 1;
console.log(++num); //先自增:表示先加1,后返回值

//后自增:
var num = 1;
console.log(num++);// 后自增:表示先返回值,后+1

自减运算符:--

  • 先自减:--i

  • 后自减:i--

 

6.4 逻辑运算符

  • &&:与运算符,表示且,只有当两个操作数都为true的时候,结果才是true

  • ||:或运算符,表示或,只要有其中一个操作数是true,结果就是true

  • !:非运算符,取反

总结 : 
&&  翻译 : 一个为真,且,,另外一个也为真  => 才为真
1. 两者都为true,才为true
2. 前者为true,,决定权在后者

||  翻译 : 一个为真,或者另外一个为真 => 真
1. 两者有一个为true,结果就为true
2. 前者为false,,决定权在后者

6.5 比较运算符

比较运算符也叫关系运算符, < > >= <= == != === !==, 关系运算符的 结果是布尔类型

var a = 5;
var b = 6;
console.log(a > b);//大于
console.log(a < b);//小于
console.log(a >= b);//大于等于
console.log(a <= b);//小于等于

console.log(a == b); //相等,只比较值,不比较类型
console.log(a === b); //全等,比较类型和值
console.log(a != b); // 不等, 只判断值,不判断类型
console.log(a !== b); // 不全等 判断值,且判断类型

注意 : 
 数字类型比较和字符串比较是由区别的 
 1. 数字比较 : 24>3;   比较数字大小
 2. 字符串比较 : '24' < '3'   比较首字母大小
 3. 字符串和数字混合比较 : 比较数字内容大小

6.6 运算符优先级

  • ()的优先级最高

  • 一元运算符(++, --, !)

  • 算术运算符(先*/%, 后+-

  • 比较运算符 (先> < >= <=, 后== === != !==)

  • 逻辑运算符(先&&||

不用死记,如果不确定的时候,使用()增加优先级

7. 类型转换

7.1 为什么要进行类型转换???

服务器拿回来的数据,有可能是字符串,比如age='18', 
 var age = '18';
 console.log(age+1);

7.2 查看变量的类型

typeof关键字可以查看数据的类型

var num = 11;
console.log(typeof num);
num = "abc";
console.log(typeof num);

小技巧:在控制台可以根据颜色来判断数据的类型哦(^__^)

7.3 转换成 数值 -number

1) Number()

console.log(Number('55'));
Number()可以把任意值转换成数值类型,但是如果字符串中有不是数字的字符,返回NaN

2) parseInt()parseFloat()

- parseInt()  把整数或者小数都转化为整数;
- parseFloat() 把整数转化整数,把小数转化为小数
var num1 = parseInt("12");  // 12
var num1 = parseInt("12.3"); //12
var num1 = parseFloat("12"); //12
var num1 = parseFloat("12.3");//12.3

var num1 = parseInt("12.3abc");  // 返回12,如果第一个字符是数字会解析知道直到非数字结束
var num2 = parseInt("abc123");   // 返回NaN,如果第一个字符不是数字或者符号就返回NaN

3) 算术运算 (最常用)

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);  +0呢???拼接

7.4 转换成 字符串类型 - string

1) String ( )

var num = 5;
num = String(num);
console.log(num);

2) toString ( )

var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//将来所有的数据都会有toString()方法,除了null和undefined

3)拼串,(最常用)

var num = 5;
num = num + "";
console.log(num);

7.5 转换成布尔类型

所有的值都可以转换成布尔类型

其中 0, "", undefinednullNaN,这几个值会转换成false,其他值都会转换成true

1) Boolean()

console.log(Boolean(1));
console.log(Boolean(0));

2) !!

var a = "abc";
console.log(!!a);

8. NaN

NaN: not a number, 表示一个非数字

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

NaN的注意事项:

  • NaN的类型是number类型的,表示一个非数字

  • NaN不等于任何值,包括NaN本身

  • 通过isNaN()可以判断是否是一个数字,返回false的时候,表示是一个数字。

 

 

展开阅读全文

没有更多推荐了,返回首页