Web前端——JavaScript基础

已于 2022-02-16 20:46:22 修改
阅读量305 收藏 4
点赞数 1
分类专栏： Web前端 文章标签： javascript
于 2020-12-19 21:44:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44853882/article/details/111409707
版权

文章目录

一. JavaScript基础

1. JS简介

2. JS编写的位置

(1). 在HTML标签的事件属性中直接添加脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位置</title>
</head>
<body>
    <form>
        <input type="button" onclick="javascript:alert('欢迎来到JavaScript世界')" value="点我">
    </form>
</body>
</html>

结果：
在这里插入图片描述

(2). 使用script标签插入脚本

语法：

<head>
	<script>
    	//在这里放置具体的JavaScript脚本  
	</script>
</head>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js位置</title>
    <script>
        function show(){
            alert('欢迎来到JavaScript世界');
        }
    </script>
</head>
<body>
    <form>
        <input type="button" onclick="show()" value="点我"/>
    </form>
</body>
</html>

(3). 使用script标签链接脚本文件

新建一个脚本文件以.js为扩展名的文件里，然后在需要使用的时候在html页面里面引用该文件

基本语法：

<head>
	<script src="脚本文件"></script>
</head>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS引用文件</title>
    <script src="link.js"></script>
</head>
<body>
    <form>
        <input type="button" onclick="show()" value="点击我">
    </form>
</body>
</html>


link.js文件
function show(){
    alert("欢迎来到JavaScript世界！")
}

3. JS基本语法

(1). 标识符和关键字

(2). 直接量(字面量)和变量

(3). 数据类型

在这里插入图片描述

1. 数字类型(Number)
2. 字符串类型
3. 布尔类型
4. null和undefined类型
5. 数据类型转换
6. 对象类型（Object）

基本数据类型缺点：

基本数据类型都是单一的值："hello" 123 true
值和值之间没有任何的联系

在JS中来表示一个人的信息（name gender age）：
var name = “孙悟空”；
var gender=“男”；
var age=18；
如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

(1). 对象的分类

在这里插入图片描述
在这里插入图片描述
JavaScript的内容鸟瞰概述https://zh.javascript.info/browser-environment

1. 内置对象（内建对象）

由ES标准中定义的对象，在任何的ES的实现中都可以使用

ES是国际标准化组织发布的浏览器脚本语言的标准，全名：ECMAScript。

详细的ES和JavaScript的关系https://www.jianshu.com/p/4e178e9ef796

  • Math对象
  • String对象
  • Number对象
  • Boolean对象
  • Function对象
  • Object对象
  • Array对象
  • Date对象
2. 宿主对象

由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
在这里插入图片描述
在这里插入图片描述

  • BOM对象
  • DOM对象
3. 自定义对象

由开发人员自己创建的对象

(2). 对象的基本操作
1. 创建对象

var obj = new Object();

使用new关键字调用的函数，是构造函数constructor
构造函数是专门用来创建对象的函数

console.log(typeof obj);

使用typeof检查一个对象时，会返回object

在对象中保存的值称为属性
向对象添加属性
语法：对象.属性名 = 属性值

对象的属性名不强制要求遵守标识符的规范，但是尽量按规范去


//向obj中添加一个name属性
obj.name = "孙悟空"

//向obj中添加一个gender属性
obj.gender = "男"

//向obj中添加一个age属性
obj.age = 18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj = new Object();
        obj.name = "老林"
        obj.gender = "男"
        obj.age = 88
        console.log(obj)
    </script>
</head>
<body>
    
</body>
</html>

此时对象里面有三个属性值
在这里插入图片描述

以上方式可能比较麻烦，我们也可以使用对象字面量创建一个对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象字面量</title>
    <script>
        //创建一个对象
        //var obj = new Object();

        /*
        使用对象字面量来创建一个对象
        */

        var obj = {};
        console.log(typeof obj);

        obj.name = "老林"
        console.log(obj.name);

        /*
        使用对象字面量，可以在创建对象时，直接指定对象中的属性
        语法：{属性名:属性值, 属性名:属性值....}
        对象字面量的属性名可以加引号也可以不加，建议不加
        如果使用一些特殊的名字，则必须加引号

        属性名和属性值是一组一组的名值对结构
            名和值之间使用:连接，多个名值对之间使用,隔开
            如果一个属性之后没有其他的属性了，就不要写,
        */

        var obj2 = {
            name:"阿飞",
            "age":88, 
            gender:"男",
            test:{name:"老林"}
        };
        console.log(obj2)



    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2. 读取对象中的属性

语法：对象.属性

如果读取对象中没有的属性，不会报错而是会返回undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj = new Object();
        obj.name = "老林"
        obj.gender = "男"
        obj.age = 88
        //console.log(obj)
        console.log(obj.name)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
如果需要使用特殊的属性名，不能采用.的方式来读取操作
需要使用另一种方式

语法：对象["属性名"] = 属性值，读取时也需要采取这种方式

使用[ ]这种方式去操作属性，更加灵活，在[ ]中可以直接传递一个变量，这样变量值是多少就会读取那个属性

obj["123"] = 789;
obj["nihao"] = "你好"

var n = "nihao"; 	n的值可以变换
console.log(obj[n]);
3. 修改对象的属性值

语法：对象.属性名 = 新值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj = new Object();
        obj.name = "老林"
        obj.gender = "男"
        obj.age = 88
        //console.log(obj)
        console.log(obj.name)
        obj.name = "阿飞"
        console.log(obj.name)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
属性值

JS对象的属性值，可以是任意的数据类型,甚至是一个对象

obj.test = true;
obj.test = null;
obj.test = undefined;

判断一个对象里面是否有某个属性：使用in运算符

如果有返回true ，否则返回false

语法：“属性名” in 对象

console.log("test" in obj);
console.log("name" in obj);
4. 删除对象的属性

语法：delete 对象.属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj = new Object();
        obj.name = "老林"
        obj.gender = "男"
        obj.age = 88
        //console.log(obj)
        console.log(obj.name)
        obj.name = "阿飞"
        console.log(obj.name)
        delete obj.name
        console.log(obj.name)

    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

7. 基本数据类型和引用数据类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本数据类型和引用数据类型</title>
    <script>

        /*
        基本数据类型
        String Number Boolean Null Undefined

        引用数据类型
        Object

        JS中的变量都是保存在栈内存中的，
            基本数据类型的值直接在栈内存中存储
            值与值之间是独立存在，修改一个变量不会影响其他的变量
            
            对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
            而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象的引用
            当通过一个变量修改属性时，另一个也会受到影响
        */
        var a = 123;
        var b = a;
        a++;

        console.log("a = "+a);
        console.log("b = "+b);

        var obj = new Object();
        obj.name = "孙悟空"
        
        var obj2 = obj;

        console.log(obj.name)
        console.log(obj2.name)

        //修改obj的name属性
        obj.name = "老林"
        console.log(obj.name)
        console.log(obj2.name)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本数据类型和引用数据类型</title>
    <script>

        /*
        基本数据类型
        String Number Boolean Null Undefined

        引用数据类型
        Object

        JS中的变量都是保存在栈内存中的，
            基本数据类型的值直接在栈内存中存储
            值与值之间是独立存在，修改一个变量不会影响其他的变量
            
            对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
            而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象的引用
            当通过一个变量修改属性时，另一个也会受到影响
        */
        var a = 123;
        var b = a;
        a++;

        console.log("a = "+a);
        console.log("b = "+b);

        var obj = new Object();
        obj.name = "孙悟空"
        
        var obj2 = obj;

        console.log(obj.name)
        console.log(obj2.name)

        //修改obj的name属性
        obj.name = "老林"
        // console.log(obj.name)
        // console.log(obj2.name)

        //设置obj2 = null
        obj2 = null;
        console.log(obj);
        console.log(obj2);

    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本数据类型和引用数据类型</title>
    <script>

        /*
        基本数据类型
        String Number Boolean Null Undefined

        引用数据类型
        Object

        JS中的变量都是保存在栈内存中的，
            基本数据类型的值直接在栈内存中存储
            值与值之间是独立存在，修改一个变量不会影响其他的变量
            
            对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
            而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象的引用
            当通过一个变量修改属性时，另一个也会受到影响
        */
        var a = 123;
        var b = a;
        a++;

        console.log("a = "+a);
        console.log("b = "+b);

        var obj = new Object();
        obj.name = "孙悟空"
        
        var obj2 = obj;

        console.log(obj.name)
        console.log(obj2.name)

        //修改obj的name属性
        obj.name = "老林"
        // console.log(obj.name)
        // console.log(obj2.name)

        var c = 10;
        var d = 10;
        console.log(c == d);

        var obj3 = new Object();
        var obj4 = new Object();
        obj3.name = "阿飞"
        obj4.name = "阿飞"

        /*
        当比较两个基本数据类型的值时，就是比较值
        而比较两个引用数据类型时，它是比较的对象的内存地址，
        如果两个对象是一模一样的，但是地址不同，它也会返回false
        */
        
        console.log(obj3==obj4)

    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

(4). 运算符和表达式

1. 算术表达式
2. 关系表达式
3. 逻辑表达式
4. 赋值表达式
5. 条件表达式
6. 其他运算符
7. 运算符的优先级和结合性

(5). 语句

1. 表达式语句
2. 声明语句
3. 条件语句
4. 循环语句
5. 循环终止语句和退出语句
6. 注释语句

(6). 函数

(7). 事件处理

(8). 正则表达式

巧克力code
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端之JavaScript
qq_774952435的博客
05-08 3477
JS基本用法
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 6098
JavaScript基础语法学习笔记，视频教程链接放在末尾
前端 --- JavaScript 语法基础
最新发布
2401_84447043的博客
04-27 621
5. 运算符5.1 算术运算符加减乘除求模5.2 赋值运算符 & 复合赋值运算符+=-=*=/=%=5.3 自增自减运算符++: 自增1--: 自减15.4 比较运算符小于大于=大于等于==比较相等(会进行隐式类型转换)!不等于===比较相等(不会进行隐式类型转换)!==(不会进行隐式类型转换)5.5 逻辑运算符&& 与: 一假则假|| 或: 一真则真!非5.6 位运算按位与同为1时为1,否则为0按位或同为0时为1,否则为0;~ 按位取反当是1就取0,是0就取1^ 按位异或。
常用的前端JavaScript方法封装
热门推荐
嘿嘿
09-06 16万+
1、输入一个值，返回其数据类型 function type(para) { return Object.prototype.toString.call(para) } 2、数组去重 function unique1(arr) { return [...new Set(arr)] } function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj[ele])..
2021年前端最详细面试题-javaScript篇
风清月朗兰的博客
05-29 959
1、es6的新特性 const let 模板字符串 箭头函数 函数的参数默认值 对象和数组解构 for...of 和 for...in 2、promise的使用，怎么用es5实现promise 3、if有作用域吗 只有函数有作用域，if是没有作用域的。 但是有一种情况会让if看上去有作用域，就是在if {}语句中，使用const、let，他们会有块级作用域。 4、原型链和作用域链的区别 （1）原型链 当访问一个对象的某个属性时，会先在这个对象本身的属性上找，如果没有找到，会去这个属性
web前端——JavaScript
Atlantis_Qi的博客
10-19 252
杂项知识点 注释：//单行注释//；/*多行注释*/。 js声明变量不需要指定变量的数据类型。var i; i=100。 两种声明方式：function mysum(a,b){} 和 mysum=function(a,b){} 函数声明的优先级高，打开网页时，函数先进行声明。 函数不能重载，如果出现同名函数，前者函数会消失（被覆盖）。因此函数命名避免重名。 输出console.log()。 代码运行顺序： 可以用onload改变函数发生时间。 键值：回车键键值13 ESC键值27。....
web前端——JavaScript基础
03-06
思维导图式笔记， 笔记来源https://blog.csdn.net/qq_38490457/article/details/109257751
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
单页Web应用——Javascript从前端到后端_IT168文库.pdf
04-24
单页Web应用——Javascript从前端到后端，你值得拥有，单页Web应用——Javascript从前端到后端
毕业论文——WEB前端页面设计
06-13
毕业论文——WEB前端页面设计 本文是关于WEB前端页面设计的毕业论文，涵盖了前端开发工具、技术、布局分析、设计、实现等方面的内容。 一、前端开发工具及相关技术 在WEB前端页面设计中，选择合适的开发工具和...
前端毕业设计——淘宝网
10-14
基于vue2.0和vuex框架所写，具备基本的淘宝的功能
javaWeb------前端知识（js,jquery）
fu_jian_feng的博客
03-05 509
本栏目主要是本人巩固web知识所用，未必很详实，只贴出主要的知识，若能帮助到别人也是极好的。----------------------------------------------jscript--------------------------------------------------一.什么是JavaScript?      Java 与javascript的区别？   没有关系，雷...
JavaScript基本语法
weixin_43167531的博客
01-03 403
一个完整的JavaScript实现应该由以下三个部分构成： ECMAScript,DOM和BOM 1 特点： JS的特点 解释型语言 类似于 C 和 Java 的语法结构 动态语言 基于原型的面向对象 2 编写位置 我们目前学习的JS全都是客户端的JS，也就是说全都是需要在浏览器中运行的，所以我们我们的JS代码全都需要在网页中编写。 我们的JS代码需要编写到我们一般将script标签写到head中...
前端之js学习
dgvesrhetd的博客
07-26 4687
js学习 一、简介 1、简介 Java Script 简称JS，是一种基于对象Object和事件驱动Event Driver的解释型脚本语言，用于增强HTML页面的动态交互性。 2、特点 嵌套在HTML中； 环境支持，js在运行中需要浏览器环境的支持，如果使用的浏览器不支持js脚本，那么浏览器在运行时将忽略js代码； 解释执行，无需经过专门编译器的编译，在嵌入脚本的HTML文档载入时被浏览器逐行地解释执行； 弱类型语言，js中不需要指定变量的类型； 基于对象，js提供了很多内建对象，也允许定义新的对象，还
JS基础知识梳理汇总 如何能学好Web前端开发
web前端开发学习教程
09-25 255
学习要一步一个脚印，不能一口吃一个胖子，所有的实战经验都是基于理论而积累形成，今天的Web前端入门学习教程就给大家梳理汇总一下JS相关的基础知识点。 1、执行环境：有时也叫环境，是JavaScript中最为重要的一个概念，执行环境定义了变量或函数有权访问的其他数据。 2、变量对象：每一个执行环境都有一个与之关联的变量对象，环境中定义的所有的变量和函数都保存在这个的对象中。 3、作用域链：代码在环境...
js基本语法介绍
崔博伦 一路有你
06-25 1451
1、js的六种数据类型 （1）Boolean（布尔），取值：True，False （2）Number（数字），取值：所有数字，包含整数小数等，范围相当于double （3）String（字符串），取值：所有字符串 （4）Undefined（未定义），取值：只有一个值undefined （5）Null（空对象），取值：只有一个值Null （6）Object（对象类型），取值：任何对象、a
Web 前端：JavaScript语言（一）
啊Q老师
04-05 3715
JavaScript的概述、特点、组成及JS应用方式
前端之JavaScript第一步
weixin_46372074的博客
03-15 1870
前端之JavaScript第一步JavaScript是什么promptJavaScript可以做什么API浏览器 API第三方 API ----------------------------------------------------------------------------------------------------牢记初心，砥砺前行 JavaScript是什么 HTML是一种标记语言，用来结构化我们的网页内容; CSS 是一种样式规则语; JavaScript 是一种脚本，一门编程语言，
WEB前端 -- 图解javascript中的this
叶的博客
03-01 417
JavaScript 是一种脚本语言，支持函数式编程、闭包、基于原型的继承等高级功能。JavaScript一开始看起来感觉会很容易入门，但是随着使用的深入，你会发现 JavaScript其实很难掌握，有些基本概念让人匪夷所思。其中JavaScript 中的 this 关键字，就是一个比较容易混乱的概念，在不同的场景下，this会化身不同的对象。有一种观点认为，只有正确掌握了 JavaScript ...
vscode:Web前端——登录、注册界面
06-07
首先，登录和注册界面是Web前端的常见功能，可以使用HTML、CSS、JavaScript等技术来实现。以下是一些简单的步骤： 1.设计页面布局：可以参考一些常见的登录、注册页面的设计，例如输入框、按钮的布局和样式等。 2....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值