JavaScript(一)基础——简介,使用,输出,语句,关键词,运算符

简介: 1. JavaScript对网页行为进行编程2. JavaScript 能够改变 HTML 内容```css getElementById() 是多个 JavaScript HTML 方法之一

@[TOC](JavaScript基础

一、简介

  1. JavaScript对网页行为进行编程
  2. JavaScript 能够改变 HTML 内容
  getElementById()   是多个 JavaScript HTML 方法之一

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

  1. JS能改变HTML 属性

二、使用

  1. JavaScript代码必须位于<script></script>之间
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>
  1. JavaScript 函数是一种 JavaScript 代码块,可以在调用时被执行。

​ 例:当发生事件时调用函数,或当用户点击按钮时。

  1. 可以被放在<head><body>中或兼而有之
  2. 外部脚本
外部文件:myScript.js
           扩展名 .js

如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称:

添加多个脚本文件 - 请使用多个 script 标签

<script src="myScript.js"></script>
  • 外部脚本不能包含<script>标签

    5、外部引用:

    ​ 通过完整的 URL 或相对于当前网页的路径引用外部脚本

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

三、输出

1.使用 innerHTML
访问 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容:

2.使用 document.write()

(1)用于测试的话,使用 document.write() 比较方便
例:

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>document.write(5 + 6);</script>
</body>
</html> 

(2)在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

3.使用 window.alert()

​ 使用警告框来显示数据:

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>window.alert(5 + 6);</script>
</body>
</html> 

结果:
在这里插入图片描述

4、使用 console.log()

在浏览器中,您可使用 console.log() 方法来显示数据。
可以通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”。

四、JS语句

JavaScript 语句由以下构成:值、运算符、表达式、关键词和注释

  1. 分号分隔 JavaScript 语句。

    • 在每条可执行的语句之后添加分号
    • 如果有分号分隔,允许在同一行写多条语句

2.JavaScript 代码块

JavaScript 语句可以用花括号({...})组合在代码块中。
代码块的作用是定义一同执行的语句。
3.JavaScript 关键词
JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作
在这里插入图片描述

五、关键词

1.Let

(1)可以使用 let 关键词声明拥有块作用域的变量。

 在块 {} 内声明的变量无法从块外访问

(2) 使用 let 关键字在块内重新声明变量不会重新声明块外的变量

(3) 在循环作用域中使用let并没有重新声明循环外的变量

(4) 在函数内声明变量时,使用var和let相似,都有函数作用域

 在块外声明变量时,使用var和let相似,都有全局作用域

( 5)重新声明

  • 允许在程序的任何位置使用 var 重新声明 JavaScript 变量
  • 在相同的作用域,或在相同的块中,通过 let 重新声明一个 var 变量是不允许
  • 在相同的作用域,或在相同的块中,通过 let 重新声明一个 let 变量是不允许
实例
let x = 10;       // 允许
let x = 6;       // 不允许
{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}
  • 在相同的作用域,或在相同的块中,通过 var 重新声明一个 let 变量是不允许的
  • 在不同的作用域或块中,通过 let 重新声明变量是允许的

2.const

(1)在声明时赋值
JavaScript const 变量必须在声明时赋值:

(2)不是真正的常数

关键字 const 有一定的误导性。它没有定义常量值。它定义了对值的常量引用。

因此,我们不能更改常量原始值,但我们可以更改常量对象的属性。

:如果我们将一个原始值赋给常量,我们就不能改变原始值:

(3)常量对象可以更改

       可以更改常量对象的属性:

(4)常量数组可以更改

(5)重新声明

  • 在程序中的任何位置都允许重新声明 JavaScript var 变量:
  • 在同一作用域或块中,不允许将已有的 var 或 let 变量重新声明或重新赋值给 const:
  • 在同一作用域或块中,为已有的 const 变量重新声明声明或赋值是不允许的:
  • 在另外的作用域或块中重新声明 const 是允许的:
例:
const x = 2;       // 允许
{
 const x = 3;   // 允许
}
{
 const x = 4;   // 允许
}

六、运算符

(1)JavaScript 算数运算符
算数运算符用于对数字执行算数运算:

运算符 描述
+ 加法
- 减法
* 乘法
/ 除法
% 取模(余数)
++ 递加
-- 递减

(2)JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符 例子 等同于
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

加法赋值运算符(+=)向变量添加一个值。

(3)JavaScript 字符串运算符

+ 运算符也可用于对字符串进行相加(concatenate,级联)。

+= 赋值运算符也可用于相加(级联)字符串:

(4)字符串和数字的相加

相加两个数字,将返回和,但对一个数字和一个字符串相加将返回一个字符串
(5)JavaScript 比较运算符

运算符 描述
== 等于
=== 等值等型
!= 不相等
!== 不等值或不等型
> 大于
< 小于
>= 大于或等于
<= 小于或等于
? 三元运算符

(6)JavaScript 逻辑运算符

运算符 描述
&& 逻辑与
\ \ 逻辑或
! 逻辑非

(7)JavaScript 类型运算符

运算符 描述
typeof 返回变量的类型。
instanceof 返回 true,如果对象是对象类型的实例。
目录
相关文章
|
16天前
|
存储 JavaScript NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
45 9
|
2月前
|
JavaScript
js运算符
js运算符
23 5
|
3月前
|
JavaScript 前端开发
JavaScript简介
JavaScript简介
|
2月前
|
JavaScript 前端开发
JavaScript 运算符全知道
JavaScript 运算符全知道
57 0
|
2月前
|
Web App开发 JavaScript 前端开发
JavaWeb 22.Node.js_简介和安装
JavaWeb 22.Node.js_简介和安装
|
3月前
|
JavaScript 前端开发
JavaScript 运算符
JavaScript 运算符
23 3
|
4月前
|
JavaScript 前端开发
JavaScript 中的 typeof 运算符
【8月更文挑战第29天】
27 1
|
4月前
|
JavaScript 前端开发 安全
深入理解JavaScript中的比较运算符
深入理解JavaScript中的比较运算符
|
4月前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
4月前
|
JavaScript 前端开发
JS常见的运算符有哪些?
JS常见的运算符有哪些?