webgl学习笔记2_javascript基础快速学习

简介: webgl学习笔记2_javascript基础快速学习

直接肝webgl太干,需要JavaScript来缓冲

在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间

JavaScript 文件的文件扩展名是 .js

JavaScript 能够改变 HTML 内容

getElementById() 是多个 JavaScript HTML 方法之一。

本例使用该方法来“查找” id=“demo” 的 HTML 元素,并把元素内容(innerHTML)更改为 “Hello JavaScript”:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我!</button>
</body>
</html>

JavaScript 同时接受双引号和单引号

JavaScript 能够改变 HTML 属性

例如改变 标签的 src 属性(source)来改变一张 HTML 图像:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么?</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中,JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
</body>
</html>

JavaScript 能够改变 HTML 样式 (CSS)

可通过改变 display 样式来显示或隐藏 HTML 元素:

document.getElementById("demo").style.display="none";
document.getElementById("demo").style.display="block";

JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数。

JavaScript 显示方案

  1. 使用 window.alert() 写入警告框
  2. 使用 document.write() 写入 HTML 输出
  3. 使用 innerHTML 写入 HTML 元素
  4. 使用 console.log() 写入浏览器控制台
    小知识:通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”
<!DOCTYPE html>
<html>
<body>
<h2>按 F12 启动</h2>
<p>在 debugger 中选择 "Console"。然后再次点击运行按钮。</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

JavaScript 语句

包含值、运算符、表达式、关键词和注释

  1. 与C、C++一样
  2. 所有 JavaScript 标识符对大小写敏感
关键词 描述
break 终止 switch 或循环。
continue 跳出循环并在顶端开始。
debugger 停止执行 JavaScript,并调用调试函数(如果可用)。
do … while 执行语句块,并在条件为真时重复代码块。
for 标记需被执行的语句块,只要条件为真。
function 声明函数。
if … else 标记需被执行的语句块,根据某个条件。
return 退出函数。
switch 标记需被执行的语句块,根据不同的情况。
try … catch 对语句块实现错误处理。
var 声明变量,区别:此处与c、C++不同

JavaScript 使用 Unicode 字符集

字符集 描述
UTF-8 UTF8 中的字符长度可以是 1 到 4 个字节。 UTF-8 可以代表 Unicode 标准中的任何字符。 UTF-8 向后兼容ASCII。 UTF-8 是电子邮件和网页的首选编码。
UTF-16 16 位 Unicode 转换格式是 Unicode 的可变长度字符编码,能够编码整个 Unicode 编码。 UTF-16 用于主要的操作系统和环境,如 Microsoft Windows、Java 和 .NET。

Unicode 的前 128 个字符(与 ASCII 一一对应)使用与 ASCII 相同的二进制值的单个八位字节进行编码,使得有效的 ASCII 文本使用有效的 UTF-8 编码 Unicode

JavaScript 数据类型

字符串值,数值,布尔值,数组,对象。

对象学习,类比python中的集合

对象属性是 name:value 对,由逗号分隔。

重点:Undefined 与 Null 的区别

Undefined 与 null 的值相等,但类型不相等

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false,类型
null == undefined             // true,比较值

typeof 运算符把数组返回为 “object”,因为在 JavaScript 中数组即对象。

JavaScript 函数

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>本例调用了一个执行计算的函数,然后返回结果:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
    return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(7, 8);
</script>
</body>
</html>

饮水思源,来源于W3school

目录
相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
39 5
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
84 3
|
1月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
24 2
|
1月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
50 1
|
2月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
42 4
js学习--制作猜数字
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
52 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
3月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
2月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
38 4
|
2月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
25 2
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
21 2
下一篇
DataWorks