01 JavaScript学习笔记

最新推荐文章于 2024-05-24 13:39:19 发布
最新推荐文章于 2024-05-24 13:39:19 发布
阅读量379 收藏
点赞数 1
分类专栏： # JavaScript 前端 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44653420/article/details/123916880
版权

01 JavaScript学习笔记

一、初步认识

1.概念

  • JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）
  • 脚本语言：不需要编译，运行过程中由js解释器(js引擎)逐行来进行解释并执行
  • 现在也可以基于Node.js技术进行服务器端编程

2.HTML/CSS/JS区别

  • HTML决定网页结构和内容（决定看到什么），相当于人的身体
  • CSS决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆
  • JS实现业务逻辑和页面控制（决定功能），相当于人的各种动作

3.浏览器执行JS简介

浏览器分为两个部分：渲染引擎和JS引擎

  • 渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
  • JS引擎：也成为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置的JavaScipt引擎（解释器）来执行JS代码，JS引擎执行代码时逐行解释每一句源码（转化为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言,会逐行解释执行。

4.JS的组成

在这里插入图片描述

ECMAScript是由ECMA国际进行标准化的一门编程语言，这种语言在万维网上应用广泛，他往往被称为JavaScript或者JScript，但实际上后两者是ECMAScript语言的实现和扩展。

在这里插入图片描述

也就是说ECMAScript规定了js的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM:文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM:浏览器对象模型，它提供了独立内容的、可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

二、初体验

js有三种书写位置，分别为行内、内嵌、外部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 内嵌式的js -->
    <script>
        // alert('xxxxxxxxxx')
    </script>
    <!-- 外部js写法  添加外部js文件  双标签 -->
    <script src = "my.js"></script>

</head>
<body>
    <!-- 1. 行内式的js 直接写入元素的内部 -->
    <!-- 点击这个button 弹出一个对话框 -->
    <input type = "button" value = "唐伯虎" onclick = "alert('石榴姐')">
    
</body>
</html>

2.1行内式JS

<input type = "button" value = "点我试试" onclick = "alert('Hello World)"/>
  • 可以将单行或者少量的js代码写在HTML标签的事件属性中（以on开头的属性），如:onclick
  • 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
  • 可读性差，在html中编写js大量代码时，不方便阅读
  • 引号容易错，引号多层嵌套匹配时，非常容易弄混
  • 特殊情况下使用

2.2 内嵌js

<script>alert('hello world!);</script>
  • 可以将多行js代码写进script
  • 内嵌js是学习时常用的方式

2.3 外部Js文件


<script src= "my.js"></script>
  • 利用HTML页面代码结构化，把大段js代码独立到HTML页面之外，既美观，也方便文件级别的复用
  • 引用外部js文件的script标签中间不可以写代码
  • 适合于Js代码数比较多的情况下

2.4 注释

// 单行注释 ctrl + /

/**/ 多行注释 默认的快捷键：shift + alt + a

2.5 输入输出语句

为了方便信息的输入输出，js提供了一些输入输出的语句，其常用的语句如下：

  • alert(msg) 浏览器弹出警示框
  • console.log(msg) 浏览器控制台打印输出信息
  • prompt(info) 浏览器弹出输入框，用户可以输入

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        // 这是一个输出
        prompt('请输出你的年龄');
        // alert 弹出警示框  展示给用户看的
        alert('计算的结果是');

        // console  控制台输出   给程序员测试用的
        // 打开浏览器  按下f12 查看控制台输出语句
        console.log('我是程序员');
    </script>
</head>
<body>
    
</body>
</html>

三、变量

变量在使用时分为两步：1.声明变量 2.赋值

1.声明变量

var age; //  声明一个名称为age的变量
age = 10;
  • var是js的一个关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量之后，计算机只会自动为变量分配内存空间，不需要程序员管
  • age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
  • =代表赋值

2.变量的初始化

var age = 19;

声明一个变量并赋值，我们称之为变量的初始化

3.案例使用1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qdp7iofp-1648871077033)(…/…/images/75717fab15d9a8f2a840db184774bb62852eac408473601c5b562b93a8f26bef.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myname = '孙悟空';
        var address = '花果山';
        var age = 30;
        var email = 'shililuzhou@outlook.com';
        var gz = 2000;

        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>
</head>
<body>
    
</body>
</html>

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

  1. 案例使用2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 用户输入姓名 存储到一个myname变量中
        var myname = prompt('请输入您的名字');
        // 输出用户名
        alert(myname);
    </script>
</head>
<body>
    
</body>
</html>

5.更新变量
一个变量被重新赋值之后，它原有的值就会被覆盖，变量值将以最后一次赋值为准。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myname = 'xxx';
        console.log(myname);
        var myname = 'yyy';
        console.log(myname);
        // 声明多个变量
        var age = 19,address = '朝阳区',gz = 1000;

        // 输出未定义变量
        // undefined  js引擎 解释一句 执行一句
        // var aaa;
        // console.log(aaa);
        
        // js可以不声明 直接执行一条语句
        bbb = 10;
        console.log(bbb);

    </script>
</head>
<body>
    
</body>
</html>
  1. 变量命名规范
    在这里插入图片描述

四、数据类型

变量的数据类型，变量是用来存储值的所在处，他们有名字和数据类型，变量的数据类型决定了如何讲代表这些值的位存储到计算机内存中，javascript是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序运行的过程，类型会被自动确定。

var age = 10;// 这是一个数字型
var areYouOk = 'hhh';// 这是一个字符串类型

在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了类型。

js是动态语言，数据类型可以发生变化

数据类型的分类：

  • 简单数据类型（Number,String,Boolean,Undefined,Null）
  • 复杂数据类型（object）

4.1 简单数据类型

4.1.1 数值类型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 010;// 八进制  前面加上一个0

        // 输出的时候全部转化为十进制
        console.log(num);

        var num1 = 0xa;
        console.log(num1);

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

JS中八进制前面加上0，十六进制前面加上0x

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 010;// 八进制  前面加上一个0

        // 输出的时候全部转化为十进制
        console.log(num);

        var num1 = 0xa;// 十六进制
        console.log(num1);// 十进制10
        
        // js中 数值的最大值和最小值
        alert(Number.MAX_VALUE);
        alert(Number.MIN_VALUE);

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

javascript中数值的最大值和最小值
在这里插入图片描述

javascript中数值无穷大、无穷小
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 010;// 八进制  前面加上一个0

        // 输出的时候全部转化为十进制
        console.log(num);
        var num1 = 0xa;
        console.log(num1);
        
        // js中 数值的最大值和最小值
        alert(Number.MAX_VALUE);
        alert(Number.MIN_VALUE);

        // 无穷大  无穷小
        alert(Infinity);// 无穷大
        alert(-Infinity);
        alert(NaN);// Not a Number 代表一个非数值
    </script>
</head>
<body>
    
</body>
</html>

isNaN用来判断是不是数字：

console.log(isNaN(12))
console.log(isNaN('sss'))
4.1.2 字符串类型

在这里插入图片描述

外双内单，外单内双

在这里插入图片描述

  • 字符串的长度
var str = 'xxxx';
console.log(str.length);
  • 字符串的连接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        var str1 = 'xxx';
        console.log(str1.length);

        // 字符串类型和其他类型进行拼接  还是字符串类型
        var str2 = 'xxxx' + 18;// 连接字符串 + 
        console.log(str2);
    </script>

</head>
<body>
    
</body>
</html>
  • 小案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        var age = prompt('你今年多大了');
        var str = '你今年'+age+'岁';
        alert(str);
    </script>

</head>
<body>
     
</body>
</html>
4.1.3 布尔类型

在这里插入图片描述

4.1.4 undefined NAN

undefined: 一个变量声明之后没有被赋值。

null： 一个变量为空值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        var str;
        console.log(str);
        var str1 = undefined;
        console.log('xxx' + str1);// 变成字符串类型
        console.log(str1 + 1);// undefined 和 数字相加 最后结果是NAN
        var str2 = null;
        console.log('xxx' + str2);// 结果是字符串
        console.log(str2 + 1);// 结果是1
    </script>

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

检测数据类型：typeof

通过测试可以发现 通过prompt输入进来的数据都是字符串类型的

五、数据类型转换

5.1 数字类型转换为字符串类型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        var str = 10;
        var str1 = str.toString();// 转换为字符串类型
        console.log(typeof str1);

        var str2 = String(str);// 转换为字符串类型
        console.log(typeof str2);

    </script>

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

5.1 字符串转换成数字型

在这里插入图片描述

要注意 这里的隐式转换没有加号，加号是数值型变成字符串的隐式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        var str = '123';
        console.log(parseInt(str));// string转换成整数数值类型

        var str1 = '3.14';
        console.log(parseFloat(str1)); // string转换成浮点数类型

        //使用Number()强制转换函数  将string类型转换为数值型
        console.log(Number(str));
        // 利用隐式转换  字符串型自动转换为数值型
        console.log('12' - 0);
    </script>

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

案例1:

// 隐式转换案例
       var age = prompt('请输入你的年龄');
       var output = 2018 - age;// age是字符串类型 减法运算 自动转换成数值类型
       console.log(output);
       alert(output);

案例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
       var a = prompt("请输入第一个数：");
       var b = prompt("请输入第二个数：");

    
       var result = parseFloat(a) + parseFloat(b);// 这里加号不可以使用隐式转换 只有-*/可以使用


       alert('运算结果是：' + result);// 数值型转换成字符串型： 字符串的拼接

    </script>

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

5.2 转换成布尔型

在这里插入图片描述

// 转换成布尔类型
      console.log(Boolean(null));
      console.log(Boolean(undefined));
      console.log(Boolean(null));
      console.log(Boolean(123));
      console.log(Boolean('你好吗'));
少写代码少看论文多多睡觉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
Javascript入门学习笔记
weixin_61370021的博客
04-27 4533
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript学习笔记
学习笔记
03-17 1966
JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。 JavaScript：直接写入 HTML 输出流 document.write("<h1>这是一个标题</h1>"); 效果如图 只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文
【javascript笔记】javascript学习笔记（一）
m0_61097007的博客
04-07 1043
在研习JavaScript的旅程中，我将不断积累并修正学习笔记，若其中存在谬误，敬请各位不吝赐教予以纠正。
JavaScript新手入门学习笔记
qq_43389754的博客
12-04 4万+
JavaScript介绍 1.1 前端三要素 HTML 超文本标记语言 决定了网页中的视图内容 CSS 层叠样式表 决定了网页中的视图效果 JavaScript 赋予网页动态功能 1.2 JavaScript简介 JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言 基于对象：区别于Java中的面向对象，遵循对象.方法的规则，但是没有类的概念 事件驱动：脚本语言代码需要由网页中的事件来触发执行 脚本语言：JS作为寄生语言，写在HTML网页中 JavaScript在1995年
javascript 学习笔记
Katios
05-25 7194
注释“//”表示单行注释 “/* */”可以用来多行注释变量1.变量必须使用字母、下划线(_)或者美元符($)开始。2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。3.不能使用JavaScript关键词与JavaScript保留字4.变量区分大小写 javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前
JavaScript 学习笔记 ——document
我有两颗糖
02-20 5872
1. 浏览器环境 JavaScript 语言最初是为 Web 浏览器创建的。此后，它已经发展成为一种具有多种用途和平台的语言。 下面是 JavaScript 在浏览器中运行时的鸟瞰示意图： windows 是根对象，它充当 JavaScript 的全局对象以及代表着浏览器窗口，提供控制浏览器窗口的方法。 1.1 DOM 文档对象模型 DOM 将所有页面内容表示为可以修改的对象，document 是页面的入口，可以利用它修改创建 HTML 的内容，可以参考 DOM： document.bodyDOM.st
JavaScript学习笔记（一）
SH041218121的博客
03-13 1570
前提提要： 学习视频来源：B站尚硅谷。 软件：HBuilder 浏览器：谷歌浏览器 这边记录个人学习笔记。 基本输出语句： 新建一个.html文件，在head中建立一个script中书写语句。 1、alert("在浏览器窗口弹出一个警告框"); 2、document.write("可以向body中输出一个内容") ; 3、console.log("向控制台输出一个内容"); ...
JavaScript基础知识学习笔记
weixin_43739821的博客
01-05 697
引入方式 基础语法 书写语法 变量 数据类型和运算符 函数function 第一种定义格式 第二种定义格式 闭包 对象 基本对象 Array对象 String对象 自定义对象 JSON对象 BOM对象 Window对象 Location对象 DOM对象 DOM介绍 获取DOM对象 操作DOM对象 案例 javascript事件 javascript事件简介 javascript事件绑定 常见javascript事件 javascript事件案例
JavaScript 学习笔记（第一天）
weixin_74155781的博客
12-30 917
初学者学js
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 212
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1058
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
最新发布
global_coding的博客
05-24 292
vue 使用 export default
Vue从入门到实战Day07
ltt159264的博客
05-21 895
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

少写代码少看论文多多睡觉

求打赏，求关注，求点赞

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值