JavaScript&TypeScript学习笔记

m0_74300757

已于 2023-06-29 18:41:19 修改

阅读量398

点赞数

文章标签： javascript 学习笔记

于 2023-06-26 23:44:22 首次发布

本文链接：https://blog.csdn.net/m0_74300757/article/details/131407316

版权

1. 内联脚本

可以在 HTML 元素内部使用 <script> 标签来插入 JavaScript 代码。这种方式被称为内联脚本。

<!DOCTYPE html>
<html>
  <head>
    <title>内联脚本</title>
  </head>
  <body>
    <h1>JavaScript 示例</h1>
    <button onclick="alert('Hello, World!')">点我</button>
    <script>
      console.log('这是一个内联脚本');
    </script>
  </body>
</html>

2. 外部脚本

可以将 JavaScript 代码保存到一个独立的文件中，并通过 <script> 标签引入。

<!DOCTYPE html>
<html>
  <head>
    <title>外部脚本</title>
    <script src="main.js"></script>
  </head>
  <body>
    <h1>JavaScript 示例</h1>
    <button onclick="alertMessage()">点我</button>
  </body>
</html>

其中，main.js 是一个包含 JavaScript 代码的文件。

function alertMessage() {
  alert('Hello, World!');
}

3. 基础语法

（1）变量

JavaScript中的变量必须先声明后使用。可以使用 var、let 或 const 关键字来声明变量。

TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

TypeScript支持未来的ES6甚至ES7。在TypeScript中，可以直接使用ES6的最新特性，在编译时它会自动编译到ES3或ES5。

TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

其中，var 是 ES5 中使用的关键字，let 和 const 则是 ES6 中新增的关键字。

// 使用 var 声明变量
var num = 10;

// 使用 let 声明变量
let str = 'Hello, World!';

// 使用 const 声明常量
const PI = 3.14;

（2）数据类型

JavaScript 中有六种基本数据类型：数字（Number）、字符串（String）、布尔值（Boolean）、空（Null）、未定义（Undefined）和对象（Object）。

// 数字类型
let num = 10;

// 字符串类型
let str = 'Hello, World!';

// 布尔值类型
let bool = true;

// 空类型
let empty = null;

// 未定义类型
let undef = undefined;

// 对象类型
let obj = { name: 'Tom', age: 20 };

（3）运算符

JavaScript 中常用的运算符包括算术运算符、比较运算符、逻辑运算符等。

// 算术运算符
let a = 10;
let b = 2;

console.log(a + b); // 输出 12
console.log(a - b); // 输出 8
console.log(a * b); // 输出 20
console.log(a / b); // 输出 5

// 比较运算符
let c = 10;
let d = 20;

console.log(c > d);  // 输出 false
console.log(c < d);  // 输出 true
console.log(c == d); // 输出 false
console.log(c != d); // 输出 true

// 逻辑运算符
let e = true;
let f = false;

console.log(e && f); // 输出 false
console.log(e || f); // 输出 true
console.log(!e);     // 输出 false

（4）条件语句

JavaScript 中的条件语句包括 if...else、switch...case 两种。

// if...else 语句
let age = 18;

if (age >= 18) {
  console.log('成年人');
} else {
  console.log('未成年人');
}

// switch...case 语句
let day = 3;
let weekday;

switch (day) {
  case 1:
    weekday = '星期一';
    break;
  case 2:
    weekday = '星期二';
    break;
  case 3:
    weekday = '星期三';
    break;
  default:
    weekday = '未知';
}

console.log(weekday); // 输出 星期三

（5）循环语句

JavaScript 中的循环语句包括 for、while 和 do...while 三种。

// for 循环
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// while 循环
let j = 0;
while (j < 10) {
  console.log(j);
  j++;
}

// do...while 循环
let k = 0;
do {
  console.log(k);
  k++;
} while (k < 10);

（6）函数

JavaScript 中的函数可以通过 function 关键字定义。函数可以接受任意数量的参数，并且可以返回一个值。

function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // 输出 3

（7）对象Object

对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。

创建对象有如下两种方式，我们常用第二种。


//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){    //设置对象的方法/函数，注意此处
    console.log(this.name);
};
//方式二字面量
var person = {
    name: 'Lary Page',
    age: 47,
    job: 'Software Engineer',
    sayName: function(){        //注意此处
        console.log(this.name);
    }
};
console.log(person.job);
person.sayName();

虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为解决这个问题，人们开始使用工厂模式的一种变体。代码如下：


function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');

（8）数组Array

用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推。

创建数组有以下两种方法，我们常用第二种。


//方式一new
var colors = new Array('red', 'blue', 'green');
//方式二字面量
var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组
console.log(colors[1]);
colors[3] = 'brown';
console.log(colors.length);
var names = []; // 创建一个空数组
var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推荐！
console.log(hyBird[3].firstName);

4. DOM 操作

JavaScript 可以通过 DOM（文档对象模型）操作 HTML 元素。

<!DOCTYPE html>
<html>
  <head>
    <title>DOM 操作</title>
    <script src="main.js"></script>
  </head>
  <body>
    <h1>JavaScript 示例</h1>
    <p id="myParagraph">这是一个段落</p>
    <button onclick="changeText()">点我</button>
  </body>
</html>

function changeText() {
  let paragraph = document.getElementById('myParagraph');
  paragraph.textContent = 'Hello, World!';
}

上面的示例演示了如何使用 getElementById 方法获取 HTML 元素，并通过 textContent 属性修改元素内容。

5. 事件处理

JavaScript 可以通过事件处理程序响应用户操作。例如，可以为按钮添加点击事件处理程序。

<!DOCTYPE html>
<html>
  <head>
    <title>事件处理</title>
    <script src="main.js"></script>
  </head>
  <body>
    <h1>JavaScript 示例</h1>
    <button id="myButton">点我</button>
  </body>
</html>

let button = document.getElementById('myButton');

button.addEventListener('click', function() {
  alert('Hello, World!');
});

上面的示例演示了如何使用 addEventListener 方法为按钮添加点击事件处理程序。

总结

学习 JavaScript 的好处：

增强 Web 开发技能：JavaScript 是 Web 开发中最重要的一种编程语言之一，学习它可以让我们成为一个更优秀的 Web 开发人员。
提高职业竞争力：随着 Web 技术的不断演进，对 JavaScript 开发者的需求也在日益增加。掌握 JavaScript 可以提高在职场上的竞争力。
创造交互性的用户体验：JavaScript 可以用于创建动态和交互式的 Web 页面，使用户体验更加出色。
节省开发时间和成本：JavaScript 库和框架可以简化 Web 开发过程，减少代码量，节省开发时间和成本。
学会一门通用的编程语言：除了 Web 开发，JavaScript 还可以用于开发桌面应用程序、游戏、移动应用程序等多个领域。学习 JavaScript 可以让你掌握一门通用的编程语言。
掌握前沿技术：JavaScript 社区不断推陈出新，引入新特性和工具，学习 JavaScript 可以让你掌握前沿技术。

总之，学习 JavaScript 对于 Web 开发人员来说是必要的，它有助于提高职业竞争力、节省开发时间和成本，创造出色的用户体验，并掌握一门通用的编程语言。

m0_74300757

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript&TypeScript学习笔记

学习 JavaScript 的好处：增强 Web 开发技能：JavaScript 是 Web 开发中最重要的一种编程语言之一，学习它可以让我们成为一个更优秀的 Web 开发人员。提高职业竞争力：随着 Web 技术的不断演进，对 JavaScript 开发者的需求也在日益增加。掌握 JavaScript 可以提高在职场上的竞争力。创造交互性的用户体验：JavaScript 可以用于创建动态和交互式的 Web 页面，使用户体验更加出色。
复制链接

扫一扫