JS学习第一周总结_学js一星期总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_44791254/article/details/88752165

前段三层

HTML 结构层
CSS 样式层
JavaScript 行为层

1.JS能做什么？

嵌入动态文本于HTML页面。
对浏览器事件作出反应。
读写HTML元素
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
基于Node.js技术进行服务器端编程。

2.JS简介

JavaScript是一种直译式脚本语言，是一种动态型、弱类型、基于原型的语言。
基本特点：

是一种解释性脚本语言（代码不进行预编译，解释一条，执行一条）。
前期只要用来向HTML页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的JS文件有利于结构和行为的分离。
跨平台性，在绝大多数浏览器的支持下，可以在多种平台运行。

3.JS组成部分

ECMAScript，描述该语言的语法和基本内容,是JS执行的标准。
DOM（文档模型），描述处理网页内容的方法和接口。
BOM（浏览器模型），描述与浏览器进行交互的方法和接口。

4.JS书写方式

行内式
外链式外部引入之后，script标签中不能再写代码了，写的是不会执行的
内联式相同的引号不能嵌套使用，可以单双引号嵌套使用

5.三个简单输出语句

alert("这里面的内容会在弹框中显示！");  
document.write("这里面的内容会在页面文档中显示");  
console.logo("这里面的内容会在控制台打印输出")；

alert（“你好”）完整写法是 window.alert(); window对象可以省略

使用不多，比较麻烦，要去点击
各个浏览器弹窗效果不一样
后期需要弹窗效果的话，一般都是div+css来完成

console.log(“你好”);

打印输出一些内容，用来查错误
console.warn(“警告”);
console.error(“错误”);

ocument.write(“今天天气不好”);
ocument.write("<h2>我是二级标题</h2>");

6.变量

在JavaScript中，变量一般都是直接量，也叫字面量。
变量声明
基本语法：var 变量=赋值;
变量、函数名命名规则：

不能以数字开头
不建议使用汉字
建议使用英文（要有语义，使用驼峰命名法）
可以使用$或者_开头
区分大小写（例如：A和a是两个变量）
关键字或保留字（未来的关键字）不能使用

7.变量及变量的作用域

全局变量在函数外部声明的变量在函数内部能够调用
局部变量在函数内部声明的变量在函数外部不能调用
函数中变量会优先使用局部变量，找不到才会调用全局变量

8.变量声明的提升

JS执行前会预解析，会把var后面紧跟的变量声明全部提升到最前面，然后再开始一条一条执行。示例如下：

console.log(b);// undefined
var b=20;
相当于
var b;
console.log(b);
b=20;

9.五种数据类型

名称	类型	注意事项
number	数值型	在JavaScript中，不分浮点型和整型，全部都叫数值型。控制台显示蓝色
string	字符串型	采用单引号或双引号包裹，其中内容可以使任何形式，包括数字、html标签、符号等所有能见到的内容。
boolean	布尔值	它的值只有false和true
null	空
undefined	未定义	只声明变量，而不赋值，打印输出结果为undefined；不声明，直接打印输出，会报错 is not defined

10.五种假：

0
false
“”
null
undefined
NaN也是假

11.isNaN

isNaN(参数); 里面的参数是数值类型返回false，不是返回true
判断机制和parseInt（）一样，能识别出字符串中打头的数字。

12.算术运算符

+ 执行加法运算

在两个数值类型中间时，和数学中的加号作用相同
在数值型和字符串型之间，或者连个字符串之间时，起到拼接字符串的作用

- 执行减法运算

在两个数值型中间时，作用和数学中减号相同
在两个字符串型的数字中间时，会将字符串型数字自动转换成数值型，然后进行减法运算，返回结果是数值型。而在加法运算中，这种境况下进行的是字符串拼接。

* 就是乘法运算

/ 就是除法运算

% 就是取余运算

字符串型做乘、除、取余运算时，会报错。

13.关系运算符

符号	意思
>	大于号
<	小于号
>=	大于或等于
<=	小于或等于
==	等等于
===	全等于
！=	不等于
！==	不全等于

特别注意“=” 代表的是赋值
**注意：**在两个等于号判断的时候，两个字符串型的数字比较，加空格返回true；但是两个纯字符串比较，加空格返回的是false。

14.逻辑运算符

&& 与和、且
|| 或或者
！非否定、取反

15.一元运算符

typeof
i++
++i
i–
–i
总结：
++或–前置，先赋值后计算
++或–后置，先计算后赋值

16.字符串型数字转成数值型

parseInt(); 该方法有直接取整的效果，采用的是去尾法，不会四舍五入。
- parseInt(“23abc”); 这种情况会返回23，但是只能识别打头的数字，后面加在字符串中的数字是不能识别的。
  如果里面是纯字符串，返回number型的NaN。
parseFloat(); 该方法和parseInt()方法功能类似，但是能保留小数，少位小数，就输出多少位小数。

17.基本数据类型之间的转换

number变成字符串类型

12+"";
a=String(12);

字符串转换成number类型

“22”-0
Number(“22”)

number转成boolean类型

Boolean(0);// 返回false
Boolean("");// 返回false
Boolean(null);// 返回false
Boolean(undefined);// 返回false
Boolean(NaN);// 返回false
！！也可以转成Boolean值

18.if语句

if基本语句
多分支if语句

if(条件1){
    条件1满足执行
}else if(条件2){
    条件1不满足,条件2满足执行
}else{
    以上条件都不满足执行
}

if语句嵌套使用

标签可以嵌套使用

if(条件1){
	if(条件2){
		同时满足条件1和条件2,才会执行
	}
}

注意if语句的跳楼现象

19.for循环

基本语法 for（var i=0;i<10;i++）{代码块}

最经典的就是：从1到100求和。

var sum=0;
for(var i=1;i<=100;i++){
sum+=i;
}

20.函数

函数需要2步基本操作：

1.声明函数
function hanshu(){
	console.log(123);
}
2.调用函数(可以多次调用)
hanshu();

函数调用可以再函数声明前也可以在声明后
每一个函数都有变量名，命名规则和变量名一样：

我们函数名后面的括号中传递的是参数，这个是形参（形式上的参数）。
调用函数的函数名后面的括号中也可以传递参数，这个是实参（具有实际意义的参数）。
函数可以传递多个参数，中间用逗号分隔。
undefined+任何数都会输出数值类型的NaN。
return关键字，用来返回函数值。
return后面的内容不能换行。
return后面的代码是不会执行的，return后面就不要写东西了。

可以重复调用的代码块。
可以单独写在JS文件中，需要时最是调用。

21.函数的创建方式

函数声明式

function fun(){
    console.log("helloWorld");
}
fun();

fun函数名，代表整个函数
fun（）代表函数的调用

函数表达式

var func=function(){
    console.log("helloWorld");
}
console.log(func);
func();

构造函数（这种方式很少使用）

var funct=new Function("var num1=10;var num2=20;console.log(num1+num2)");
funct();

首字母大写开始的叫构造函数

22.JS两种声明函数的方法以及调用顺序

两种声明方法：

第一种： var a = function () {…};
第二种function a() {…};

第一种方式必须先声明后调用，而第二种方式函数调用在声明之前之后都可以。
页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描，如果遇到定义式函数，则进行预处理(类似于C等的编译)，处理完成之后再开始由上至下执行；遇到赋值式函数，则只是将函数赋给一个变量，不进行预处理(类似1中变量必须先定义后引用的原则)，待调用到的时候才进行处理。

23.入口函数

window.funciotn(){
代码块;
}
页面加载完成后，再执行代码块。
JS文件引入是存在顺序关系的，如果存在依赖关系的JS文件，他们的引入顺序是不能变的。

24.内置对象

JS本身自带的对象
- 日期对象
- Math对象
- window对象

25.获取一个元素

getElementById();方法，通过Id名获取某个元素（绝对是唯一的）。

26.事件及事件三要素

事件三要素：

事件源关闭的按钮
事件鼠标点击事件
事件处理程序广告关闭了
常用的事件：
onclick
onmouseover
onmouseout
onload

27.一些注意事项

is not defined 未声明函数时报错内容
undefined 声明函数未赋值，显示的内容
null 是一个值，未赋值不会显示null

28.几个有用的方法

typeof 判断变量数据类型
Number.MAX_VALUE Number的最大值
Number.MIN_VALUE Number的最小值

29.Math对象

乘方 Math.pow(4,5); 计算4的5次方
开根号 Math.sqrt(4); 计算4的平方根

30.用户输入框

prompt(“提示内容”); 用户输入框
可以用变量接收输入的内容，再对变量进行操作，但是接收到的都是string类型的数据。
一定要牢记，使用prompt()接收到的数据是字符串型的，要做算术运算，要先使用parseInt()转换成数值型，才能进行操作。

31.两种消失的的区别

display：none； 消失后不占用原来位置
visibility：hidden； 消失后依旧占用原来位置

32.容器在页面居中显示

实现容器在页面中间显示，垂直水平都居中：

position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;