关于js学习-初体验

发布时间:2024年01月15日

为什么分类到opengl?

因为three.js->webgl->opengl of web,
so js is is significant of three.js ,so does opengl .(hhh,虽然是硬扯,但是确实有点关系)

前言

用js也做了一个月的项目了,所以说,事实证明,有时候,就算不懂语法,项目也是照样写,根本不需要系统的学习了某方面的知识了,直接拿来用就行.
坚持两个原则:“实事求是,不会就查”,下面,让我们以一个外行的角度来学习js.

js的基础语法

以下是JavaScript中基本语法元素的分类:

1.Variables(变量):

Declaration: Use let, const, or var to declare variables:

let name = 'Alice';
const age = 30;
var isStudent = true;

2.Data Types(数据类型):

Primitive Types: String, Number, Boolean, Undefined, Null, Symbol.

let name = 'Alice'; // String
let score = 85; // Number
let isActive = true; // Boolean
let notDefined; // Undefined
let noValue = null; // Null

3.Arrays:

Collection of elements.

let numbers = [1, 2, 3, 4, 5];

4.Objects:

Key-value pairs.

let person = {
  name: 'Alice',
  age: 30
};

5.Operators:

  • Arithmetic: +, -, *, /, %, ++, --.
  • Assignment: =, +=, -=, *=, /=.
  • Comparison: ==, =, !=, !, >, <, >=, <=.
  • Logical: &&, ||, !.

6.Control Structures:

  • If-Else:
if (score > 50) {
  console.log('Pass');
} else {
  console.log('Fail');
}
  • Loops:
    • For Loop:
for (let i = 0; i < 5; i++) {
	console.log(i);
}
  • While Loop:
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

7.Functions:

Declaration and invocation.

function greet(name) {
  return 'Hello ' + name;
}
console.log(greet('Alice'));

8.Events(事件):

Handling DOM events.

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});

9. Comments(注释):

Single line: // This is a comment
Multi-line:
/* This is a 
   multi-line comment */

思考:difference of ‘var’ and ‘let’

1.Scope(范围):

  • var声明了一个具有函数作用域的变量,这意味着如果它在函数内部声明,它只能在该函数内访问。
  • let声明了一个具有块作用域的变量,这意味着它只能在声明它的块(由{}包围)中访问,例如在循环或if语句中。

2.Hoisting(变量提升):

  • 使用var声明的变量被提升到其作用域的顶部,并且即使在声明之前,也可以在其封闭作用域中访问。但是,它们被初始化为undefined,直到代码中到达它们的’‘程序员手动初始化’'。(我就喜欢用在这个,一次定义,到处使用)
  • 用let声明的变量也会被提升,但它们不会被初始化。在声明之前删除它们将导致ReferenceError。(这个不咋用,后续应该也不会再用js了,就玩一下js)

3.Re-declaration(重新声明):

在同一作用域内,用var声明的变量可以重新声明,但是这可能会导致bug(代码逻辑混乱)。
用let声明的变量不能在同一作用域中重新声明。

4.Global Object Property(全局对象属性):

全局声明的var变量成为全局对象(浏览器中的窗口)的属性。
全局声明的let变量不会成为全局对象的属性。

5.Use in Modern JavaScript(在现代JavaScript中的使用):

var是声明变量的较旧的方式,通常用于遗留代码中。
let是在ES6(ECMAScript 2015)中引入的,由于其可预测性和更安全的作用域,现在是声明变量的推荐方法。

初学者更倾向于var , 因为js现在做到可视化非常容易,要改bug也可以很快定位问题,初学者具体用什么,欢迎深耕js几十年的大佬,前来建议!

function varLetExample() {
  if (true) {
    var varVariable = 'I am var';
    let letVariable = 'I am let';
  }

  console.log(varVariable); // Output: 'I am var'
  console.log(letVariable); // ReferenceError: letVariable is not defined
}

three.js应该怎么入手一波?

个人观点,仅供参考

有了前面js的基础,初学者不用考虑太多,直接用起来才是关键!
争议最大的就是var 与 let ,初学者就直接用var就行(假如说你只是玩玩的话,因为let的作用范围是一个 大的 难题 , 别js代码没写几句,就给你劝退了,那就难受了)

接下来是一些大佬的建议:

1.理解三维图形基础:

  • 熟悉三维空间、向量、和矩阵的概念。
    -了解基本的图形学概念,如光照、材质、纹理、和摄像机。

2.学习three.js基础:

阅读three.js的官方文档three.js documentation
理解基本的three.js组件,如场景(scene)、渲染器(renderer)、相机(camera)、几何体(geometry)、材质(material)和光源(light)。

3.跟随教程和示例:

通过在线教程学习,如three.js的官方示例three.js examples
观看视频教程,YouTube上有许多关于three.js的教程,很多英文教程确实很不错。

4.动手实践:

开始实践时,尽量保持简单。例如,创建一个基本的三维场景,添加一个几何体和光源。
逐渐尝试更复杂的任务,如添加动画、用户交互、加载模型等。
(用户交互这方面非常难,从12月初开始,一直到我在写这篇文章(1月15号)时,还是没有办法很好的处理鼠标坐标与模型矩阵变换的问题,不太清楚为啥模型会位移一大段距离才能进行一些交互,等等,非常难,我非常渴望遇到一个超级大佬为我解答这个问题.)

5.解决问题:

遇到问题时,利用搜索引擎和three.js的社区(如Stack Overflow上的three.js标签)寻找答案。
学会阅读并理解错误信息和警告,它们通常会指向问题的根源。
(基本上,语法上的错误,你都可以在Stack Overflow上找到答案 ; 但是关于没有语法错误的优化上,就找不到了)

6.构建小项目:

通过构建小型项目来应用你的技能。这可以是一个简单的动画、一个互动式的3D对象,或者一个小游戏。
试着复现你喜欢的three.js项目,这是学习的好方法

7.持续学习:

three.js是一个持续发展的库,时刻关注其更新和新特性。
探索高级主题,如着色器(shaders)、物理效果或后期处理。
记住,学习three.js是一个逐步的过程,不要急于求成(我是一个月速成的,因为我并不打算长期从事three.js , 搞一段时间的three.js重心就要回到c++了 , ,c++或许才是三维领域的真神 ! hhh, 假如说你时间充裕的话,还是一步一步来吧! 加油!)。一开始,专注于基础知识和简单的项目。随着时间的推移,你可以逐渐增加项目的复杂性。最重要的是,享受创造和学习的过程!

文章来源:https://blog.csdn.net/weixin_52668597/article/details/135597642
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。