javascript基础

一位迷途知返的软工同学

已于 2022-07-03 22:08:45 修改

阅读量122

点赞数

文章标签： javascript 前端开发语言

于 2022-06-18 15:23:37 首次发布

本文链接：https://blog.csdn.net/qq_48773620/article/details/125344786

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

什么是javascript

javascript，简称js。是一个运行在客户端浏览器的解释型、弱类型、面向对象的脚本语言

编译型 在程序运行之前，需要先检查代码语法是否正确，如果语法错误，直接不会运行（比较严格的）--------java、c++。
解释型 在程序运行之前，不需要检查代码语法，直接运行，直到碰到错误就会停止后续代码（更加的自由）--------javascript、php。
强类型：变量保存的数据有数据的类型决定。
弱类型：变量保存的数据是数据决定的。

JavaScript的特点：
1.可以使用一切编码工具编写js代码
2.解释型
3.弱类型
4.面向对象
5.可以做一切css做不了的事
如何使用js：（两种方式）
1.直接在HTML上创建一个script标签，将js代码写在标签之内（在初学的时候可以用这种方式）
<script> js代码 </script>
2.创建一个.js文件，将js代码写在这里面，然后再HTML中引入（在正式开发中）
引入方法：<script src="此处写你引入js代码的路径"> 不能再写js代码 </script>

输出方式：（3种）
1.在控制台输出日志 console.log(输出的东西) //console（控制台） log（日志）【在学习的时候常常要用到这个，来检查我们写的代码是否正确，是否达到想要的效果】
2. 在页面输出日志 document.write( ) //document（文档） write（写入）
3. 在弹出框输出日志 alert（）//会在页面弹出一个框

一、变量和常量

什么叫变量：创建后，值可以进行修改

什么时候使用：以后反复使用到的数据，都要将其存入一个变量当中，以后使用变量名字，相当于在使用变量的值

如何使用： var 变量名=变量的值

变量名的规则：
1.不能以数字开头
2.建议下划线命名法，驼峰命名法
3.命名的时候尽量见名知意
注意：当你变量名为name时，不管你输入的什么数据类型，都会变为字符串
4.变量名字不能是关键字

常量
常量创建后，值不能修改

语法：count 常量名 = 值；

二、数据类型

1.原始/基本/值类型（5个）

1.Number //数字
2.string //字符串
3.undefined //取值：undefined
4.null //空
5.Boolean //布尔型   取值：true/false

2.引用/对象类型

11个对象（属性和方法）

三、数据类型的转换

不同的数据类型做操作可能出来的结果不一样
js获取页面上的一切东西，数据类型默认都是一个字符串
查看数据类型代码
typeof( )

算术运算的隐式转换

默认：悄悄的将左右两边的东西，转为一个数字，再运算

特殊：

       1.+运算碰上字符串，结果会进行拼接操作
       
       2.别的数据类型也会转为数字
       
       3.其实 - * / %，也能将字符串转为一个数字，前提是要是一个纯数字组成的字符串才能行，但凡包含了其他字符就会百年未NaN
       
       4.NaN：Not A Number ： 不是一个数字，但确实又是数字类型，只能说是不是一个有效的数字（）

由此引出了一个问题：我们没有办法使用普通的比较运算来判断x是不是NaN

解决办法：
利用 isNaN 结果为true时，就说明不是一个有效数字。
但在开发时，还是用 !isNaN ，结果为true时，就说明是一个有效数字

强制/显示转换

隐士转换出来的结果不是我们想要的，就需要手动调用一些方法，强制转为我们想要的数据类型

1.转字符串：var str = xx.tostring() // xx不能时undefined和null

2.转数字（3种）
① parseInt（）；
原理：专门为字符串转为数字准备的，从左向右依次读取每个字符，如果碰到非数字字符就会停止转换，如果一来就碰到了不认识的字符，结果就为NaN（小数点是不认识的）

console.log(parseInt(100.5));//100
console.log(parseInt("100.5"));//100
console.log(parseInt("100px"));//100
console.log(parseInt("px100"));//NaN
console.log(parseInt("1px00"));//1
console.log(parseInt(true));//NaN
console.log(parseInt(false));//NaN
console.log(parseInt(undefined));//NaN
console.log(parseInt(null));//NaN

②paseFloat（）；
原理：几乎和parseInt一致的，只是认识小数点

console.log(parseFloat(100.5));//100.5
console.log(parseFloat("100.5"));//100.5
console.log(parseFloat("100.5px"));//100.5
console.log(parseFloat("px100.5"));//NaN
console.log(parseFloat("10px0.56"));//10
console.log(parseFloat("100.5.5.5"));//100.5
console.log(parseFloat(".555"));//0.555

③Number（）；此方法是万能的，任何人都可以转为数字
这种方式完全等效于隐式转换，还不如直接利用隐式转换

四、Function基础

Function：函数，也称之为方法。需要预定义好的，以后就可以反复使用的代码段

如何使用（2步）
1.创建/定义/封装函数：
function 函数名（）{若干个函数体/代码段/操作}

2.调用/使用函数
函数名（）；

注意：1.程序员调用几次，就执行几次
2.交给用户来触发，只需要为某个元素绑定点击事件
<buttom onclick=" "> </buttom>

3.何时使用：
①不希望打开页面就立即执行，而是需要再用，或者用户触发的时候才执行
②希望能够反复执行，不用刷新页面
③以后任何一个独立的功能提，都要单独封装为一个函数
④函数在js中的地位最高：随时随地、都要想到封装函数

4.带参数的函数
创建
形参：形式参数，其实就是一个变量，但是不需要写var，而且默认也没有保存任何值
function 函数名（形参1,形参2，...，形参n）{}
调用
实参：实际参数，真正的值，需要你在调用函数时传入进去实参

注意：1.传参的顺序一定要一一对应，并且数量也要对应
2.不是一定需要带参数的函数才是好函数，具体要不要带参数，需要看我们的需求

自定义Function

什么是函数：需要先定义好，可以反复使用的一个代码段
如何使用：
1.不希望页面打开就立刻执行
2.以后可以反复使用
3.希望绑定在页面元素上

使用

①创建并调用
1.创建（2种方式）

1.【声明方式】创建函数
function 函数名(形参1,形参2,...){
      函数体
      return 返回值/结果；
}


2.【直接量方式】
var 函数名=function(形参1，形参2，...){
      函数体；
      return 返回值/结果;
}

通过第二种创建方式：学到了一个点：函数名其实就是一个变量名

②调用var result=函数名(实参,...)
其实return的本意是退出函数，但是如果return后面跟着一个数据，顺便将数据返回到函数作用域的外部，但是return只负责返回，不负责保存，所以调用函数时，如果里面有return操作，记得拿一个变量接住结果
就算你省略return，默认也会返回return undefined；具体要提要不要结果，看自己

作用域（2种）

1.全局作用域：
全局变量和全局函数，在页面的任何一位置都可以访问到
2.函数作用域：局部变量和局部函数，在【当前函数调用时内部可用】

变量的使用规则：优先使用局部的，局部没有找到找全局，全局没有就报错
特殊：
1.千万不要在函数种对着未声明的变量直接赋值，就会导致全局污染（全局没有的东西，突然被局部添加上）
2.局部可以使用全局的，但是全局不能使用局部的

声明提前

在程序正式执行之前，悄悄的将var声明的变量（轻）和function声明的函数（重）集中提前到【当前】作用域顶部，但是赋值留在原地

声明方式创建的函数会完整提前
直接量方式创建的函数不会完整提前，只有变量部分提前

按值传递

如果传递的时【原始类型】的值：
修改一个变量，另一个变量不会受到影响的，其实就是复制了一个【副本】给对方
如果传递的时【引用类型】的对象：
修改一个变量，另一个变量是会受到影响的，因为大家其实操作都是同一个地址值

循环

循环三要素：
①循环条件：开始 ------- 结束，循环次数
②循环体：做的操作是什么
③循环变量：记录着我们当前在那一次，而且它不断的变化

while循环

语法：

var 循环变量=值；
while（循环条件）{
  循环体；
  循环变量发生变化；
}

执行原理：首先创建了循环变量，判断循环条件，如果条件满足，则做一次循环体操作，并不会退出循环，然后再次用变化的循环变量和循环条件做比较，则再做一次循环体的操作，如此循环，直到条件不满足为false的时候，就会退出循环

注意：宏观上感觉循环转瞬即逝，但是微观上是一次一次执行的

特殊：1.有的时候真的有可能使用死循环（不确定循环次数的时候）
2.退出循环语句：break；-------只能用于循环之中，多半都是搭配死循环使用

for循环

原理和while原理一样的，但是看起来比while循更简介，更舒服
语法：

for(循环变量=几;循环条件;循环变量的拜年话){
              循环体
}

那么while和for的区别是什么呢？
实际上，while和for几乎没有区别：
一般来说我们不确定循环次数的时候，会使用while循环（死循环）
一般来说我们确定循环次数的时候，会使用for循环------------更整洁，大部分情况下

操作元素

前提：找到元素才可以操作

操作元素内容

1.innerHTML----------获取和设置开始标签到结束标签之间的内容（支持识别标签的）
获取：elem.innerHTML;
设置：elem.innerHTML=“新内容”;
innerText---------获取和设置开始标签到结束标签之间的文本（不支持识别标签的）
获取：elem.innerText;
设置：elem.innerText=“新文本”;
以上两个API都是为了双标签准备的
3.value---------专门为获取input的value值准备的
获取：input.innervalue;
设置：input.innervalue=“新文本”;