web前端学习(三十二)——JavaScript语法、语句输出及注释的相关设置

简介: web前端学习(三十二)——JavaScript语法、语句输出及注释的相关设置

1.JS语句


JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

分号用于分隔 JavaScript 语句,通常我们在每条可执行的语句结尾添加分号,使用分号的另一用处是在一行中编写多条语句。例如:👇👇👇

(您也可能看到不带有分号的案例。在 JavaScript 中,用分号来结束语句是可选的。)

a=5;
b=10;
c=a+b;
等价于:
a=5;b=10;c=a+b;

JavaScript代码是 JavaScript 语句的序列,浏览器按照编写顺序依次执行每条语句。

JavaScript可以分批地组合起来,代码块以左花括号开始,以右花括号结束,代码块的作用是一并地执行语句序列。

JavaScript会忽略多余的空格。可以向脚本添加空格,来提高其可读性。

JavaScript可以在文本字符串中使用反斜杠对代码行进行换行。

<!DOCTYPE html>
<html lang="en">
  <head> 
    <meta charset="utf-8"> 
    <title>JS简单学习</title> 
  </head>
  <body>
    <script>
      document.write("你好 \
      世界!!!");
    </script>
  </body>
</html>

2.JS语句标识符


语句

描述

break

用于跳出循环。

catch

语句块,在 try 语句块执行出错时执行 catch 语句块。

continue

跳过循环中的一个迭代。

do ... while

执行一个语句块,在条件语句为 true 时继续执行该语句块。

for

在条件语句为 true 时,可以将代码块执行指定的次数。

for ... in

用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

function

定义一个函数

if ... else

用于基于不同的条件来执行不同的动作。

return

退出函数

switch

用于基于不同的条件来执行不同的动作。

throw

抛出(生成)错误

try

实现错误处理,与 catch 一同使用。

var

声明一个变量。

while

当条件语句为 true 时,执行语句块。

3.JS输出显示数据


JavaScript没有任何打印或者输出的函数。

JavaScript可以通过不同的方式来输出数据:

·       使用 window.alert() 弹出警告框。

·       使用 document.write() 方法将内容写到 HTML 文档中。

·       使用 innerHTML 写入到 HTML 元素。

·       使用 console.log() 写入到浏览器的控制台。


3.1 window.alert()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <h1>我的第一个页面</h1>
    <p>使用 window.alert() 弹出警告框</p>
    <script>
      window.alert("请继续浏览其他网页!!!");
    </script>
  </body>
</html>

3.2 document.write()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落</p>
    <script>
      document.write(Date());
    </script>
  </body>
</html>

3.3 innerHTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">我的第一个段落</p>
    <script>
      document.getElementById("demo").innerHTML="段落已被修改!!!";
    </script>
  </body>
</html>

3.4 console.log()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p>
      浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
    </p>
    <script>
      a=5;
      b=7;
      c=a+b;
      console.log(c);
    </script>
  </body>
</html>

4.JS语法


4.1 JS字面量 

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。例如:3.141024512e5

字符串(String)字面量 可以使用单引号或双引号。例如:'Hello'"Hello"

表达式字面量 用于计算。例如:5+66*7

数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:{Name: "zhangsan", Sex: "", age: 25, Hobby: "sleep"}

函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}


4.2 JS变量 

在编程语言中,变量用于存储数据值。JavaScript 使用关键字var来定义变量,使用等号来为变量赋值。


var x,y;
x=50;
y=60;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p id="Number1"></p>
    <p id="Number2"></p>
    <p id="String"></p>
    <p id="Array"></p>
    <p id="Object"></p>
    <script>
      var length = 16;                                     // Number 通过数字字面量赋值
      var points = length * 10;                            // Number 通过表达式字面量赋值
      var name = "zhangsan";                               // String 通过字符串字面量赋值
      var color = ["red", "green", "blue"];                // Array  通过数组字面量赋值
      var web = {first:"HTML", second:"CSS", third:"JS"};  // Object 通过对象字面量赋值
      document.getElementById("Number1").innerHTML=length;
      document.getElementById("Number2").innerHTML=points;
      document.getElementById("String").innerHTML=name;
      document.getElementById("Array").innerHTML=color;
      document.getElementById("Object").innerHTML=web.first + " " + web.second + " " + web.third;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p id="demo"></p>
    <script>
      var a,str,x;
      a=666;
      str="中国";
      x=str + a;
      document.getElementById("demo").innerHTML=x;
    </script>
  </body>
</html>


4.3 JS操作符

类型

实例

描述

赋值,算术和位运算符

=   +   -   *   /

JS 运算符中描述

条件,比较及逻辑运算符

==   !=  <   > 

JS 比较运算符中描述


4.4 JS关键字

abstract

else

instanceof

super

boolean

enum

int

switch

break

export

interface

synchronized

byte

extends

let

this

case

false

long

throw

catch

final

native

throws

char

finally

new

transient

class

float

null

true

const

for

package

try

continue

function

private

typeof

debugger

goto

protected

var

default

if

public

void

delete

implements

return

volatile

do

import

short

while

double

in

static

with


4.5 JS字母大小写

JavaScript对大小写是敏感的。当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数getElementByIdgetElementbyID是不同的。同样,变量myVariableMyVariable也是不同的。


4.6 JS字符集 

JavaScript使用 Unicode 字符集。Unicode 覆盖了所有的字符,包含标点等字符。

5.JS注释



JavaScript不会执行注释,我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。注释用于阻止其中一条代码行的执行(可用于调试)


5.1 单行注释 


单行注释以 // 开头。

// 输出标题:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落:
document.getElementById("myP").innerHTML="This is my first paragraph.";

5.2 多行注释 

多行注释以 /* 开始,以 */ 结尾。 

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";


5.3 行末注释 

 var length = 16;            // Number 通过数字字面量赋值
  var points = length * 10;   // Number 通过表达式字面量赋值
相关文章
|
5月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
509 108
|
5月前
|
JavaScript 前端开发 开发者
JavaScript中的箭头函数:简洁的语法与this绑定
JavaScript中的箭头函数:简洁的语法与this绑定
474 184
|
7月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
7月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
234 1
|
9月前
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
485 28
|
7月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
8月前
|
JSON 前端开发 Serverless
Mock.js 语法结构全解析
Mock.js 的语法规范介绍,从数据模板定义规范和数据占位符定义规范俩部分介绍, 让你更好的使用 Mock.js 来模拟数据并提高开发效率。
|
8月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
289 0
|
11月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
334 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布