JavaScript之快速入门

一、快速入门

1.聊聊JavaScript这个东西

1)概述
JavaScript是目前世界上最流行的脚本语言。
JavaScript与Java并不关联,JavaScript只是为了蹭Java的热度。
网景公司用了10天开发出JavaScript。
一个合格的后端程序员,必须要精通JavaScript。
2)历史
JavaScript之快速入门_第1张图片

ECMAScript它可以理解为是JavaScript的一个标准。
最新版本已经到了ES6版本,但大部分浏览器还只停留在支持ES5代码上。
注:目前开发环境与线上环境不一致。

2.基本使用及HelloWorld

引入JavaScript及弹出HelloWorld
1)内部标签

<script type="text/javascript">
  //script标签,写JavaScript代码
  alert('hello world');
script>

注:不用显示定义type,也默认就是javascript。
2)外部引入

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

注:Ⅰscript标签必须成对出现。
Ⅱ在head里或body底部都可以存放。

3.浏览器控制台使用

定义变量:变量类型 变量名 = 变量值;

var score = 66;

条件控制
例:打印分数属于的分数段。

if(score>60&&score<70) {
  alert("60~70");
} else if(score>70&&score<80) {
  alert("70~80");
} else{
  alert("other");
}

JavaScript的多行注释与Java一样:

/*
*
**/

浏览器必备调试须知
右键——>审查元素 快捷键:F12
1)Element:可分析HTML和CSS。
2)Console(控制台):这里可以写JavaScript代码,并且输出。
常见命令——在浏览器的控制台打印变量:console.log();与Java的System.out.println();相似。
3)Sources:当前的源码目录。
右侧的调试工具中有监视工具,有打断点的功能,打了断点刷新网页就可以跳转至断点处。半圆形箭头加点(Step over next)是执行到结束,下箭头加点(Step into next)往下走一步,上箭头加点(Step out of current)是往上走一步。用于调试一步一步找错误。
4)Network:网络请求。
5)Application:相当于web里的数据库,将一些简单的数据保存在网页里。
①Local Storage:本地存储,在H5里用的比较多,但现在不怎么用,在VUE里要使用它,如状态管理。
②Session Storage:存Session的。
③Cookies:后面可能用的最多的。

4.数据类型快速浏览

数值、文本、图形、音频、视频…
1)变量:变量类型 变量名 = 变量值;
变量名的命名规则与Java相似:
Ⅰ所有标识符应以字母,美元符 ,下划线 开始。
Ⅱ首字母之后字母,美元符 ,下划线 ,数字的任何组合。
Ⅲ不能使用任何关键字作为变量名。
Ⅳ可以使用中文命名,但一般不建议这样去使用。
2)number
JS不区分小数和整数。
①整数 例:123
②浮点数 例:123.1
③科学计数法 例:1.23e3
④负数 例:-99
⑤NaN not a number
⑥表示无限大 Infinity
3)字符串:用单引号或双引号括起。
例:‘abc’ "abc"
4)布尔值:true false
5)逻辑运算
①&&:两个都为真,结果为真。
②||:一个为真,结果就为真。
③!:真即假,假即真。
6)比较运算符
除了熟知的< > <= >=,还有
①=(不是等于,是赋值)
②== (等于,类型不一样,值一样,结果也会为true)
③=== (等于,类型一样,值一样,结果才为true)
注:这是JS的一个缺陷,坚持不要用==比较。
须知:ⅠNaN === NaN结果为false。NaN与所有的数值都不相等,包括自己。
ⅡisNaN(NaN)结果为true。只能通过isNaN()来判断这个数是否为NaN。
浮点数问题:Ⅰ(1/3)===(1-2/3)结果为false。
ⅡMath.abs(1/3-(1-2/3)<0.00000001)结果为true。
尽量避免使用浮点数进行运算,存在精度问题!
7)null和undefined
①null 空
②undefined 未定义
8)数组
Java中的数组元素必须是相同类型的,JS中不需要这样。

var arr = [1,2,3,4,5,'hello',true,null];
new Array(1,2,3,4,5,'hello',null,false);

注:为了保证代码的可读性,尽量使用[]的方式。
取数组下标:如果越界了,就会undefined。
9)对象
对象是大括号,数组是中括号。
每个属性之间使用逗号隔开,最后一个不需要添加。
例:定义一个叫xiaoming的人的对象。

var person = {
  name: "xiaoming",
  age: 3,
  tags: ['js','java','web']
}

取对象的值:

person.name
person.age

5.严格检查模式strict

如i = 1;没有定义但不会报错,且自动默认为全局变量。
在ES6中一般用let定义局部变量。
‘use strict’;:严格检查模式,预防JavaScript的随意性导致产生的一些,必须写在JavaScript的第一行!
前提:IDEA需要设置支持ES6语法。

你可能感兴趣的:(Ping说前端三剑客,javascript)