关于js学习-初体验

js学习

  • 为什么分类到opengl?
  • 前言
  • js的基础语法
    • 1.Variables(变量):
    • 2.Data Types(数据类型):
    • 3.Arrays:
    • 4.Objects:
    • 5.Operators:
    • 6.Control Structures:
    • 7.Functions:
    • 8.Events(事件):
    • 9. Comments(注释):
  • 思考:difference of 'var' and 'let'
    • 1.Scope(范围):
    • 2.Hoisting(变量提升):
    • 3.Re-declaration(重新声明):
    • 4.Global Object Property(全局对象属性):
    • 5.Use in Modern JavaScript(在现代JavaScript中的使用):
  • three.js应该怎么入手一波?
    • 个人观点,仅供参考
    • 接下来是一些大佬的建议:
      • 1.理解三维图形基础:
      • 2.学习three.js基础:
      • 3.跟随教程和示例:
      • 4.动手实践:
      • 5.解决问题:
      • 6.构建小项目:
      • 7.持续学习:

为什么分类到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, 假如说你时间充裕的话,还是一步一步来吧! 加油!)。一开始,专注于基础知识和简单的项目。随着时间的推移,你可以逐渐增加项目的复杂性。最重要的是,享受创造和学习的过程!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/625685.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java线上问题堆栈排查分析

最近线上出现类似内存溢出问题&#xff0c;需要排查具体原因&#xff0c;记录过程&#xff0c;方便备查。 一、数据抓取 在启动参数中添加参数&#xff0c;可参照以下设置。 参数的作用是在程序发生内存溢出 OutOfMemory 时打印日志&#xff0c;dump下来&#xff0c;方便用工…

leetcode 206翻转链表

题目&#xff1a; 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 提示&#xff1a; 链表中节点的数目范围是 [0, 5000] -5000 < Node.val < 5000 解法&#xff1a; 思路 使用双指针&#xff0c;pre,定义当前指针cur&#xff0…

CAPL入门到精通之CAPL Functions(五) 数学函数

Vector CANoe CAPL系列相关文章导览,下面链接可直接跳转 CAPL入门到精通文章导览Vector CANoe VT System系列板卡文章导览,下面链接可直接跳转 Vector CANoe VT system传送门文章目录 Genreal Functions & Event ProceduresGeneral FunctionsTrigonometric and Mathemati…

Matlab矩阵嵌套

在MATLAB中&#xff0c;可以使用嵌套矩阵来表示多维数据结构。 嵌套矩阵是指一个矩阵中的元素本身也可以是矩阵。这种嵌套的结构可以创建多层的数据结构&#xff0c;非常灵活。 例如&#xff0c;下面是一个简单的嵌套矩阵的例子&#xff1a; A [1 2; 3 4]; B [5 6; 7 8]; …

收录一些可能面试用的算法题

收录一些又长又臭,还可能要手写的模板算法题&#xff08;说的就是你快排) 1.快速排序 public class QuickSort {public static void quickSort(int[] nums, int low, int high) {if (low < high) {int pivotIndex partition(nums, low, high);quickSort(nums, low, pivot…

入门Docker1: 容器技术的基础

目录 服务器选型 虚拟机 基于主机(物理机或虚机)的多服务实例 基于容器的服务实例 Docker Docker三要素 Docker安装 Docker基本使用 基本操作 仓库镜像 容器 服务器选型 在选择服务器操作系统时&#xff0c; Windows 附带了许多您需要付费的功能。 Linux 是开放源代…

Could not find annotations-4.9.0.jar 异常

问题 org.gradle.internal.resolve.ArtifactNotFoundException: Could not find annotations-4.9.0.jar (com.github.bumptech.glide:annotations:4.9.0).原因 解决方式 repositories {google()//谷歌放前面jcenter()//放在谷歌后面}更换顺序后确实没问题了 参考文章 https:…

中国硝酸异辛酯行业调研与投资预测报告(2024版)

内容介绍&#xff1a; 硝酸异辛酯是一种常用的柴油添加剂&#xff0c;用于改进柴油的十六烷值&#xff0c;其分子式为&#xff08;C8H17O&#xff09;NO2&#xff0c;外观为无色&#xff08;或淡黄色&#xff09;透明液体。 十六烷值是衡量柴油着火性能和抗爆性能的指标。一般…

Python接口自动化测试项目实战

1.1 接口测试项目搭建 1.1.1 教育局招生管理系统部署 教育局招生管理系统是基于javamysql,下面介绍它的部署过程。 1.从我的网盘下载部署文件。 2.安装jdk以及配置环境变量。 点击 文件进行安装。 下一步下一步直接安装。 本人的安装路径是C:\Program Files\Java\jdk1.7.…

解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题

目录 前言 问题概述 解决方案 1. 创建树形表格 2. 实现全选功能 3. 实现多选功能 4. 实现子节点勾选 5. 实现父节点勾选 总结 前言 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊解决Vue 3 Element Plus树形表格全选多选以及子节…

【MATLAB】EEMD+FFT+HHT组合算法

代码原理 EEMD&#xff08;经验模态分解&#xff09;FFT&#xff08;快速傅里叶变换&#xff09;HHT&#xff08;希尔伯特-黄变换&#xff09;组合算法是一种常用的信号处理和分析方法。这个组合算法包含了EEMD、FFT和HHT三个步骤&#xff0c;可以用于处理非线性和非平稳信号。…

小程序中使用微信同声传译插件实现语音识别、语音合成、文本翻译功能----语音识别(一)

官方文档链接&#xff1a;https://mp.weixin.qq.com/wxopen/plugindevdoc?appidwx069ba97219f66d99&token370941954&langzh_CN#- 要使用插件需要先在小程序管理后台的设置->第三方设置->插件管理中添加插件&#xff0c;目前该插件仅认证后的小程序。 语音识别…

了解Dubbo配置:优先级、重试和容错机制的秘密【五】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 了解Dubbo配置&#xff1a;优先级、重试和容错机制的秘密【五】 前言Dubbo高级配置概述不同配置覆盖关系重试与容错处理机制负载均衡机制 前言 Dubbo作为一款强大的分布式服务框架&#xff0c;其高级…

(2024,分数蒸馏抽样,Delta 降噪分数,LoRA)PALP:文本到图像模型的提示对齐个性化

PALP: Prompt Aligned Personalization of Text-to-Image Models 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 4. 提示对齐方法 4.1 概述 4.2 个性化 4.3 提示对齐分数抽…

K8s面试题——基础篇1

文章目录 一、简述etcd及其特点二、简述 etcd 适应的场景三、简述什么是 Kubernetes四、简述 Kubernetes 和 Docker 的关系五、简述 Kubernetes 中什么是 Minikube、Kubectl、Kubelet六、简述 Kubernetes 常见的部署方式七、简述 Kubernetes 如何实现集群管理八、简述 Kubernet…

SDKJ_NAV《docker部署》

SDKJ_NAV《docker部署》 1. 下载ubuntu/nginx镜像&#xff0c;并创建容器2.基础环境配置3. 配置nginx&#xff08;前端站点&#xff09;4. 配置python环境&#xff08;后端环境&#xff09;5. 配置mongodb5. 配置 redis 1. 下载ubuntu/nginx镜像&#xff0c;并创建容器 1.官网…

报表生成器FastReport .Net用户指南:数据源与“Data“窗口

FastReport .Net是一款全功能的Windows Forms、ASP.NET和MVC报表分析解决方案&#xff0c;使用FastReport .NET可以创建独立于应用程序的.NET报表&#xff0c;同时FastReport .Net支持中文、英语等14种语言&#xff0c;可以让你的产品保证真正的国际性。 FastReport.NET官方版…

央视推荐的护眼灯是哪款?教育部认可护眼灯品牌

许多家长一般都会给孩子买上许多学习用品&#xff0c;比如现在一些学习桌椅、读写笔灯等等&#xff0c;配有蛮多的学习用具&#xff0c;但对孩子学习时用的护眼台灯很忽略&#xff0c;没有给孩子选好真正合格好用的护眼台灯&#xff0c;就容易让孩子的视觉形成偏差&#xff0c;…

Pixel手机进入工程模式、是否是Version版本?

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

SpringBoot教程(八) | SpringBoot统一结果封装

SpringBoot教程(八) | SpringBoot统一结果封装 经过了前面几篇文章&#xff0c;SpringBoot中MVC相关的配置其实都已经差不多了&#xff0c;接下来就可以完全进入接口开发阶段了。前面我们写过几个接口&#xff0c;虽然都加了RestController注解&#xff0c;相当于统一了我们的…