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 通过表达式字面量赋值
相关文章
|
2月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
43 6
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
52 5
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
80 1
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
56 4
|
2月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
107 2
|
2月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
51 4
|
2月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
322 0