JavaScript入门笔记

最新推荐文章于 2023-04-02 15:47:06 发布

玛莱之盾

最新推荐文章于 2023-04-02 15:47:06 发布

阅读量263

点赞数

分类专栏：前端文章标签： javascript 前端 js

本文链接：https://blog.csdn.net/naexting/article/details/119896763

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript

1.什么是JavaScript

JavaScript是一门脚本语言
js很重要，比css，html难，但是要学好，不让vue框架也不懂
js教程视频：https://www.bilibili.com/video/BV1JJ41177di

2.快速入门

2.1、js引入

1.内部引入

<script>
alert('Hello,World!');
</script>

2.外部引入

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
<!--    <script>标签里写js代码-->
<!--    <script>-->
<!--        alert('Hello,World!');-->
<!--    </script>-->
<!--外部引入 script必须成对
不用显示定义 type
-->
    <script src="js/hello.js"></script>
</head>
<body>


<!--这里也可以写-->
</body>
</html>

2.2、基本语法入门

<script>
        // 1.定义变量 变量类型 变量名=变量值
        var score=1;
        //2.条件控制
        if(score>60&&score<70)
        {
            alert("60-70");
        }
        else if(score>70&&score<80)
        {
            alert("70-80")

        }else
        {
            alert("other")
        }
        //console.log(score)在浏览器控制台打印变量
        /*
        * 多行注释
        * */

    </script>

浏览器调试：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lC7WjH6J-1629803171107)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210727181553889.png)]$

2.3、数据类型

数值，文本，图像，音频，视频。。。

变量：定义用var，变量名不以数字开头

number

123//整数
123.1//小数
1.23e3//科学计数
NaN//非数
Infinity//无穷大

js不区分小数整数

字符串：‘abc’,“ABC”

布尔类型：ture，false

逻辑运算:与或非

比较运算符:=赋值，==等于（类型不一样也可以），===绝对等于（类型一样，值一样）

须知：NaN与所有数值不相同，包括自己

用isNaN()判断

浮点数精度问题：尽量不使用浮点数运算

null和undefined：空和未定义

数组：[] 一些相同的类型的元素，但是js不需要, 越界会显示undefined

对象：{}，类似结构体，每个属性使用，隔开，最后一个不需要。访问元素用.

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PbLQcNbl-1629803171109)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210727183230976.png)]$

2.4、严格检查模式

<!--    'use strict';
必需写在第一行
        严格检查模式
-->
    <script>
        'use strict';
        //局部变量 用let定义
        let i=1;
    </script>

3.数据类型

3.1、字符串

1.正常字符串使用单引号，双引号，转义字符\

2.转义字符\

\'
\n
\t
\u### unicode字符
\x## ASCll码

3.多行字符串用

4.模板字符串

        let name="sjk";
        let age=3;
        let msg= `你好,${name}`

5.字符串长度

str.length

6.字符串可变性：不可变

7.大小写转换

str.toUpperCase();

str.toLowerCase();

8.str.indexOf(‘t’);返回下标

9.str.substring(1,3);左闭右开

3.2、数组

Array可以包含任意数据类型

1.数组长度

arr.length，可变

可以给arr.length赋值，通过下标取值赋值

2.arr.indexof(),下标索引

3.slice（）截取Array的一部分，返回一个数组，类似于substring（）

4.push(),压入尾部 pop()弹出尾部

5.unshift(),压入头部shif(),弹出头部

6.sort()排序

7.元素反转，reverse()

8.concat()返回拼接的新数组

9.join()使用特定连接符打印拼接数组

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mCoVwTpi-1629803171111)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210727190525555.png)]$

10.多维数组

数组：重点存取

3.3、对象

js中所有键都是字符串，值任意

1.定义：

        var person={
            name:sjk,
            age:21,
            score:100
        }

2.对象赋值：

person.name=“sasas”

3.使用不存在的对象 undefined

4.动态删除属性

delete person.name

5.动态添加,直接给新的属性赋值

person.haah=“as”

5.判断属性是否在对象中 xxx in xxxx

age in person

true

6.判断一个属性是否是这个对象自身拥有的

hasOwnProperty()

3.4、控制流程

选择：

if 判断

if()
{
   
}
else{
    
}

循环：

while

while(){
      
      }


//一定执行一次
do{
    
}while()

for

for(int i=0;i<100;i++){
    
}

数组循环

for(var in age){
    var 是数组下标索引 0-age.length
}
for(var of age){
    var 数组值
}

3.5、Map和Set

Map，键值对对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var map= new Map([["sjk",100],["wqw",11],["ewew",23]]);
        var socre=map.get("sjk");
        map.set("sss",111);
        map.delete("ewew");
        console.lot(socre);
    </script>
</head>
<body>

</body>
</html>

Set:无序不重复的集合

var set = new Set([1,2,3,4])
set.add(5);
set.delete(1);
set.has(2);//是否包含

3.5、iterator迭代器遍历Map Set

遍历:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NshIpfTg-1629803171115)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210727203045744.png)]$

4.函数及其面向对象

4.1、函数定义

函数定义：

定义方式一

function abs(x){
    if(x>=0)
        return x;
    else
        return -x;
}

执行ruturn 返回结果，函数结束。

如果没有指向return，函数执行完也会返回结果。

定义方式二

var abs=function(x){
    if(x>=0)
        return x;
    else
        return -x;
}

function(x){…}匿名类

调用函数

abs(10)
abs(-1)

参数问题：js可以传任意数量的参数，也可以不传

手动抛出异常：throw

argument关键字，代表传进来的所以参数，是一个数组。

rest

ES6引入的新特性：获取除可用参数之外的参数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KSik3w1w-1629803171118)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728113438682.png)]$

rest参数只能写在最后，必须用…标识。

4.2、变量作用域

在js中var定义发的变量是有作业域的

在函数体重声明的遍历，不可在函数外使用

如果两个函数使用相同的变量名，只要再函数内部也不会报错。

内部函数可以访问外部函数的成员

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xfi4huXO-1629803378552)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728114154625.png)]$

内部函数变量和外部函数变量重名，由内到外查找，内部有定义好的，就会屏蔽外部的，就近原则。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ea7Nt46m-1629803171120)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728114733359.png)]$

所以变量都的定义在最前面。类似于c

全局变量:

定义函数外部的变量。

全局对象 window

js实际上只有一个全局作用域，任何变量（函数也算），假设没有函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错。

规范

由于所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，如何减少冲突？

在每个文件里定义一个全局变量，其他变量和方法绑定在这个变量上。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2auB7FaA-1629803171121)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728120004680.png)]$

局部作用域let

解决局部作用域的冲突问题

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AvS1Rge0-1629803171122)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728120314321.png)]$

常量const

const PI=3.14;

4.3、方法

写在对象里的函数

指代本类用this

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GoI9JhGS-1629803171123)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728121109141.png)]$

apply在js中可以控制this指向

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aRZk3ZLH-1629803171124)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728121635991.png)]$

4.3、闭包（难点）

4.4、箭头函数（新特性）

4.5、创建对象

4.6、class继承

4.7、原型链继承

5.常用对象

标准对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Nxkf63y-1629803171124)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728121937042.png)]$

5.1、Date

<script>
        let data=new  Date();
        data.getFullYear();//年
        data.getMonth();//月
        data.getDate();//日
        data.getDay();//星期
        data.getHours();//时
        data.getMinutes();
        data.getSeconds();
        data.getTime();//时间戳
    	data.toLocaleString();//本地时间
    	console.log(new Date(data.getTime()))//时间戳转为时间
    </script>

5.2、json

json是什么

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

采用完全独立于编程语言的文本格式来存储和表示数据。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

在js中一切皆为对象，任何js支持的类型都可以转换成json表示

对象用{}

数组用[]

键值对 key:value

        var json =JSON.stringify();//对象转成json
        //json转js,参数为json字符串
        var oj=JSON.parse(json);

json和js对象的区别

var obj={a:"11",b:"232"};
var json='{"a":"11","b":"232"}';

5.3、Ajax

原生js写法，xhr异步请求

6.面向对象

什么是面向对象

类：模板

对象：具体的实例

js中有所不同

原型：

    <script>
        var student={
            name:"sss",
            age:3,
            run:function (){
                console.log(this.name+"runninng")
            }
        }
        var xiaoming={
            name: "xioaming"
        };
        var Bird={
            fly:function (){
                console.log("flying");
            }
        }
        //小明原型是student
        xiaoming.__proto__=student;
    </script>

class继承

<script>
        //定义学生类
        class student{
            constructor(name) {
                this.name=name;
            }
            hello(){
                alert("hello");
            }
        }
 		class xstudent extends student{
            constructor(name,grade) {
                super(name);
                this.grade=grade;
            }
        }
        var xiaoming =new student("xiaoming");
        var xiaohong =new student("xiaohong");
    </script>

本质：原型链

——proto——

7.操作BOM(重点)

BOM：浏览器对象模型

内核：

IE6-11

Chrome

Safari

FireFox

第三方：

QQ浏览器

360浏览器

window 代表浏览器窗口

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jmb2RPu3-1629803171125)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728141132608.png)]$

Navigator

封装了浏览器信息，可以查看

但大多数时候不使用，因为会被人为修改

screen

代表屏幕

location

重要对象，代表当前url信息

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RSqRxWyV-1629803171126)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728141941559.png)]$

document

代表当前的页面信息，HTML。dom文档树

<body>
<dl id="app">
    <dt>java</dt>
    <dt>javase</dt>
    <dt>javaweb</dt>
</dl>
<script>
    var id=document.getElementById('app')
</script>

获取具体的文档树结点

获取cookie

history

history.back()//后退

history.forward()前进

8.操作Dom对象(重点)

DOM：文档对象模型

核心：浏览器网页就是一个Dom树形结构

更新：更新Dom结点

遍历dom结点：得到Dom结点

删除：删除Dom结点

添加：添加一个新结点

8.1、获取Dom结点

js原生代码

<body>
<div class="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应css选择器
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementsByClassName('father');
    var child=father.children;//获取父节点下的所有子节点
    
</script>

8.2、更新Dom结点

<body>
<div id="id1">

</div>
<script>
    var id1=document.getElementById('id1');
</script>

操作文本

id1.innerText=‘xxxx’,修改文本值

操作css

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WUCyW92U-1629803171127)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728151952616.png)]$

8.3、删除Dom结点

步骤：先获取父节点，然后删除自己

<div class="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
<div>
 <script>
    var self=document.getElementById('p1');
     var father=p1.parentElement;
     father.removechild(p1);
    </script>

father.children,可以获得全体子结点，但在删除的时候，索引会动态调整

8.4、插入Dom结点

为我们获得某个节点，如果这个dom结点是空的，我们通过innerHTML就可以拯救一个个元素，但如果这个dom结点非空就不可以，因为会覆盖原来内容。

追加操作：

<body>
<p id="js">javscript</p>
<div id="list">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>
<script>
    var js=document.getElementById('js');
    var list =document.getElementById('list');
    list.append(js);
</script>
</body>

var newp=document.createElement('p');//创建一个新的p标签
newp.id='newp';
newp.innerText="HELL";
list.append(newp)

//创建一个标签结点
var myscript=document.createElement('script');
myscript.setAttribute('type','text/javascript');
list.append(myscript);
//创建style标签
var mystyle=document.createElement('style');
mystyle.setAttribute('type','text/css');
mystyle.innerHTML='body{background-color: red;}';
document.getElementsByTagName('head')[0].append(mystyle);

在中间插入结点

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gzuifnMf-1629803171127)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210728164716371.png)]$

9.操作表单（验证）

文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 passworld
。。。。。

表单目的：提交信息

<body>
<form action="post">
    <p>
        <span>用户名:</span><input type="text" id="usename">
    </p>
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>

</form>
<script>
    var inpust_text=document.getElementById('usename');
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');
    //得到输入框的值
    //对于单选框，多选框，boy_radio.value只能渠道当前值。
    boy_radio.checked;//查看返回结果是否为true

MD5加密在线链接

<body>
<!--表单提交事件，使用οnsubmit=
绑定一个检测函数
-->
<form action="#" method="post" onsubmit="f()">
    <p>
        <span>用户名:</span><input type="text" id="usename" required>
    </p>
    <p>
        <span>密码:</span><input type="text" id="password" required>
    </p>
<!--    绑定事件-->
    <button type="button">登录</button>

</form>
<script>
    function f(){
        var name=document.getElementById("usename");
        var pwd=document.getElementById("password");
        //MD5
    }
</script>

10.jQuery

jQuery库里有大量的js函数

获取jQuery

在线链接CDN

下载链接jquery下载所有版本（实时更新）_脚本之家 (jb51.net)

文档工具站

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

引入jQuery

<!--    cdn引入-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
    <script src="lib/jquery-3.6.0.js"></script>

使用：

<body>
<!--
公式：$(selector).action()
选择器就是css的选择器
-->
<a href="" id="test-jquery">点我</a>
<script>
    $('#test-jquery').click(function (){
        alert("hello");
    })
</script>
</body>

选择器：

<script>
    //标签，选择p标签
    $('p').click()
    //id
    $('#id1').click()
    //类
    $('.class1').click()

</script>

事件：

鼠标：

键盘：

操作Dom：

<body>
<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">Python</li>
</ul>
<script>
    $('#test-ul li[name=python]').text('qwqwq');//设置值
    $('#test-ul li[name=python]').html();//获取html
    $('#test-ul li[name=python]').html(<strong>122</strong>);//设置html
</script>
</body>

css操作

$('#test-ul').css({"color":"red"});

元素的显示和消失

$().show()

$().hide()

Ajax

小技巧

1.巩固js

2.巩固html，css

11.工具网站

LayerUILayui - 经典开源模块化前端 UI 框架

ElementUIElement - 网站快速成型工具

Ant DesignAnt Design - 一套企业级 UI 设计语言和 React 组件库

玛莱之盾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门笔记

JavaScript1.什么是JavaScriptJavaScript是一门脚本语言js很重要，比css，html难，但是要学好，不让vue框架也不懂js教程视频：https://www.bilibili.com/video/BV1JJ41177di2.快速入门2.1、js引入1.内部引入<script>alert('Hello,World!');</script>2.外部引入<script src="js/hello.js"></scri
复制链接

扫一扫