MENU

JavaScript笔记(2)

2019 年 09 月 22 日 • 默认分类

JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数。 JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据:

  • 使用 window.alert() 写入警告框
  • 使用confirm()写入一个带按钮的弹窗
  • 使用prompt()写入一个用户可以自定义输入文本的弹窗
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

下述介绍一些输出的方式

使用 innerHTML

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

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

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <h1>
        输出也能实现简单的计算,类似于PHP
    </h1>
    <div>
        1 + 1 = <div id="test" style="display: inline;"></div>
    </div>

    <script>
        document.getElementById("test").innerHTML = 1 + 1
    </script>
</body>
  • 除了插入标签和内容外,JS还能类似于PHP进行数字的计算。不添加双引号
  • 更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

使用 document.write()

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <h1>
        输出也能实现简单的计算,类似于PHP
    </h1>
    <div>
        1 + 1 = <div id="test" style="display: inline;"></div>
    </div>

    <script>
        document.write(1 + 1)
    </script>
</body>
  • document.write(1 + 1)没有innerHTML常用,并且功能要简单的多。
  • document.write() 方法仅用于测试。
  • 因为 document.write 需要向文档中写入内容,所以,若在一个已关闭(例如,已完成加载)的文档上调用 document.write,就会自动调用 document.open这将清空该文档的内容

关于document.write

向一个已经加载,并且没有调用过 document.open() 的文档写入数据时,会自动调用 document.open。一旦完成了数据写入,建议调用 document.close(),以告诉浏览器当前页面已经加载完毕。写入的数据会被解析到文档结构模型(DOM)里。在上面的例子里,元素 h1 会成为文档中的一个节点。

如果 document.write() 调用发生在 HTML 里的 <script> 标签中,那么它将不会自动调用 document.open()。详见如下例子:

<script>
  document.write("<h1>Main title</h1>")
</script>

注意:

  • document.writedocument.writeln 在 XHTML 文档中不可用(控制台上会显示 "Operation is not supported"[NS_ERROR_DOM_NOT_SUPPORTED_ERR] 的报错信息)。 当打开本地的 .xhtml 格式的文件或任何其他 MIME 类型application/xhtml+xml 的文档时,均会报错。更多信息可查看 W3C XHTML FAQ
  • 在有deferredasynchronous 属性的 script 中,document.write 会被忽略,控制台会显示 "A call to document.write() from an asynchronously-loaded external script was ignored" 的报错信息。
  • 在 Edge 中,在 iframe 内部调用 document.write 多于一次时会引发错误 SCRIPT70: Permission denied。
  • 从 Chrome 55 开始,Chrome(可能)不会运行通过 document.write() 注入的<script>,以防止使用 2G 连接的用户找不到 HTTP 缓存。前往此链接查看这种情况发生需要满足的条件。

使用 window.alert()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <h1>
        输出也能实现简单的计算,类似于PHP
    </h1>
    <div>
        1 + 1 = <div id="test" style="display: inline;"></div>
    </div>
    <button type="button" onclick="calcFunction()">
        计算结果
    </button>
    <script>
        function calcFunction(){
            window.alert(1 + 1)
        }
    </script>
</body>
</html>

window.alert能够在浏览器创建一个弹窗。

使用 confirm()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <input type="button" onclick="show_confirm()" value="Press it">
    <script>
        function show_confirm(){
            var r = confirm("Press a button")
            if (r==true)
            {
                alert("You pressed the OK")
            }
            else{
                alert("no OK")
            }
        }
    </script>
</body>
</html>

语法:

confirm(message)

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。

在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。

对话框按钮的文字是不可改变的,因此请小心地编写问题或消息,使它适合用确认和取消来回答。

使用 prompt()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <input type="button" onclick="show_prompt()" value="enter your name">
    <h2 id="n"></h2>
    <script>
        function show_prompt(){
            var name = prompt("enter your name","小肥羊")
            if (name!=null && name!=""){
                document.getElementById("n").innerHTML = "hello" + name + "!"
            }
        }
    </script>
</body>
</html>

语法:

prompt(text,defaultText)
参数描述
text可选。要在对话框中显示的纯文本(而不是 HTML 格式的文本)。
defaultText可选。默认的输入文本。

如果用户单击提示框的取消按钮,则返回 null。如果用户单击确认按钮,则返回输入字段当前显示的文本。

在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 prompt() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。

使用 console.log()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <h1>
        JavaScript也能实现简单的计算,类似于PHP
    </h1>
    <div>
        1 + 1 = <div id="test" style="display: inline;"></div>
    </div>
    <script>
        console.log(1+1)
    </script>
</body>
</html><!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<title>this is a test program</title>
<body>
    <h1>
        JavaScript也能实现简单的计算,类似于PHP
    </h1>
    <div>
        1 + 1 = <div id="test" style="display: inline;"></div>
    </div>
    <script>
        console.log(1+1)
    </script>
</body>

console.log就是我们常用的在浏览器的控制台中显示的内容,通常用来显示一些log。现在喜欢被玩输出各种有意思的东西。

JavaScript 语句

在 HTML 中,JavaScript 语句是由 web 浏览器“执行”的“指令”。

例如:

var x, y, z    // 语句 1
x = 22        // 语句 2
y = 11        // 语句 3
z = x + y    // 语句 4

计算机程序是由计算机“执行”的一系列“指令”。在编程语言中,这些编程指令被称为语句。JavaScript 程序就是一系列的编程语句。而在html中JavaScript 程序由 web 浏览器执行 (解释)

JavaScript 语句由以下构成:

  • 运算符
  • 表达式
  • 关键词
  • 注释

大多数 JavaScript 程序都包含许多 JavaScript 语句。这些语句会按照它们被编写的顺序逐一执行。

JavaScript 程序(以及 JavaScript 语句)常被称为 JavaScript 代码。

分号

在多数编程语言中都能够见到在一个语句结尾处用分号分隔。JavaScript也不例外,但是它的编译器会为我们自动填补分号。w3school也推荐我们养成写分号的习惯。

在我看来要么整个代码全部都写分号,要么就全部都不写。

a = 5
b = 6
c = a + b

编译器会在换行时为我们填补分号。所以有了分号就可以写在一行

a = 5; b = 6; c = a + b

空白字符

JavaScript 会忽略多个空格 (html) 。可以向脚本添加空格,以增强可读性。

比如这两行就是相等的:

var person = "Bill"
var person="Bill"

在运算符旁边( = + - * / )添加空格是个好习惯:

var x = y + z

行长度和折行

为了达到最佳的可读性,程序员们常常喜欢把代码行控制在 80 个字符以内。如果 JavaScript 语句太长,对其进行折行的最佳位置是某个运算符:

document.getElementById("demo").innerHTML =
 "Hello Kitty.";
  • 折行的最佳位置是运算符或逗号之后。

代码块

JavaScript 语句可以用花括号({...})组合在代码块中。代码块的作用是定义一同执行的语句。

通常会在 JavaScript 中看到成块组合在一起的语句:

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Kitty."
    document.getElementById("myDIV").innerHTML = "How are you?"
}
  • Javascript 代码块在 { 与 } 之间编写。

关键词

JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。JavaScript 关键字用于标识要执行的操作。和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。

一些常见到的关键字:

关键词描述
break终止 switch 或循环。
continue跳出循环并在顶端开始。
debugger停止执行 JavaScript,并调用调试函数(如果可用)。
do ... while执行语句块,并在条件为真时重复代码块。
for标记需被执行的语句块,只要条件为真。
function声明函数。
if ... else标记需被执行的语句块,根据某个条件。
return退出函数。
switch标记需被执行的语句块,根据不同的情况。
try ... catch对语句块实现错误处理。
var声明变量。
  • JavaScript 关键词指的是保留的单词。和其他多数语言一样,保留词无法用作变量名

JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。

以下是 JavaScript 中最重要的保留字(按字母顺序):

abstractelseinstanceofsuper
booleanenumintswitch
breakexportinterfacesynchronized
byteextendsletthis
casefalselongthrow
catchfinalnativethrows
charfinallynewtransient
classfloatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debuggergotoprotectedvar
defaultifpublicvoid
deleteimplementsreturnvolatile
doimportshortwhile
doubleinstaticwith

JavaScript 语法

JavaScript 是一个脚本语言。它是一个轻量级,但功能强大的编程语言。它与多数的编程语言类似,也拥有语法以及数据类型。这是多数语言的共同点。

字面量

字面量是由语法表达式定义的常量;或,通过由一定字词组成的语词表达式定义的常量

在JavaScript中,你可以使用各种字面量。这些字面量是脚本中按字面意思给出的固定的值,而不是变量。(译注:字面量是常量,其值是固定的,而且在程序脚本运行中不可更改,比如false,3.1415,thisIsStringOfHelloworld ,invokedFunction: myFunction("myArgument")。

在编程语言中,一般固定值称为字面量,如 3.14。

数字(Number)字面量 可以是诸如:整数、浮点数以及字符串,或者是科学计数(e)。

<script>
    document.getElementById("demo").innerHTML = 3.1415
</script>

字符串(String)字面量 可以使用单引号或双引号

<script>
    document.getElementById("demo").innerHTML = '喵喵喵'
    document.getElementById("demo").innerHTML = "Defectink"
</script>

表达式字面量 用于计算:

<script>
    document.getElementById("h1").innerHTML = 3.14 * 2
</script>

数组(Array)字面量 定义一个数组:

[40, 100, 1, 5, 25, 10]

数组字面值同时也是数组对象。有关数组对象的详情请参见数组对象一文。

声明时不必列举数组字面值中的所有元素。若在同一行中连写两个逗号(,),数组中就会产生一个没有被指定的元素,其初始值是undefined。以下示例创建了一个名为fish的数组:

var fish = ["Lion", , "Angel"];

对象(Object)字面量 定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}

变量

在编程语言中,变量用于存储数据值。

JavaScript 是区分大小写的,并使用 Unicode 字符集。举个例子,可以将单词 Früh (在德语中意思是“早”)用作变量名。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

    <h1 id="h1">
    </h1>
    <script>
        var xxx
        var zzz = 1
        xxx = 3.14
        document.getElementById("h1").innerHTML = xxx + zzz
    </script>

变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。

变量是一个名称。字面量是一个

JavaScript有三种声明方式。

声明一个变量,可选初始化一个值。
声明一个块作用域的局部变量,可选初始化一个值。
声明一个块作用域的只读常量。

变量的命名规则:

变量名称可以使用字母、数字、下划线、美元符号,其中不能以数字开头

不能使用关键字和保留字

  • empName
  • empSex
  • empSalary
  • user_name
  • _userpass

可以为变量多次赋值,并且赋不同类型的值(弱类型语言特点之一)

var y;

变量只是声明未赋值,此时的值为undefined

一次性声明多个变量:

var a=1,b=2,c;

多个变量之间使用逗号隔开。

常量

const pi=3.14;

常量与变量声明类似,但常量声明之后不允许重新赋值。并且一旦声明就必须要赋值。

操作符

JavaScript 拥有二元和一元运算符, 和一个特殊的三元运算符(条件运算符)。

一个二元运算符需要两个操作数,分别在运算符的前面和后面:

操作数1 运算符 操作数2

例如, 3+4x*y

一个一元运算符需要一个操作数,在运算符前面或后面:

运算符 操作数

操作数 运算符

例如, x++++x

JS拥有很多类型运算符。

常见的有:

<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>

或者赋值运算

<script>
var x, y, z;
x = 5;
y = 6;
z = (x + y) * 10;
document.getElementById("demo").innerHTML = z;
</script>

注释

不是所有的 JavaScript 语句都是"命令",Javascript 注释的语法和 C++ 或许多其他语言类似:

// 单行注释

/* 这是一个更长的,
   多行注释
*/

/* 然而, 你不能, /* 嵌套注释 */ 语法错误 */

数据类型

最新的 ECMAScript 标准定义了8种数据类型:

  • 七种基本数据类型:

    • 布尔值(Boolean),有2个值分别是:truefalse.
    • null , 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的,因此 nullNullNULL或变体完全不同。
    • undefined ,和 null 一样是一个特殊的关键字,undefined 表示变量未定义时的属性。
    • 数字(Number),整数或浮点数,例如: 42 或者 3.14159
    • 任意精度的整数 (BigInt) ,可以安全地存储和操作大整数,甚至可以超过数字的安全整数限制。
    • 字符串(String),字符串是一串表示文本值的字符序列,例如:"Howdy" 。
    • 代表(Symbol) ( 在 ECMAScript 6 中新添加的类型).。一种实例是唯一且不可改变的数据类型。
  • 以及对象(Object)。

对象(Objects)和函数(functions)是这门语言的另外两个基本元素。可以把对象当作存放值的一个命名容器,然后将函数当作你的程序能够执行的步骤。

var bool = true;
var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

数据类型的转换

JavaScript是一种动态类型语言(dynamically typed language)。这意味着在声明变量时可以不必指定数据类型,而数据类型会在代码执行时会根据需要自动转换。因此,可以按照如下方式来定义变量:

var answer = 42;

然后,你还可以给同一个变量赋予一个字符串值,例如:

answer = "Thanks for all the fish...";

因为 JavaScript 是动态类型的,这种赋值方式并不会提示出错。

在包含的数字和字符串的表达式中使用加法运算符(+),JavaScript 会把数字转换成字符串。

x = "The answer is " + 42 // "The answer is 42"
y = 42 + " is the answer" // "42 is the answer"

在涉及其它运算符(译注:如下面的减号'-')时,JavaScript语言不会把数字变为字符串。

(第一例是数学运算,第二例是字符串运算):

"37" - 7 // 30
"37" + 7 // "377"

将引号去除,加号便为数学运算:

37 + 7 // 44

或者使用括号类结合数学运算与字符串运算:

var a = 1; console.log("a+1=" + a + 1); //a+1=11
var a = 1; console.log("a+1=" + (a + 1)); //a+1=2

当只是字符串,而不是变量时,就直接为数学运算:

console.log(16 + 1 + "Volvo") //17Volvo

转换字符为数字

将字符串转换为数字的一种方法是使用一元加法运算符

"1.1" + "1.1" = "1.11.1"
(+"1.1") + (+"1.1") = 2.2   
// 注意:加入括号为清楚起见,不是必需的。

数字+布尔值,布尔值将变成数字与数字相加:

3+true //4

字符串+布尔值,布尔值将变成字符串与字符串相连:

'3'+true  //3true

练习稿

推荐的扩展阅读

偶然发现MDN讲的是非常的详细。

最后编辑于: 2019 年 10 月 12 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论