《一个小时学会javascript》

爱敲代码的憨仔

已于 2024-08-10 11:09:59 修改

阅读量1k

点赞数 32

分类专栏： SpringBoot 文章标签： javascript

于 2024-08-10 10:32:29 首次发布

本文链接：https://blog.csdn.net/hanxuewei666/article/details/141065705

版权

SpringBoot 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

what is javascript

javascript是一个很好的编程语言，它可以进行全栈开发。

what can you do with it?

Web/Mobile Apps
Real-time Networking Apps
Command-line Toos
Games

where does javascript run?

Browser
Node
可以在浏览器中执行javascript，打开Chorome浏览器，右击鼠标，选择检查，打开开发者工具，进行尝试javascript的编写和运行。

Javascript VS ECMAScript

在这里插入图片描述

下载开发工具,设置开发环境

推荐VScode

创建一个新文件js-basic，这个文件夹将存放这次学习的所有代码,将文件夹拖入vscode,并创建index.html
在这里插入图片描述
按下!，然后进行回车,会进行自动补全，我们可以将其看做一个模版。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

点击Extension按钮，下载Live Server插件，可以将代码运行到浏览器。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

在这里插入图片描述

浏览器就会展示

javascript in Browsers

添加srcipt元素的地方有：head和body(首选)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        // this is my first javascript code
        console.log("Hello World");
    </script>
</body>
</html>

在这里插入图片描述

separation of concerns

关注点分离：将计算机程序分隔为不同部分的设计原则，每一部分有各自的关注焦点。
上一节展示了一个javacript案例，但是实际开发中，代码要复杂的多，所以我们需要去将javascript代码从html代码中提取分离出来，这是为什么要拆分的原因。我们创建一个js文件用来存储js代码，那么接下来要考虑的问题就是如何合并文件去执行，我们就需要在原来的html文件中引用（reference）js文件，使用src（source的缩写）指明js文件的地址。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script src="./index.js"></script>
</body>
</html>

index.js

// this is my first javascript code
console.log("Hello World");

在这里插入图片描述

JavaScript in Node

在view中点击Terminal，进入中端，执行js文件
在这里插入图片描述
可以看到执行了js文件中的输出语句

Variables

使用一个变量去暂时地（temporarily）存储数据,这就像一个盒子，临时存放我们的物品，等我们需要用到这个物品的时候，我们就可以去盒子中找。

let name = 'hhh';
console.log(name);
// Cannot be a reserved keyword
//Should be meaningful
//Cannot start with a number
//Cannot contain a space or hyphen(-)
//Are case-sensitive

constants

const interestRate = 0.3;
interestRate = 1;
console.log(interestRate);

在这里插入图片描述

Primitive Types

let name = 'Hxw'; // String Literal
let age = 30;// Number Literal
let isApproved = true;//Boolean Literal
let firstName = undefined;
let selectedColor = null;