JavaScript--基本概念

初识JavaScript

 

1、进制转换

二进制：0b binary 两个符号代表了2个状态。

八进制：0o octal 8个符号代表了8个状态。

十进制： 10个符号代表了10个状态。

十六进制：0x 16个符号代表了16个状态。

 

所有进制转为十进制

二进制 0111 = 0*2^3 + 1*2^2 + 1*2^1 + 1*2^0 = 0+4+2+1 = 7

八进制 123 = 1*8^2 + 2*8^1 + 3*8^0 = 64 + 16 + 3 = 83

十进制 15 = 1*10^1 + 5*10^0 = 10 + 5 = 15

十六进制 a1c = a*16^2 + 1*16^1 + c*16^0 = 2560 + 16 + 12 = 2588

 

2、概念：

JavaScript是动态，弱类型基于原型的脚本语言

JS写动态特效，控制动态页面的显示和隐藏

 

3、作用

写页面动态特效，使页面具有交互性

例如：轮播图，tab特效，表单验证等

 

4、前端三层

HTML 写结构 内容 身体

CSS 写样式 样式 衣服

JS 写行为 动态特效 行为

 

5、发展史

1995年网景公司 布兰登艾奇 开发的livecript，后改名为JavaScript，初衷是为了表单验证，提升用户体验度，

2009年 ECMAScript5 学

2015年 ECMAScript6

ECMA：欧洲计算机制造商协会

 

6、JavaScript组成部分

①ECMAScript 核心js 固定了js的基础语法

变量，常量，数据类型，流程控制，array，function，object等

②DOM 文档对象模型 规定了一套管理HTML文档的机制

③BOM 浏览器对象模型 规定了操作浏览器的语法

7、引入JS的方式

（css引入方式①行内样式 内联样式；②内部方式；③外部方式）

①内部方式

<script>

js代码

</script>

推荐写在HTMLbody结束标签之前

②外部方式（写项目时建议用此方法）

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

推荐写在head中

③行内方式，配合事件使用

例如：

<div style="width: 50px; height: 50px; background-color: yellow;" οnclick="alert('hahah')">点我</div>

 

外部方式和内部方式不能共用一个script标签

当共用时候，外部引用生效，内部引入方式不生效

 

8、输出方式

①输出到控制台

console.log()；

不识别HTML标签，元素

②输出到页面

document.write();

识别HTML标签，元素

③弹出警告框

window.alert（）；（window可以省略）

会阻止页面程序的执行

 

9、调试

打开控制台：Ctrl+shift+J

①报错类型

②报错原因

③报错位置

 

多个script报错：

①错误前面没影响

②一个script报错对其他script没影响

③同一个script，错误及错误后面不执行

 

10、JS语法

①区分大小写

②js语句以分号或者换行结尾

③推荐一行只写一条语句，并且以分号结尾

④js不识别多余的空格

 

11、标识符

数据在内存中对应有一个符号，称为标识符

 

1）标识符的命名规则——必需遵守

①区分大小写 age AGE

②可以包含数字、字母、下划线、$

③不能以数字开头

④不能是js的关键字和保留字

 

2）规范——建议

①见名知意

②多个单词建议驼峰命名法

大驼峰命名法 每一个单词首字母都大写 MaxAge

小驼峰命名法 第一个单词首字母小写，后面单词首字母都大写 maxAge

③不建议名字太长

 

12、变量

1）定义

值可以改变的量，称为变量

 

2）作用

存储数据的容器

 

3）声明变量

var 变量名;

eg:var age;

 

4）变量赋值

变量名 = 值;

等号右侧的值赋值给等号左侧

eg:age = 18;

 

5）变量的初始化

声明变量的同时给变量赋值，称为变量的初始化

var 变量名 = 值;

eg:var age = 18;

 

6）一条语句可以声明多个变量，用逗号隔开

var 变量1,变量2,...;

eg：var x,y,z;

var x = 5,y = 6,z = 11;

 

7）声明变量没有赋值,返回undefined(未定义)

var x;//undefined

 

8）没有声明，没有赋值，直接使用变量，报错

console.log(X);//报错

 

9）重新声明，前面的值不会丢失

var x = 10;//变量的初始化

var x;//重新声明

console.log(x);//10 重新声明变量值不会丢失

 

10）重新赋值，后面的值会覆盖前面的值

var x = 10;//变量的初始化

x = 100;//重新赋值

console.log(x);//100

x = 'hello world';//重新赋值

console.log(x);//hello world

 

11）变量声明提升

js变数声明会在执行之前提升到所有代码最上面，赋值不提升

 

eg：

console.log(x);//undefined

ar x = 10;

 

相当于：

var x;//变量声明提升到所有代码的最上面

console.log(x);

x = 10;//赋值留在原地

 

12）不写var的情况

不写var声明的变量为全局变量，全局变量在任何位置都可以访问

 

13）变量的分类

①分类

全局变量：在函数外边声明的变量

局部变量：在函数内部用var声明的变量

 

②作用域

作用域指变量存在的范围

全局作用域：函数外部

函数作用域：函数内部

 

全局变量，在任何位置都可以使用

局部变量，只能在函数内部使用

 

当全局变量和局部变量同时存在，局部变量优先级大于全局变量

 

13、常量

1）语法

const 常量名 = 值;

2）常量命名规则

常量名习惯都大写，多个单词用下划线连接

eg：MAX_AGE

3）注意

①常量重新赋值报错

②调用不可以写在声明前(常量没有声明提升)

 

练习：

求圆的面积：

π*r*r

圆的周长：

2πr

--变量--

var radius = 4;

var acreage = 3.14 * radius * radius;

console.log(acreage);

var perimeter = 2 * 3.14 * radius;

console.log(perimeter);

--常量--

const PI = 3.1415926;

 

var radius = 4;

var acreage = PI * radius * radius;

console.log(acreage);

 

var perimeter = 2 * PI * radius;

console.log(perimeter);

 

14、注释

1）HTML

<!-- 注释的内容 -->

 

2）css

/* 注释的内容 */

 

3）JavaScript

①单行注释 //注释的内容

②多行注释 /* 注释的内容 */

③文档(方法)注释 /** 注释的内容 /

 

注释之间不能相互嵌套