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 通过表达式字面量赋值
相关文章
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
11月前
|
安全 关系型数据库 测试技术
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
214 61
|
6月前
|
JavaScript 前端开发 API
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
178 0
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5887 24
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
203 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
9月前
|
安全 Java 数据安全/隐私保护
springSecurity学习之springSecurity过滤web请求
通过配置 Spring Security 的过滤器链,开发者可以灵活地管理 Web 请求的安全性。理解核心过滤器的作用以及如何配置和组合这些过滤器,可以帮助开发者实现复杂的安全需求。通过具体的示例代码,可以清晰地了解 Spring Security 的配置方法和实践。
407 23
|
9月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
443 26