[ js笔记 ] 第一周学习总结

最新推荐文章于 2024-07-25 22:24:14 发布

叫我小新！

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量1.5k

点赞数 1

分类专栏： js笔记文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/weixin_62912990/article/details/123448304

版权

js笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

day01

vscode 常用快捷键

Ctrl + / ：注释

Alt + B ：快速开启浏览器（我下载了扩展插件 Alt + Q 也可以快速开启浏览器）

Shift + Alt + ⬇ ：复制

Alt + ⬇ ：移动

Shift + Alt + F ：格式化代码规范（我自己更改快捷键为 Shift + Alt + Z ）

Ctrl + B ：折叠侧边栏

Ctrl+N : 新建

Ctrl + C ：复制 ( 光标在这一行即可)

Ctrl + X ：删除当前行

Ctrl + Z ：撤销这一次操作

Ctrl + Shift + Z ：反撤销

浏览器 F12 打开控制台，F5 刷新页面

js的基本组成

ECMAScript ：JavaScript的核心，是一套标准的js基本语法

DOM：文档对象模型，一套操作网页元素的 API (方法)

BOM：浏览器对象模型，一套操作浏览器功能的 API (方法)

js与h5：js可以实现h5标签深层的扩展功能

注意： js语句结束要加分号，虽然不加分号在js语法上没有什么问题，但是最好不要省略分号，加了分号之后可以使用软件压缩。

js的引入方式及存放位置

外联：使用script标签，原则上可以放在html页面的任意位置。外联方式常在写项目时使用

<script src="js文件路径" type="text/javascript"></script>

内联：直接写在html文件内

<script type="text/javascript"> //在script标签内写js脚本</script>

行内：写在标签内

<p onclick="alert('我是一个弹窗')"> 我是一个段落哦</p>

注意：type设置的是mime类型，告诉浏览器以何种方式，解析当前文件。（可以不写）

引入：建议放在body结尾处，这样在执行到js代码时，html页面都已经载入完成，就可以避免找不到元素而报错.。如果放在head中，当js文件过大时，加载时间过长会影响后续html代码的执行。同时js执行时可能需要优先获取html中的节点，以免影响js的正确执行。

js的输出

document.write()：输出内容在浏览器页面当中

//基础形式输出文本
document.write('我在浏览器页面里哦');

//利用html标签达到特殊文本效果
document.write('<b>这样我就是加粗的文本了</b>');

//利用标签达到换行的效果
document.write('<br />');

console.log()：输出内容在控制台当中

console.log('我会出现在浏览器控制台里哦');

alert()：弹窗效果，拥有确定按钮

alert('我是个弹窗哦');

confirm()：弹窗效果，拥有确定及取消按钮

confirm('我也是个弹窗哦');

js注释

单行注释：//

多行/块注释：/*代码内容*/

变量

变量需要声明之后，才能使用，js代码一旦报错了，后面的代码就不再执行了。

var：声明变量（仅声明变量不赋值会输出undefined；不声明变量仅赋值不会报错但不推荐；既不声明变量也不赋值会报错）

//仅声明变量不赋值
 var num;

//先声明变量不赋值
var num;
num = 123;

//同时声明变量及赋值
var num = 123;

//同时声明赋值多个变量
var num = 123,str = 'abc';

变量命名规则：

由字母、数字、下划线、$符号组成；不能以数字开头；区分大小写；不能是关键字和保留字

关键字：js使用了有特殊意义作用的单词；保留字：js没使用但保留以后要用的单词

变量命名规范：

变量名必须有意义；遵守驼峰命名法：首字母小写，后面单词的首字母需要大写

数据类型

变量中的数据时需要存储在计算机中的；计算机底层只能识别0和1，所以需要对不同类型的数据进行转换；转换的结果会导致所需空间不同，所以JS中分成多种数据类型，以方便计算机的存储。

基本数据类型：只能存放一个值

Number：表示数字，可以是整数或者小数，简写 num

String：表示字符串，用单引号或双引号括起来的内容，简写 str

Boolean：布尔型，表示真和假，只有 true、false 两个值，简写 bool

复合数据类型：可以存放多个值

Array：表示数组，简写 arr

Object：表示对象，简写 obj

复合数据类型：

null：表示空值，使用 typeof 属于对象。当一个变量不再使用时，可以设置为null，这样浏览器的垃圾回收机制，会将其回收。

undefined：表示没定义变量的值或为生命的变量使用 typeof 也返回 undefined，衍生于 null

Symbol：表示符号，sym = Symbol();

数据类型的获取

typeof()：检测当前变量的数据类型的方法，只用于基本数据类型

不同进制声明

八进制：第一个数字必须是0

十六进制：第一个数字必须是0x

二进制：第一个数字必须是0b

运算符

算术运算符

+ ：加；字符串的连接

- ：减

* ：乘

/ ：除

% ：取余

赋值运算符（写法：y 赋值运算符 num）

= ：给变量赋值

+= ：y = y+ num

-= ：y = y- num

*= ：y = y* num

/= ：y = y/ num

%= ：y = y% num

关系运算符：结果是bool值

> ：大于

>= ：大于等于

< ：小于

<= ：小于等于

!= ：不等于

== ：值相等

=== ：值和类型都相等

逻辑运算符

&& ：与，两侧都成立；用于输出时，左侧正确返回右侧

|| ：或，一侧成立；用于输出时，左侧正确返回左侧，左侧不正确直接返回右侧

！：非，取反

一元运算符

++ ：自增1

-- ：自减1

前置：先运算后使用；后置：先使用后运算

day02

数据类型转化

转化为数字

Number()：只能转化字符串类型数字

parseInt()：从左向右，遇到非数字停止，返回前面的。第一个就是非数字，直接NaN。常用于取整，当遇见小数点 . 是会返回前面的数据，达到取整的效果。

parseFloat()：和parseInt()一样，但其遇到小数点 . 继续转化

隐式转化：str-0；+str

转化为字符串

num.toString()

String(num)

num+' ' ：利用了运算符 + 的特性，+ 左右存在字符串是另一个也会当作字符串使用

转化为bool

!! 强制转化

Boolean()

转化为bool的false：0 ；null ；undefined ；'' ；NaN

NaN：非数字（Not a Number）

任何两个NaN是不相等的

产生原因：数据类型转化失败；运算错误

prompt()方法

// 弹出输入框，数值1：问题；数值二：默认值
var str = prompt("请输入你的问题","1");

逻辑分支

单分支

if(条件){ 表达式 }：条件为true则执行

双分支

if(条件){表达式1}else{表达式2}：条件为true则执行表达式1,否则是表达式2

条件 ? 表达式1 : 表达式2（三元运算符）：条件 ? 表达式1 : 表达式2

多分支

if(){}else if(){} else if(){}else{}

注意：当剩余所有情况，都要走最后一个分支，就用else；如果还需要满足某个条件，就用else if

day03

switch选择结构

case 匹配时，是指值与类型均相等，相当于 ===

switch中没加break会把所有的case判断一遍，所以要使用break终止匹配继续，防止代码穿透

switch( 判断条件 ){
		   case 值1: 
		         // 处理语句
		         break;
		   case 值2: 
		         // 处理语句
		         break;
		   default: 
		         // 处理语句
		}

switch 和 if 的区别：if常用语判断一定范围内的数据；switch常用来判断固定的数据

循环结构

while循环语句：while循环只要条件为真，就会一直不断重复执行循环体内的代码

while(循环条件){
    //循环语句
}

do...while循环语句：do...while会先无条件执行一次再判断

do{
    //循环语句
}while(循环条件);

for循环语句：for循环执行顺序：初始化语句--判断语句--循环语句--自增或者自减--判断语句--循环语句--自增或者自减--(直到循环条件变成false

for(初始化变量;判断语句;变量更新){
    //循环语句
}

双重for循环语句：for循环嵌套时，注意各个循环的计数器变量名不能重复，否则会变成死循环

break和continue

break：结束循环

continue：跳出当前循环,进行下一次

Debug使用

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。浏览器中按F12--sources--找到需要调试的文件--在程序的某一行设置断点

day04

函数

函数就是代码块，可以多次调用，很容易实现模块化编程。函数可以减少代码开发时间，实现模块化编程，达到重复使用的效果。

函数的声明及调用

直接声明

function 函数名(参数1,参数2,参数3,...){
    //执行语句;
}
//函数调用
函数名();

赋值式（匿名函数）

var 函数名 = function(参数1,参数2,参数3,...){
    //执行语句;
}
//调用函数
函数名();

函数命名规则及规范：与变量名一致

由字母、数字、下划线、$符号组成；不能以数字开头；区分大小写；不能是关键字和保留字

关键字：js使用了有特殊意义作用的单词；保留字：js没使用但保留以后要用的单词

函数名必须有意义；遵守驼峰命名法：首字母小写，后面单词的首字母需要大写

函数的参数：形参和实参都可以有多个，用逗号隔开

形参：声明函数的是形参，形参默认值，一般设置在最后

实参：调用函数的是实参

形参和实参是位置一一对应的关系，形参的个数必须和实参的个数一样多

function 函数名(形参){
    //执行语句;
}
函数名(实参);

arguments：在有实参无形参时使用

function 函数名(){
    //执行语句
    console.log(arguments);
    //相当于
    console.log(arguments[0],arguments[1],...,arguments[n]);
}
函数名(实参1,实参2,...,实参n);

匿名函数和直接声明区别

直接声明的函数可以先调用在声明

匿名函数不能先调用在声明，因为js预编译的问题，就是会先声明其为变量，这时执行代码调用该名字并不是个函数，程序会报错

函数的自执行：第一个()避免报错，第二个()用于调用函数

(function(){
    //执行语句
})()

返回值return：用于结束代码执行 / 返回函数处理结果

return是无条件退出当前方法/函数，并且返回数据（如果没有数据返回undefined）

在哪里调用,就返回到哪里

返回值可以是任意类型，包括函数

函数名和变量名冲突

变量会覆盖含函数：由于js预编译的问题，js在执行代码之前会先声明函数，在声明变量，这时后声明的变量就会覆盖函数致使该名字是个变量不是个函数，在执行代码时只会输出变量的赋值，调用函数会报错。

函数可以作为参数（回调函数）

通常将作为参数传递的函数叫做回调函数

function fn(){
            console.log('哈哈哈哈');
            console.log('耶耶耶耶');
            fn1();
        }
        function fn1(){
            console.log('我怀念的是无话不说');
            console.log('我怀念的是一起做梦');
        }
        fn();

系统函数

数学函数

Math.random()：产生0-1随机数，不包括0，1

Math.ceil()：向上取整

Math.floor()：向下取整

num.toFixed(n)：保留n位小数

其它

isNaN()：当值为非数字时输出true；值为数字时输出false

parseInt()：将字符串转化为整数

parseFloat()：将字符串转化为浮点数

day05

作用域：变量起作用的区域

全局作用域--全局变量

在script标签内，函数外的区域就是全局作用域，在全局作用内声明的变量叫做全局变量。全局变量可以在任意地方访问。

局部作用域--局部变量

在函数内的区域叫做函数作用域，在函数作用域内声明的变量叫做局部变量，局部变量只有在当前函数内才能访问到。

隐式全局变量

没有使用var定义的变量也是全局变量，叫做隐式全局变量。(不要使用)

作用域链--代码执行过程中，查找变量的顺序

先在函数内部查找--没有到上级作用域--找到全局没有,则报错

就近原则,先找函数内部,没有再找上一级

var color = 'blue';
        function changeColor() {
            var anotherColor = 'red';
            function swapColors() {
                var tmpColor = anotherColor;
                anotherColor = color;
                color = tmpColor;
                // console.log(tmpColor, anotherColor, color);//red bule red
            }
            swapColors();
            // console.log(tmpColor);//局部变量 无法调用
            // console.log(anotherColor);//bule
            // console.log(color);//red
        }
        changeColor();
        // console.log(tmpColor);//局部变量 无法调用
        // console.log(anotherColor);//局部变量 无法调用
        console.log(color);//red

预编译

代码运行,分为两步

预编译：声明函数，声明变量且不赋值

从那个上到下执行语句

作用

物理顺序上函数可以先调用,再声明

变量可以先调用,但输出undefined

变量提升

预编译时,将变量提升到作用域顶端

递归函数

递归函数就是在函数体内调用本函数。递归函数一定要有终止条件，否则便是死循环。

// 使用递归求1+2+3+4+5的和
    function fn(num) {
      //  console.log(num);
      if (num == 1) {
        return 1;
      }
      // fn(num-1) 是表达式,没有运算完成,不会赋值
      var res = num + fn(num - 1);
      // return之后执行的
      // console.log(res);//属于函数一部分 在res还存在函数fn时,log硬输出了结果导致NaN
      return res;//将res返回调用函数处,并停止这个函数
    }
    // fn(5);
      console.log(fn(5));
    // var sum = fn(5);
    // console.log(sum);

arguments.callee

指向正在执行的函数指针

//arguments.callee指向正在执行的函数
        function fn(num) {
            if (num == 1) {
                return 1;
            }
            var sum = num + arguments.callee(num - 1);
            return sum;
        }
        console.log(fn(5));

事件

鼠标事件

onclick：点击

ondblclick：双击

onmouseover：移入

onmousemove：移动

onmouseout：移出

onmousedown：按下

onmouseup：抬起

表单事件

onfocus：获取焦点

onblur：失去焦点

onreset：重置

onsubmit：提交

onchange：改变时触发

<body>
    <div onclick="onclickFn()">你过来呀</div>
    <div ondblclick="ondbclickFn()">我就不</div>
    <img src="./love.jpg" alt="" width="200" height="300" onmouseover="onmouseoverFn()" onmousemove="onmousemoveFn()"
        onmouseout="onmouseoutFn()">
    <br>
    <form action="" onreset="onresetFn()" onsubmit="onsubmitFn()">
        <input type="button" value="点我" onmousedown="onmousedownFn()" onmouseup="onmouseupFn()">
        <br>
        <input type="text" placeholder="我是第一个text" onfocus="onfocusFn()">
        <br>
        <input type="text" placeholder="我是第二个text" onblur="onblurFn()" onchange="onchangeFn()">
        <br>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        <br>
        <select name="aa" id="yy" onchange="onchangeFn()">
            <option value="nn">鑫鑫</option>
            <option value="nn">雅雅</option>
            <option value="nn" selected>琳琳</option>
            <option value="nn">玥玥</option>
            <option value="nn">明明</option>
            <option value="nn">郭郭</option>
            <option value="nn">汤汤</option>
        </select>
    </form>


    <script>
        function onclickFn() {
            console.log('你单击了哦');
        }
        function ondbclickFn() {
            console.log('你双击了哦');
        }
        function onmouseoverFn() {
            console.log('你鼠标移入了哦');
        }
        function onmousemoveFn() {
            console.log('你鼠标移动了哦');
        }
        function onmouseoutFn() {
            console.log('你鼠标移出了哦');
        }
        function onmousedownFn() {
            console.log('你鼠标按下了哦');
        }
        function onmouseupFn() {
            console.log('你鼠标抬起了哦');
        }
        function onfocusFn() {
            console.log('你获取了焦点哦');
        }
        function onblurFn() {
            console.log('你失去了焦点哦');
        }
        function onresetFn(){
            console.log('你重置了哦');
        }
        function onsubmitFn(){
            console.log('你提交了哦');
        }
        function onchangeFn(){
            console.log('你改变了哦');
        }
    </script>
</body>

绑定方式

行内绑定

<input type="text" name=""  value="" onfocus="fn2()" id="">

js动态绑定

// 1 获取节点
var a= document.getElementById('a');
// 2 给div节点绑定移入事件
a.onmouseover = function(){}

对象

对象的属性值--可以是任何数据

当对象的属性值是非函数时，称这个属性叫属性；当对象的属性是函数时，称这个属性叫方法

window：可见最大对象--浏览器窗口

构造函数：返回数据的类型均为对象

new String()

new Number()

对象的声明及调用

var obj = {
            name: 'object',
            str: true,
            num: 123,
            show: function () {
                console.log('我是个函数');
            }
        };
        obj.show();
        console.log(obj.str);
        var name = '呀呀呀';
        function show() {
            console.log(name);//呀呀呀
            console.log(obj.name);//object
        }
        show();