关于js学习-初体验

news/2024/2/25 12:42:40/文章来源:https://blog.csdn.net/weixin_52668597/article/details/135597642

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.luyixian.cn/news_show_925372.aspx

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

相关文章

python统计分析——操作案例(模拟抽样)

参考资料&#xff1a;用python动手学统计学 import numpy as np import pandas as pd from matplotlib import pyplot as plt import seaborn as snsdata_setpd.read_csv(r"C:\python统计学\3-4-1-fish_length_100000.csv")[length] #此处将文件路径改为自己的路…

centos 7 上如何安装chrome 和chrome-driver

centos 7 上如何安装chrome 和chrome-driver 查找自己的服务器是什么系统 cat /etc/os-release这里以centos linux 7为例 下载google-chrome安装包 wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm安装chrome sudo yum localinstall go…

从 PDF 删除PDF 页面的 10 大工具

PDF 文件是全世界几乎每个人最常用的页面之一。借助 PDF 文件&#xff0c;您可以通过任何在线或离线媒体轻松共享信息。但是&#xff0c;如果您想编辑这些 PDF 文件&#xff0c;那么这个过程就很难改变&#xff0c;因为保持文件的原始形式和质量很重要。应该注意的是&#xff0…

机器学习激活函数

激活函数 激活函数是人工神经网络中的一个重要组成部分。它们用于向神经网络中添加非线性因素&#xff0c;使得网络能够解决复杂问题&#xff0c;如图像识别、语言处理等。激活函数的作用是决定一个神经元是否应该被激活&#xff0c;也就是说&#xff0c;它帮助决定神经元的输…

NLP论文阅读记录 - 2022 | WOS 用于摘要法律文本的有效深度学习方法

文章目录 前言0、论文摘要一、Introduction1.1目标问题 二.相关工作三.本文方法四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结 前言 Effective deep learning approaches for summarization of legal texts&#xff08;22&#x…

android 13.0 Launcher3长按app弹窗设置为圆角背景功能实现二

1.前言 在13.0的系统ROM定制化开发中,在进行一些Launcher3的定制化开发中,在使用app的弹窗的功能时,会弹出应用信息和 微件之类的内容,所以在定制需求中,需要默认设置为圆角背景,接下来就来分析下相关功能的实现如图: 2.Launcher3长按app弹窗设置为圆角背景功能实现二的…

基于深度学习的婴儿啼哭识别项目详解

基于深度学习的婴儿啼哭识别项目详解 基于深度学习的婴儿啼哭识别项目详解一、项目背景1.1 项目背景1.2 数据说明 二、PaddleSpeech环境准备三、数据预处理3.1 数据解压缩3.2 查看声音文件3.3 音频文件长度处理 四、自定义数据集与模型训练4.1 自定义数据集4.2 模型训练4.3 模型…

【ACL 2023】 The Art of Prompting Event Detection based on Type Specific Prompts

【ACL 2023】 The Art of Prompting: Event Detection based on Type Specific Prompts 论文&#xff1a;https://aclanthology.org/2023.acl-short.111/ 代码&#xff1a;https://github.com/VT-NLP/Event_APEX Abstract 我们比较了各种形式的提示来表示事件类型&#xff0…

C#,入门教程(66)——枚举Enum的高等用法

前言&#xff1a;国内码农与国外优秀程序员的最大区别是&#xff0c;我们的专家、教授喜欢唾沫横飞地&#xff0c;夸夸其谈语言特性、框架、性能&#xff0c;唯一目的是带私货&#xff08;书籍或教程&#xff09;&#xff0c;很少能写出真有用的程序。差距在哪呢&#xff1f;基…

扫雷游戏棋盘的打印,判断输赢,深度分析

少年们&#xff0c;大家好&#xff0c;我是博主那一脸阳光&#xff0c;我来分享扫雷的打印和判断输赢&#xff0c;代码如何编写&#xff0c;如何使用&#xff0c;深度理解扫雷的游戏。 数据结构的分析和理论 我上次介绍棋盘的初始化&#xff0c;但是如果不打印出来&#xff0…

图解智慧:数据可视化如何助你高效洞悉信息?

在信息爆炸的时代&#xff0c;数据扮演着越来越重要的角色&#xff0c;而数据可视化则成为解读和理解海量数据的得力工具。那么&#xff0c;数据可视化是如何帮助我们高效了解数据的呢&#xff1f;下面我就以可视化从业者的角度来简单聊聊这个话题。 无需深奥的专业知识&#x…

【Leetcode 2707】字符串中的额外字符 —— 动态规划

2707. 字符串中的额外字符 给你一个下标从0开始的字符串s和一个单词字典dictionary。你需要将s分割成若干个互不重叠的子字符串&#xff0c;每个子字符串都在dictionary中出现过。s中可能会有一些额外的字符不在任何子字符串中。 请你采取最优策略分割s&#xff0c;使剩下的字…

【ONE·MySQL || 常见的基本函数】

总言 主要内容&#xff1a;介绍了MySQL中常用的基本函数。一些聚合函数、时间日期函数、字符串函数、数字函数等。       文章目录 总言1、聚合函数1.1、汇总1.2、COUNT()函数1.2.1、基本说明1.2.2、使用演示 1.3、SUM( )函数1.3.1、基本说明1.3.2、使用演示 1.4、AVG( )函…

java基础知识点系列——数据输入(五)

java基础知识点系列——数据输入&#xff08;五&#xff09; 数据输入概述 Scanner使用步骤 &#xff08;1&#xff09;导包 import java.util.Scanner&#xff08;2&#xff09;创建对象 Scanner sc new Scanner(System.in)&#xff08;3&#xff09;接收数据 int i sc…

PHP开发日志 ━━ php8.3安装与使用组件Xdebug

今天开头写点历史&#xff1a; 二十年前流行asp&#xff0c;当时用vb整合常用函数库写了一个dll给asp调用&#xff0c;并在此基础上开发一套仿windows界面的后台管理系统&#xff1b;后来asp逐渐没落&#xff0c;于是在十多年前转投php&#xff0c;不久后用php写了一套mvc框架&…

C++——map和set的基本使用

目录 一&#xff0c;关联式容器 二&#xff0c;键值对 三&#xff0c;set的使用 3.1 set介绍 3.2 set的插入和删除 3.3 set的pair 3.4 multiset 四&#xff0c;map的使用 4.1 map介绍 4.2 map实现简易字典 4.3 map实现统计次数 4.4 map的[] 五&#xff0c;使用map或…

TRB 2024论文分享:基于生成对抗网络和Transformer模型的交通事件检测混合模型

TRB&#xff08;Transportation Research Board&#xff0c;美国交通研究委员会&#xff0c;简称TRB&#xff09;会议是交通研究领域知名度最高学术会议之一&#xff0c;近年来的参会人数已经超过了2万名&#xff0c;是参与人数和国家最多的学术盛会。TRB会议几乎涵盖了交通领域…

【REST2SQL】07 GO 操作 Mysql 数据库

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 【REST2SQL】06 GO 跨包接口重构代码 MySQL是一个关系型数据库管理系统&#xf…

系统性学习vue-vue核心

做了三年前端,但很多系统性的知识没有学习 还是从头系统学习一遍吧 课程是b站的Vue2.0Vue3.0课程 后续还会学习的如下,就重新开一篇了,不然太长,之后放链接 vue组件化编程 vue-cli 脚手架 vue中的ajax vue-router vuex element-ui vue3 老师推荐的vscode针对vue的插件: Vue 3…

在线项目实习|2024寒假项目实战火热报名中!

一、在线实习项目分类 二、在线实习项目流程 三、在线实习项目优惠及项目特色 1、师傅带练教学模式&#xff0c;手把手教你掌握 采用“师带徒”的教学模式&#xff0c;课程以“项目前置知识学习 师傅带练 项目实战”贯穿&#xff0c;强调动手实操&#xff0c;内容以代码落地为…