JS基础知识

最新推荐文章于 2024-10-11 17:39:47 发布

浪漫攻城狮莉小妖

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量133

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43527345/article/details/105344512

版权

学习的是b站上的黑马视频

javascript初识

发明者：布兰登·艾奇

运行在客户端的脚本语言

不需要编译，由js解释器解释执行

基于node.js进行服务器端编程


<script>
            //!+tab可以创建模板
            alert('hello')
        </script>

作用

表单动态校验

网页特效

服务端开端

桌面程序

、、、

关系

html网页结构和内容

CSS呈现给用户的模样

js实现业务逻辑和页面控制

浏览器

渲染引擎：解析html和css，内核。谷歌浏览的blink,老版的webkit

js引擎：js解释器，读取网页中的js代码，处理后运行，谷歌的v8

浏览器通过内置的js引擎执行js代码，逐行解释，由计算机执行

js组成

js语法（ECMAScript），页面文档对象（DOM），浏览器对象模型（BOM）

DOM：对页面上各种元素操作

BOM:操作浏览器窗口，控制浏览器跳转，获取分辨率等

js写

行内式js：按钮交互式，body标签中写

内嵌式js：

外部js:src引用，双标签

<title>Document</title>
    <!-- 内嵌式的js -->
    <script>
        alert('eee');
    </script>
    <!-- 外部的js进行引用 -->
    <!-- <script src="my.js"></script> -->
</head>
<body>
    <!-- 行内式的js直接写到元素的内部 -->
    <!-- <input type="button" value="唐" onclick="alert('爱')"> -->
</body>

js注释

单(//)、多行注释：ctrl+/

输入输出语句

alert()弹出警示框

console.log()浏览器控制台打印输出信息，程序员测试

prompt()浏览器弹出输入框，用户输入

    <script>
        prompt('输入、、、');
        alert('jjjj');
        console.log('hello');
    </script>
</head>

变量

内存中用来存放数据的空间

声明后赋值

更新变量

声明多个变量，中间用逗号隔开

不要使用关键字,不要命名为name

<script>
        // 1.更新变量
        var age;
        age = 11;
        console.log(age);
        age = 18;
        console.log(age);
        // 2.声明多个变量
        var a = 1;
        var b = 2;
        var c = 3,
        d = 4;
        // 3.声明变量特殊情况
        var e;//声明不赋值
        console.log(e)//undefined
        //console.log(f)//报错,未声明未赋值
        g = 0;
        console.log(g);//可以使用
    </script>

变量两种声明方式

声明函数

变量=function(){};

<script>
        // 1.利用函数关键字自定义函数(命名函数)
        function fn(){
            alert('lalala');
        }
        fn();
        //2.函数表达式(匿名函数)
        var fun=function(aru) {
            console.log(aru);
        }
        fun('yiyiyi');
    </script>

作用域

全局作用域：script标签中，js文件

局部作用域：函数内部

块级作用域：{}。es6后新增,需要使用let定义

if(1){
            //let关键字使变量有块级作用域,即if语句外不能使用
            let num = 1;
            var n = 2;
            //普通变量没有块级作用域,即在if语句外可以使用
        }
        console.log(num);

作用域链：内部函数访问外部函数，采取链式方式决定

局部变量和全局变量

<script>
        // 1.结果为2
        function f1(){
            var num = 1;
            function f2(){
                var num = 2;
                console.log(num);
            }
            f2();
        }
        var num = 3;
        f1();
    </script>

函数预解析

运行js：预解析，执行

先把变量及函数提升到当前作用域最前面（提升声明），再逐行解析

var a=b=c=9;相当于var a=9;b=9;c=9;//b和c没有被声明

fun(); // 报错  坑2 
        var fun = function() {
                console.log(22);

            }
            // 函数表达式 调用必须写在函数表达式的下面
            // 相当于执行了以下代码
            // var fun;
            // fun();
            // fun = function() {
            //         console.log(22);
    
        //     }
    
        // 1. 我们js引擎运行js 分为两步：  预解析  代码执行
        // (1). 预解析 js引擎会把js 里面所有的 var  还有 function 提升到当前作用域的最前面
        // (2). 代码执行  按照代码书写的顺序从上往下执行
        // 2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
        // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作
        // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面  不调用函数

对象

一个具体的事物

js中：一组无序的相关属性和方法的集合

对象由属性和方法组成

属性：事物的特征

方法：事物的行为

创建

字面量：{}

对象中的方法：方法名：function(){}

调用方法：对象名.方法名（）

使用对象：对象名.属性名，对象名[‘属性名’]

变量和属性：都是存储变量。变量：单独存在，需要声明。属性：在对象中，访问方式。

函数和方法：都是实现某种功能。函数：单独声明调用的函数单独存在。方法：对象中，访问方式

<script>
        // 利用对象字面创建对象{}
        var obj={};//创建了一个空对象
        obj = {
            uname: '2222',//属性使用键值对方法创建
            age: 11,//多个属性减用逗号隔开
            sayhi: function(){//方法后面跟一个匿名函数
                console.log('hi---');
            }
        }
        //使用对象 对象名.属性名
        console.log(obj.age);
        console.log(obj['uname']);
        //对象的方法 对象名.方法名
        obj.sayhi();
    </script>

new object

var obj=new Object()

<script>
        // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('hi~');

            }
            // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
            // (2) 每个属性和方法之间用 分号结束
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

构造函数

抽象对象中相同的属性和方法

function 构造函数名（）{

this.属性=值；

this.方法=function(){}

}

变量=new 构造函数名（）；

构造函数首字母大写

构造函数不需要return 。检测类型：console.log(typeof 变量)

调用构造函数必须使用new

属性和方法前必须加this

对象的实例化：构造函数创建对象

new关键字

内存中创建对象

this指向对象

执行构造函数的代码，给对象添加属性和方法

返回对象

new和构造函数确认眼神，生宝宝，宝宝亲生，读书，回报父母

<script>
        //利用构造函数创建对象
        // function 构造函数名(){
        //     this.属性 = 值；
        //     this.方法 = function(){

        //     }
        // }
        function Star(uname,age,sex){
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
        }
        var ldh = new Star('ldh',11,'男');
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('lalala');
    </script>

遍历对象属性

for (变量 in 对象){

}

//遍历对象
        for(var k in ldh){
            console.log(k);//输出属性名
            console.log(ldh[k]);//得到的使属性值
        }

内置对象

自定义对象，内置对象，浏览器对象

自带对象

查阅文档

MDN/W3S

查阅该方法的功能

参数的意义和类型

返回值的意义和类型

demo进行测试

网址：https://developer.mozilla.org/zh-CN/docs/Learn

Math对象

arguments[0]

数组对象

字面量方式 var a=[1,2,3]

new Array() :var arr=new Array(1,2,3),只有一个数表示数组长度

检测是否为数组

数组名 instanceof Array

array.isArray(数组名)

push(),数组末尾添加一个或多个元素，返回数组长度

unshift(),数组开头添加一个或多个元素

pop()删除数组最后一个元素，返回值为删除的元素，没有参数

shift(),删除第一个元素，返回值为删除的元素，没有参数

数组排序：反转数组reverse(),数组排序sort()

数组索引方法：indexOf(),返回元素未知，只返回第一个满足条件的元素，找不到元素，返回-1，从前往后

lastindexOf()

数组转换为字符：toString()

join()分隔符

js会把基本包装类型包装成复杂数据类型

字符串的不可变：再次赋值时在内存中再开辟一个空间，指针指向新地址，原地址字符串不变。

简单数据类型（值类型）与复杂类型（引用类型）

简单

null返回一个空对象object，用typeof判断

如果一个变量打算存储为对象，定义为null

string number bool undefied null

放在栈里面

存放在变量里面，值

不会相互影响，栈中不同的空间

复杂

通过new关键字创建的对象

object array date

放在堆里面

在栈中存放地址，地址指向堆中的数据

复制地址，指向同一个对象

浪漫攻城狮莉小妖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫