javascript基础

最新推荐文章于 2024-09-12 11:40:49 发布

m0_68751758

最新推荐文章于 2024-09-12 11:40:49 发布

阅读量192

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_68751758/article/details/126456970

版权

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

解释型：在运行前不会检查语法错误，运行时如果遇到错误就会停止运行后续的代码

.弱类型：变量保存的数据是可以随意分配的，数据类型是由数据来决定的

面向对象：

对象名.属性名；

对象名.方法名();

使用js方法的两种方法：

1.直接在HTML上写一个script标签

2.外部引用，开发时常用

创建一个js文件，在html中的script标签上写属性src填写属性值为js文件的路径

输出的方式/打桩输出：3种

1.在控制台输出日志：console.log（）-显示在控制台F12查看

2.在页面上输出日志：document.write()-会直接显示在当前html页面上，支持识别标签，如果绑定点击事件后，点击后同时会替换掉html和css

3.在弹出框输出日志：alert（）-会显示在浏览器的自带弹出框，弹出框会卡住页面，没点击完时用户看不到html页面和css

变量和常量：

*变量：创建后，值可以再次修改

何时使用：以后反复使用到的数据，都要提前把他保存在一个变量中，以后使用变量名，相当于就是在使用变量的值

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

特殊： 1、变量名其实不是随意的

不能以关键字命名

不能以数字开头

建议下划线命名法或小驼峰命名法 name,age,gender,weight,height,hobby - 推荐 xingming,nianling,xingbie,tizhong,shengao,aihao - 不推荐更不推荐：a,b,c,d,d1,d2,d3... - 此变量名无意义

2、如果你的变量名是name，不管你保存的数据是什么数据类型，都会悄悄的给你转变成一个字符串

3、多个变量创建可以简写： var 变量名1=值1,变量名2=值2,....;

算术运算符：+ - * / %

特殊：其实算数运算符具有隐式类型转换，默认转为数字在运算
           +运算：如果左右两边但凡出现了一个字符串，那么悄悄的都转为字符串，+运算不再是+运算，而是字符串的拼接
           -*/%：字符串也可以变为数字，但是前提：必须是纯数字组成的字符串才可以
                           如果字符串包含了非数字字符，直接转为NaN:Not A Number - 不是一个数字，但是确实是数字类型，全是缺点：
                                       1、参与任何算术运算，结果仍为NaN
                                       2、参与任何比较运算，结果都是false

        2、*****特殊：其实算数运算符具有隐式类型转换，默认转为数字在运算
            +运算：如果左右两边但凡出现了一个字符串，那么悄悄的都转为字符串，+运算不再是+运算，而是字符串的拼接
            -*/%：字符串也可以变为数字，但是前提：必须是纯数字组成的字符串才可以
                             如果字符串包含了非数字字符，直接转为NaN:Not A Number - 不是一个数字，但是确实是数字类型，全是缺点：
                                        1、参与任何算术运算，结果仍为NaN
                                        2、参与任何比较运算，结果都是false

数据类型：

分两大类

1、原始/基本/值类型：5个

Number - 数字，取值：无数个

String - 字符串，取值：无数个，必须写上'' 或 ""

Boolean - 布尔，取值：两个：true/false - 往往用于判断比较的条件处使用

Undefined - 取值：1个：undefined，创建了一个变量，但是没有赋值，默认值为undefined；

Null - 空，取值：1个：null，释放变量/内存，节约内存空间

2、引用/对象类型：11个引用类型的对象（很多很多的属性和方法）

数据类型转化：不同的数据类型做操作可能出来的结果是不一样的

JS获取页面上的一切东西，数据类型默认都是一个字符串

1、转字符串：var str=x.toString();

2、***转数字：
1、*parseInt(str/num);
执行原理：专门为字符串和小数转为整数数字准备的，从左向右依次读取每个字符，碰到非数字字符，就停止转换

2、*parseFloat(str);
执行原理：几乎和parseInt一致，认识第一个小数点

3、Number(x);//此方法是万能的，任何人都可以转为数字

Function的基础：

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

如何使用：2步
   1、定义/声明/创建函数：
       function 函数名(){
           若干的代码
       }

   2、调用/使用函数：
       1、要么在js中程序员直接写死，要执行几次：函数名();
       2、交给用户绑定在某个元素上，写上点击事件，让用户来触发：
           <elem οnclick="js代码">内容</elem>
何时使用：
   1、*不希望打开页面立刻执行，而需要时再使用或由用户来触发
   2、*希望能够反复执行，不用刷新页面
   3、以后任何一个独立的功能体，都要单独封装为一个函数（你的每一个作业）
   4、函数的地位非常高，函数是第一等公民地位，随时随地考虑能不能封装为一个函数，尤其是重复的代码
   5、函数内的一切内存，函数调用完毕后都会自动释放

带参数的函数：

function 函数名(形参,形参,...){
函数体;
}

使用：实参：实际参数，真正的值，需要再你调用时再传入
       函数名(实参,实参,...)

   特殊：1、传实参的顺序一定要和形参的顺序一一对应，并且数量也要对应
   2、不是一定要带参数的函数才是好函数，具体情况，需要具体分析：
           如果你的函数体就是固定的 - 则普通函数
           如果你的函数体希望根据传入的实参不同，做的略微不同 - 则带有参数的函数

分支结构：

1、程序的流程控制语句：3种

1、顺序执行 - 默认，从上向下的依次执行

2、分支结构 - 通过条件的判断，选择部分代码执行

3、循环结构 - 通过条件的判断，选择要不要重复执行某些代码

循环结构：反复执行相同或相似的操作

   循环三要素：
       1、循环条件：开始 - 结束，循环的次数
       2、循环体：做的操作是什么
       3、循环变量：记录着我们当前在哪一次，而且他会不断的变化，往往都会向着不满足循环条件进行

while循环：
   语法：
   var 循环变量=几;
   while(循环条件){
       循环体;
       循环变量变化;
   }

特殊：
1、有的时候真可能不知道从何开始，到何处结束，死循环：永远不会停下来的循环
   何时使用：不确定循环次数的时候
       while(true){
           循环体;
       }

2、退出循环语句：break - 只能在循环中使用，多半都是搭配死循环使用的

for循环：
   语法：for(var 循环变量=几;循环条件;变量的变化){
           循环体;
   }

   死循环： for(;;){
           循环体;
       }

while 和 for 的区别？

语法上有区别，但两者都能做到相同的操作

一般来说我们不确定循环次数的时候，会使用while循环 - 死循环
一般来说我们确定循环次数的时候，就用for循环 - 更漂亮更简洁，大部分情况都会使用它

数组的基础：

数组：创建一个变量可以保存【多个数据】的集合
数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素
除了最后一个元素，每个元素都有唯一的后继元素
每个元素都有一个自己的位置，称之为叫做下标，下标是从0开始的，到最大长度-1

创建数组方式：2种
   1、直接量方式：
       var arr=[];//空数组
       var arr=[数据1,....];

   2、构造函数方式：
       var arr=new Array();//空数组
       var arr=new Array(数据1,....);

获取数组中的数据
数组名[下标];

添加/替换
数组名[下标]=新值;
下标处有没有元素，如果没有则为添加，如果有了就为替换

数组具有三大不限制
   1、不限制元素的个数
   2、不限制元素的类型
   3、不限制元素的下标越界
       如果获取元素，下标越界，返回的一个undefined
       如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多很多的undefined

遍历数组：把数组中的每个元素拿出来执行相同相似的操作
   公式：
       for(var i=0;i<数组名.length;i++){
           console.log(数组名[i]);
       }

JavaScript的三部分：

   ECMAScript - 核心语法，以后JS不管做什么操作可能都离不开它
   DOM   - Document Object Model - 文档对象模型，可以用JS来操作HTML和CSS了
   BOM    - Browser Object Model - 浏览器对象模型，可以用来操作浏览器

DOM树概念：

DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象 document对象：不需要我程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document 作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法） DOM会将页面上每个元素、属性、文本、注释都会当作一个DOM元素/节点/对象

查找元素：

1.通过ID查找元素（不常用很麻烦）

语法：var elem=document.getElementById("id值");

2.通过标签名查找元素（找到的元素是DOM集合需要遍历取出元素或者写下标）
语法：var elems=document/已经找到了的父元素.getElementsByTagName("标签名");

3.通过class名查找元素（找到的元素是DOM集合需要遍历取出元素或者写下标）
语法：var elems=document/已经找到了的父元素.getElementsByClassName("标签名");

4、通过关系查找元素：前提条件：必须先找到一个元素才可以调用关系网
   父元素：elem.parentNode;
   子元素：elem.children; - 集合
   第一个儿子：elem.firstElementChild;
   最后一个儿子：elem.lastElementChild;
   前一个兄弟：elem.previousElementSibling;
   后一个兄弟：elem.nextElementSibling;

操作元素：前提：找到元素才能操作元素

内容：

1.innerHTML：获取和设置开始标签到结束标签之间的内容 - 支持识别标签

获取：elem.innerHTML;

设置：elem.innerHTML="新内容";

2、innerText：获取和设置开始标签到结束标签之间的文本 - 不支持识别标签
获取：elem.innerText;
设置：elem.innerText="新文本";

以上两个属性都是为双标签准备的，但是操作不了单标签input的内容

  3、value：专门为input的value值准备的
       获取：input.value;
       设置：input.value="新值";

属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");

   简化版：
   获取属性值：elem.属性名;
   设置属性值：elem.属性名="新属性值";
       缺陷：
       1、class必须写为className - 2015年过后，ES6诞生过后，class变成了一个关键字
       2、不能操作自定义属性，只能操作标准属性

样式
   使用样式的方式：
       1、内联/行内样式
       2、内部样式表
       3、外部样式表

   js操作内联样式
       1、不会牵一发动全身
       2、优先级最高

   获取：elem.style.css属性名;
   设置：elem.style.css属性名="css属性值";
   特殊：
       css属性名，有横线的地方，去掉横线，变为小驼峰命名法
           border-radius ->   borderRadius