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

目录
相关文章
|
19天前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
47 3
|
10天前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
31 4
js学习--制作猜数字
|
10天前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
20 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
28天前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
29天前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
10天前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
30 4
|
10天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
11 2
|
10天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
8 2
|
10天前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
20 1
|
10天前
|
JavaScript
js学习--抽奖
js学习--抽奖
8 1