JavaScript学习之编程基础部分

最新推荐文章于 2024-07-25 09:24:40 发布

在地球迷路的怪兽

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量858

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_53324833/article/details/121419743

版权

前端工程学习专栏收录该内容

25 篇文章 6 订阅

订阅专栏

前言

因为我是后端程序员，所以学前端有些知识是相通的，所以在我学习JavaScript的时候有些内容我会直接跳过，只会记下一些JavaScript特有的东西。

1、初始JavaScript

1.1 JavaScript 是什么

 布兰登·艾奇（Brendan Eich，1961年～）。
 神奇的大哥用10天完成 JavaScript 设计。
 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。

1.1 JavaScript 是什么

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

1.2 JavaScript 的作用

 表单动态校验（密码强度检测）（ JS 产生最初的目的）  网页特效
 服务端开发(Node.js)
 桌面程序(Electron)
 App(Cordova)
 控制硬件-物联网(Ruff)
 游戏开发(cocos2d-js)

1.3 浏览器执行 JS 简介

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

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        /*
        当浏览器读到一行JS代码时，就会翻译一句JS代码。
        逐行翻译成机器语言然后计算机才能执行。
         */
        alert('哈啊哈哈哈');
    </script>
</head>
<body>

</body>
</html>

1.4 JS 的组成

在这里插入图片描述

1.5 JS 的组成

1、ECMAScript
在这里插入图片描述
2、 DOM ——文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
3.、BOM ——浏览器对象模型
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.6 JS 初体验

在这里插入图片描述
 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
 可读性差，在html中编写JS大量代码时，不方便阅读；
 引号易错，引号多层嵌套匹配时，非常容易弄混；
 特殊情况下使用
在这里插入图片描述
 可以将多行JS代码写到

2、JavaScript注释

在这里插入图片描述

3、JavaScript输入输出语句

在这里插入图片描述
测试prompt：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        /*
        prompt输入测试
        注意在HTML文件中我们写单引号，在JS中我们使用双引号，这是规范
         */
        prompt('请输入您的年龄：');
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述
alert测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        /*
        prompt输入测试
        注意在HTML文件中我们写单引号，在JS中我们使用双引号，这是规范
         */
        // prompt('请输入您的年龄：');
        /*
        alert输出测试
        注意在HTML文件中我们写单引号，在JS中我们使用双引号，这是规范
         */
        alert('哈哈哈');
    </script>

</head>
<body>

</body>
</html>

在这里插入图片描述
console.log测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        /*
        console.log输入测试
        console是控制台输出的意思，给程序员测试使用的
        注意在HTML文件中我们写单引号，在JS中我们使用双引号，这是规范
         */
        console.log('给程序员看的');
    </script>

</head>
<body>

</body>
</html>

运行程序，按F12打开浏览器调试工具，在console中查看打印的日志：
在这里插入图片描述

变量

在这里插入图片描述
有编程基础的同学只要知道var是JavaScript中的数据类型就行了。
在JavaScript中，var数据类型表示所有的数据类型，比如字符类型整形类型在JavaScript中都用var表示。

数据类型

在这里插入图片描述

1.3数据类型的分类

JS 把数据类型分为两类：
 简单数据类型（Number,String,Boolean,Undefined,Null）
 复杂数据类型（object)

2.1 简单数据类型（基本数据类型）

JavaScript 中的简单数据类型及其说明如下：
在这里插入图片描述

2.3字符串型String

字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’’。
注意不能没有引号，没有引号会被认为是js代码而引起报错。
同时，因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。
在这里插入图片描述

字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

4. 字符串拼接

 多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加" alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112

+ 号总结口诀：数值相加，字符相连

2.5 布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

2.6 Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

3. 获取变量数据类型

3.1 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

在这里插入图片描述

4. 数据类型转换

4.1 什么是数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变
量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换：
 转换为字符串类型
 转换为数字型
 转换为布尔型

4.2 转换为字符串
在这里插入图片描述
 toString() 和 String() 使用方式不一样。
 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。
4.3 转换为数字型（重点）

 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点，另外两个了解就行
 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型
在这里插入图片描述

解释型语言和编译型语言

概述
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行
程序。程序语言翻译成机器语言的工具，被称为翻译器。

 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
 编译器是在代码执行之前进行编译，生成中间代码文件
 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

2、算数运算符

在这里插入图片描述

4、比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。
在这里插入图片描述
4.2 等于号总结

console.log(18 == '18');//返回true
console.log(18 === '18'); //返回false

在地球迷路的怪兽

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习之编程基础部分

前言因为我是后端程序员，所以学前端有些知识是相通的，所以在我学习JavaScript的时候有些内容我会直接跳过，只会记下一些JavaScript特有的东西。1、初始JavaScript1.1 JavaScript 是什么 布兰登·艾奇（Brendan Eich，1961年～）。 神奇的大哥用10天完成 JavaScript 设计。 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。1.1 JavaScript 是什么 JavaScript
复制链接

扫一扫