JavaScript入門チュートリアル(2) JSの基礎知識_基礎知識

JavaScript を挿入する場所
JavaScript は HTML 内のどこにでも記述できます。 <script>…</script> タグを使用すると、HTML ドキュメント内の任意の場所 ( の前であっても) に JavaScript を挿入できます。ただし、フレームを宣言する Web ページ (フレーム Web ページ) に挿入する場合は、 の前に挿入する必要があります。そうしないと実行されません。
基本形式

コードをコピー コードは次のとおりです:

< ;script>
<--
...
(JavaScript コード)
...
//-->

2 行目と 4 行目は、<script> タグを理解できないブラウザに JavaScript コードを無視させるために使用されます。通常、これは省略できます。スクリプトを理解できないブラウザを探したくても、残念ながら博物館にも誰もいないでしょう。 4行目の前の二重バックスラッシュ「//」はJavaScriptのコメントマークですが、これについては後ほど説明します。 <br><br>JavaScript を挿入するもう 1 つの方法は、JavaScript コードを別のファイル (通常、このファイルには「.js」拡張子が必要です) に書き込み、「<script src=" javascript.js "」という形式を使用することです。 ></script>" タグを使用してドキュメントに埋め込みます。 「」でマークする必要があることに注意してください。
参照 <script> タグには、スクリプトで使用される言語を記述する言語 (lang と略記) という属性もあります。 JavaScript の場合は、「 language="JavaScript"」を使用します。 <BR>参考 <script> タグと比較して、<server> タグもあります。 <server> タグにはサーバー側のスクリプトが含まれます。このチュートリアルでは、クライアント側の JavaScript、つまり <script> タグに含まれるスクリプトについてのみ説明します。 <BR>ブラウザの「アドレス」バーで JavaScript ステートメントを実行する場合は、次の形式を使用します: <BR>javascript:<JavaScript Statement><BR>この形式は接続でも使用できます: <BR> &lt ;a href="javascript:<JavaScript ステートメント>">...</a><br><br><STRONG>JavaScript の基本構文<BR>各 JavaScript 文は次のようなものになります。形式: <BR><Statement><BR> ここで、セミコロン「;」はステートメントを終了する JavaScript 言語識別子です。現在、多くのブラウザでは終了記号としてキャリッジ リターンを使用できますが、セミコロンで終わる習慣を身に付けることは依然として良い習慣です。 <BR>ステートメント ブロック ステートメント ブロックは、中括弧 "{ }" で囲まれた 1 つまたは n 個のステートメントです。中括弧の内側には複数のステートメントがありますが、中括弧の外側ではステートメントのブロックが 1 つのステートメントとして扱われます。ステートメント ブロックはネストすることができます。つまり、ステートメント ブロックに 1 つ以上のステートメント ブロックを含めることができます。 <br><br><STRONG>JavaScript の変数<BR>変数とは文字通り、プログラミングの観点から見ると、変数はメモリの一部の値を格納するために使用されます。 。保存される値は、数値、文字、またはその他のものです。 <BR> 変数の名前付け 変数の名前付けには次の要件があります。 <BR> には文字、数字、またはアンダースコアのみを含めます。<BR> は文字で始める必要があります (実際には長すぎても構いません)。長いものを使用し、臭い名前はどうですか? ); <BR> を JavaScript の予約語で繰り返すことはできません (キーワード、予約語、1 つずつ列挙するには多すぎます。JavaScript コマンドの作成に使用できるすべての単語が予約されています)言葉）。 <BR>さらに、変数は大文字と小文字が区別されます。たとえば、variable と Variable は 2 つの異なる変数です。それだけでなく、ほとんどのコマンドと「オブジェクト」(「オブジェクトベースのプログラミング」の章を参照) では大文字と小文字が区別されます。 <BR>ヒント 変数に名前を付けるときは、「a」、「b」、「c」などの 1 文字の使用を避け、プログラム内での変数の役割を明確に表現できる単語を使用することをお勧めします。こうすることで、他の人があなたのプログラムをより簡単に理解できるだけでなく、将来プログラムを変更するときに変数の役割をすぐに思い出すこともできます。変数名は通常、小文字で構成されます。複数の単語で構成される場合は、最初の単語には小文字を使用し、他の単語の最初の文字には大文字を使用します。例: myVariable と myAnotherVariable。一部の JavaScript コマンド (「コマンド」という言葉については後で詳しく説明します) には、indexOf; charAt などの名前が付けられているため、これは単に美しさと読みやすさを目的として行われます。 <BR>変数は宣言する必要があります。宣言されていない変数は使用できません。宣言されていない場合は、「未定義」というエラーが発生します。変数を宣言するには、以下を使用できます: <BR><br>var <Variable> [= <Value>];<br><br>var 最初に触れるキーワード (つまり、予約語) ）。このキーワードは変数を宣言するために使用されます。最も単純な宣言方法は「var <Variable>;」です。これは、<Variable> 用のメモリを準備し、それに初期値「null」を割り当てます。 「= <value>」を追加すると、<変数> にカスタムの初期値 <value> が割り当てられます。 <br><br>データ型 変数で使用できるデータ型は次のとおりです。 <br>整数型は整数のみを格納できます。正の整数、0、負の整数、10 進数、8 進数、または 16 進数を指定できます。 8進数は数字の前に「0」を付けて表現します。例えば「0123」は8進数の「123」を表します。 16 進数の場合は、「0x」を追加します。「0xEF」は 16 進数の「EF」を表します。<BR>浮点型 即“实型”，能储存小数。有资料显示，某些平台对浮点型变量的支持不稳定。没有需要就不要用浮点型。<BR>字符串型 是用引号“" "”、“' '”包起来的零个至多个字符。用单引号还是双引号由你决定。跟语文一样，用哪个引号开始就用哪个结束，而且单双引号可嵌套使用：'这里是"JavaScript 教程"。' 不过跟语文不同的是，JavaScript 中引号的嵌套只能有一层。如果想再多嵌一些，你需要转义字符：<BR>　　转义字符 由于一些字符在屏幕上不能显示，或者 JavaScript 语法上已经有了特殊用途，在要用这些字符时，就要使用“转义字符”。转义字符用斜杠“”开头：\' 单引号、\" 双引号、 换行符、 回车（以上只列出常用的转义字符）。于是，使用转义字符，就可以做到引号多重嵌套：'Micro 说："这里是\"JavaScript 教程\"。" '<BR>布尔型 常用于判断，只有两个值可选：true（表“真”）和 false（表“假”）。true 和 false 是 JavaScript 的保留字。它们属于“常数”。<BR>对象 关于对象，在“对象化编程”一章将详细讲到。<BR>由于 JavaScript 对数据类型的要求不严格，一般来说，声明变量的时候不需要声明类型。而且就算声明了类型，在过程中还可以给变量赋予其他类型的值。声明类型可以用赋予初始值的方法做到： </script>

var aString = '';

这将把 aString 定义为具有空值的字符串型变量。

var anInteger = 0;

这将把 anInteger 定义为值为 0 的整型。
变量的赋值 一个变量声明后，可以在任何时候对其赋值。赋值的语法是：
<变量> = <表达式>;
其中“=”叫“赋值符”，它的作用是把右边的值赋给左边的变量。下一节将讨论到表达式。

JavaScript常数 有下列几个：

null 一个特殊的空值。当变量未定义，或者定义之后没有对其进行任何赋值操作，它的值就是“null”。企图返回一个不存在的对象时也会出现null值。
NaN “Not a Number”。出现这个数值比较少见，以至于我们可以不理它。当运算无法返回正确的数值时，就会返回“NaN”值。NaN 值非常特殊，因为它“不是数字”，所以任何数跟它都不相等，甚至 NaN 本身也不等于 NaN 。
true 布尔值“真”。用通俗的说法，“对”。
false 布尔值“假”。用通俗的说法，“错”。

在 Math 对象中还有一系列数学常数。这将在讨论“对象化编程”时谈到。

表达式与运算符
表达式 与数学中的定义相似，表达式是指具有一定的值的、用运算符把常数和变量连接起来的代数式。一个表达式可以只包含一个常数或一个变量。运算符可以是四则运算符、关系运算符、位运算符、逻辑运算符、复合运算符。下表将这些运算符从高优先级到低优先级排列：

括号	(x) [x]	中括号只用于指明数组的下标
求反、自加、自减	-x	返回 x 的相反数
	!x	返回与 x (布尔值)相反的布尔值
	x++	x 值加 1，但仍返回原来的 x 值
	x--	x 值减 1，但仍返回原来的 x 值
	++x	x 值加 1，返回后来的 x 值
	--x	x 值减 1，返回后来的 x 值
乘、除	x*y	返回 x 乘以 y 的值
	x/y	返回 x 除以 y 的值
	x%y	返回 x 与 y 的模（x 除以y 的余数）
加、减	x+y	返回 x 加 y 的值
	x-y	返回 x 减 y 的值
关系运算	xx>=y x>y	当符合条件时返回 true 值，否则返回 false 值
等于、 不等于	x==y	当 x 等于 y 时返回 true 值，否则返回 false 值
	x!=y	当 x 不等于 y 时返回 true 值，否则返回 false 值
位与	x&y	当两个数位同时为 1 时，返回的数据的当前数位为 1，其他情况都为 0
位异或	x^y	两个数位中有且只有一个为 0 时，返回 0，否则返回 1
位或	x|y	两个数位中只要有一个为 1，则返回 1；当两个数位都为零时才返回零
位运算符通常会被当作逻辑运算符来使用。它的实际运算情况是：把两个操作数（即 x 和 y）化成二进制数，对每个数位执行以上所列工作，然后返回得到的新二进制数。由于“真”值在电脑内部（通常）是全部数位都是 1 的二进制数，而“假”值则是全部是 0 的二进制数，所以位运算符也可以充当逻辑运算符。
逻辑与	x&&y	当 x 和 y 同时为 true 时返回 true，否则返回 false
逻辑或	x||y	当 x 和 y 任意一个为 true 时返回 true，当两者同时为 false 时返回 false
逻辑与/或有时候被称为“快速与/或”。这是因为当第一操作数（x）已经可以决定结果，它们将不去理会 y 的值。例如，false && y，因为x == false，不管 y 的值是什么，结果始终是 false，于是本表达式立即返回 false，而不论 y 是多少，甚至 y 可以导致出错，程序也可以照样运行下去。
条件	c?x:y	当条件 c 为 true 时返回 x 的值（执行 x 语句），否则返回 y 的值（执行 y 语句）
赋值、 复合运算	x=y	把 y 的值赋给 x，返回所赋的值
	x+=y x-=y x*=y x/=y x%=y	x 与 y 相加/减/乘/除/求余，所得结果赋给 x，并返回 x 赋值后

注意 所有与四则运算有关的运算符都不能作用在字符串型变量上。字符串可以使用 +、+= 作为连接两个字符串之用。

提示 请密切注意运算的优先级。编程时如果不记得运算符的优先级，可以使用括号( )。例如：(a == 0)||(b == 0)。

一些用来赋值的表达式，由于有返回的值，可以加以利用。例如，用以下语句：a = b = c = 10，可以一次对三个变量赋值。

语句
下面将开始讨论 JavaScript 基本编程命令，或者叫“语句”。

注释

像其他所有语言一样，JavaScript 的注释在运行时也是被忽略的。注释只给程序员提供消息。

JavaScript 注释有两种：单行注释和多行注释。单行注释用双反斜杠“//”表示。当一行代码有“//”，那么，“//”后面的部分将被忽略。而多行注释是用“/*”和“*/”括起来的一行到多行文字。程序执行到“/*”处，将忽略以后的所有文字，直到出现“*/”为止。

提示 如果你的程序需要草稿，或者需要让别人阅读，注释能帮上大忙。养成写注释的习惯，能节省你和其他程序员的宝贵时间，使他们不用花费多余的时间琢磨你的程序。在程序调试的时候，有时需要把一段代码换成另一段，或者暂时不要一段代码。这时最忌用 Delete 键，如果想要回那段代码怎么办？最好还是用注释，把暂时不要的代码“隐”去，到确定方法以后再删除也不迟。

if 语句

if ( <条件> ) <语句1> [ else <语句2> ];

本语句有点象条件表达式“?:”：当<条件>为真时执行<语句1>，否则，如果 else 部分存在的话，就执行<语句2>。与“?:”不同的是，if 只是一条语句，不会返回数值。<条件>是布尔值，必须用小括号括起来；<语句1>和<语句2>都只能是一个语句，欲使用多条语句，请用语句块。

注意 请看下例：

if (a == 1)<br>  if (b == 0) alert(a+b);<br>else<br>  alert(a-b);

本代码企图用缩进的方法说明 else 是对应 if (a == 1) 的，但是实际上，由于 else 与 if (b == 0) 最相近，本代码不能按作者的想法运行。正确的代码是

if (a == 1) {<br>  if (b == 0) alert(a+b);<br>} else {<br>  alert(a-b);<br>}

提示 一行代码太长，或者涉及到比较复杂的嵌套，可以考虑用多行文本，如上例，if (a == 1) 后面没有立即写上语句，而是换一行再继续写。浏览器不会混淆的，当它们读完一行，发现是一句未完成语句，它们会继续往下读。使用缩进也是很好的习惯，当一些语句与上面的一两句语句有从属关系时，使用缩进能使程序更易读，方便程序员进行编写或修改工作。

循环体

for (<变量>=<初始值>; <循环条件>; <变量累加方法>) <语句>;

本语句的作用是重复执行<语句>，直到<循环条件>为 false 为止。它是这样运作的：首先给<变量>赋<初始值>，然后*判断<循环条件>（应该是一个关于<变量>的条件表达式）是否成立，如果成立就执行<语句>，然后按<变量累加方法>对<变量>作累加，回到“*”处重复，如果不成立就退出循环。这叫做“for循环”。下面看看例子。

for (i = 1; i < 10; i++) document.write(i);

このステートメントは、最初に初期値 1 を i に割り当て、次に document.write(i) ステートメントを実行します (この機能は i の値をドキュメントに書き込むことです。「オブジェクトベース プログラミング」の章を参照してください)。 i が繰り返される場合、i < 10 が満たされなくなるまで、つまり i > = 10 になるまで i は Add 1 のループになります。結果は「123456789」がドキュメントに出力されます。

if ステートメントと同様に、 は 1 行のステートメントのみにすることができます。複数のステートメントを使用する場合は、ステートメント ブロックを使用する必要があります。

他の言語とは異なり、JavaScript の for ループでは、ループ変数をループするたびに 1 ずつ増分または減分する必要があるとは規定されていません。 には、i =3 などの任意の代入式を使用できます。 、i*=2、i-=j などはすべて true です。

ヒント for ループを適切に使用すると、HTML ドキュメント内の多数の定期的に繰り返される部分を簡素化できます。つまり、Web ページのダウンロード速度を向上させるという目的を達成するために、for ループを使用していくつかの HTML コードを繰り返し記述します。ただし、Web ページをアップロードする前に、Netscape で厳密なテストを繰り返し、合格することを確認してください。著者は、for ループを使用してドキュメントに HTML コードを繰り返し書き込むことで、Netscape を「突然停止」させることを何度も試みてきました。 IE ではこのようなことは絶対に起こりません。IE で見るだけの Web サイトであれば、for をたくさん使っても問題ありません。

for ループに加えて、JavaScript には while ループも用意されています。

while (<循环条件>) <语句>;

は、for ループよりも単純で、 を実行します。 while ループの累積的な性質は、for ループの累積的な性質ほど強くありません。 は 1 つのステートメントのみですが、特定のステートメントを繰り返し実行するだけでなく、 ステートメントに含まれる変数の値も変更する必要があるため、通常はステートメント ブロックが使用されます。このループに一度足を踏み入れてしまうと、必ず条件が満たされてしまうためループから抜け出すことができなくなります。この状況は、私たちが「無限ループ」と呼んでいるものです。無限ループは、その時点で実行中のコードやダウンロード中のドキュメントを停止し、大量のメモリを占有して、クラッシュを引き起こす可能性があるため、できるだけ回避する必要があります。

中断して続行

ループ本体では、ループからすぐに抜け出すか、ループ本体内の残りのコードをスキップして続行する必要がある場合があります。次のループへ。休憩と継続は私たちを大いに助けてくれます。

break;

このステートメントはループ本体に配置され、その機能はループから直ちに抜け出すことです。

continue;

このステートメントはループ本体に配置され、その機能はこのループを終了し、次のループを実行することです。ループの条件が満たされなくなった場合は、ループから抜け出します。

例

コードをコピー コードは次のとおりです。

for (i = 1; i < 10; i ) {
if (i == 3 || i == 5 || i == 8)
document.write(i); 🎜>

出力: 124679。

switch ステートメント

データを分類したい場合、たとえば生徒の成績を優、良、中、劣に分類したい場合、 if ステートメントを使用できます:

コードをコピー コードは次のとおりです。if (スコア >= 0 && スコア 結果 = '不合格';

} else if (スコア 結果 = '合格'
} else if (スコア 結果 = '良い';
} else if (スコア 結果 = '素晴らしい';
} else {
結果 = 'エラー'; 🎜>}



これで問題ないようですが、if 文が多すぎるとプログラムが少し乱雑になります。 switch ステートメントは、この問題を解決する最良の方法です。

switch (e) { case r1: (注: コロン)

...

[break;] case r2:switch (e) {<br>  case r1: （注意：冒号）<br>    ...<br>    [break;]<br>  case r2:<br>    ...<br>    [break;]<br>  ...<br>  [default:<br>    ...]<br>} ...
[break;] ...

[default:
...]
}

この長い段落関数は次のとおりです。 e (e は式) の値を計算し、以下の "case" の後の r1、r2... と比較します。 e と等しい値が見つかった場合、"case" の後のステートメントは次のようになります。 Break ステートメントまたは switch 段落 ("}") の終わりまで実行されます。 e に一致する値がない場合、「default:」に続くステートメントが実行されます。default ブロックがない場合、switch ステートメントは終了します。 上記の if セクションは switch で書き換えることができます。

コードをコピー コードは次のとおりです:

switch (parseInt(score / 10)) {
ケース 0:
ケース 1:
ケース 2:
ケース 3:
ケース 4:
ケース5:
結果 = '失敗';
ケース 6:
ケース 7:
結果 = '合格';
ケース 8:
>結果 = '良い';
ケース 9:
結果 = '優れた';
デフォルト:
if (スコア == 100) result = 'excellent';
else
result = 'error';



parseInt() メソッドは後で紹介します。その関数は丸めです。 。最後のデフォルトセクションで使用されている if ステートメントは、100 ポイントをエラーとして扱うことを避けるためのものです (parseInt(100 / 10) == 10)。