ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScipt 基本チュートリアル: JavaScript 言語の基礎_基礎知識

JavaScipt 基本チュートリアル: JavaScript 言語の基礎_基礎知識

WBOY
WBOYオリジナル
2016-05-16 19:06:35730ブラウズ
在什么地方插入 JavaScript
  JavaScript 可以出现在 HTML 的任意地方。使用标记<script>…</script>,你可以在 HTML 文档的任意地方插入 JavaScript,甚至在之前插入也不成问题。不过如果要在声明框架的网页(框架网页)中插入,就一定要在之前插入,否则不会运行。
基本格式
<script><br><!--<BR>...<BR>(JavaScript代码)<BR>...<BR>//--><br></script>
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 对数据类型的要求不严格,一般来说,声明变量的时候不需要声明类型。而且就算声明了类型,在过程中还可以给变量赋予其他类型的值。声明类型可以用赋予初始值的方法做到: <DIV class=blockcode><FONT face=NSimsun><CODE id=code1>var aString = '';&lt;BR&gt;这将把 aString 定义为具有空值的字符串型变量。 &lt;DIV class=blockcode&gt;&lt;FONT face=NSimsun&gt;&lt;CODE id=code2&gt;var anInteger = 0;&lt;BR&gt;这将把 anInteger 定义为值为 0 的整型。&lt;BR&gt;变量的赋值 一个变量声明后,可以在任何时候对其赋值。赋值的语法是:&lt;BR&gt;&lt;变量&gt; = &lt;表达式&gt;;&lt;BR&gt;其中“=”叫“赋值符”,它的作用是把右边的值赋给左边的变量。下一节将讨论到表达式。 &lt;br&gt;&lt;br&gt;JavaScript常数 有下列几个:&lt;br&gt;&lt;br&gt;null 一个特殊的空值。当变量未定义,或者定义之后没有对其进行任何赋值操作,它的值就是“null”。企图返回一个不存在的对象时也会出现null值。&lt;BR&gt;NaN “Not a Number”。出现这个数值比较少见,以至于我们可以不理它。当运算无法返回正确的数值时,就会返回“NaN”值。NaN 值非常特殊,因为它“不是数字”,所以任何数跟它都不相等,甚至 NaN 本身也不等于 NaN 。&lt;BR&gt;true 布尔值“真”。用通俗的说法,“对”。&lt;BR&gt;false 布尔值“假”。用通俗的说法,“错”。&lt;br&gt;&lt;br&gt;在 Math 对象中还有一系列数学常数。这将在讨论“对象化编程”时谈到。&lt;br&gt;&lt;br&gt;&lt;STRONG&gt;表达式与运算符&lt;BR&gt;表达式 与数学中的定义相似,表达式是指具有一定的值的、用运算符把常数和变量连接起来的代数式。一个表达式可以只包含一个常数或一个变量。运算符可以是四则运算符、关系运算符、位运算符、逻辑运算符、复合运算符。下表将这些运算符从高优先级到低优先级排列:&lt;BR&gt; &lt;TABLE class=t_table style=&quot;WIDTH: 0px&quot; cellSpacing=0&gt; &lt;TBODY&gt; &lt;TR&gt; &lt;TD width=60&gt;括号 &lt;TD width=120&gt;(x) [x] &lt;TD width=400&gt;中括号只用于指明&lt;STRONG&gt;数组的&lt;STRONG&gt;下标 &lt;TR&gt; &lt;TD rowSpan=6&gt;求反、自加、自减 &lt;TD&gt;-x &lt;TD&gt;返回 x 的相反数 &lt;TR&gt; &lt;TD&gt;!x &lt;TD&gt;返回与 x (布尔值)相反的布尔值 &lt;TR&gt; &lt;TD&gt;x++ &lt;TD&gt;x 值加 1,但仍返回原来的 x 值 &lt;TR&gt; &lt;TD&gt;x-- &lt;TD&gt;x 值减 1,但仍返回原来的 x 值 &lt;TR&gt; &lt;TD&gt;++x &lt;TD&gt;x 值加 1,返回后来的 x 值 &lt;TR&gt; &lt;TD&gt;--x &lt;TD&gt;x 值减 1,返回后来的 x 值 &lt;TR&gt; &lt;TD rowSpan=3&gt;乘、除 &lt;TD&gt;x*y &lt;TD&gt;返回 x 乘以 y 的值 &lt;TR&gt; &lt;TD&gt;x/y &lt;TD&gt;返回 x 除以 y 的值 &lt;TR&gt; &lt;TD&gt;x%y &lt;TD&gt;返回 x 与 y 的模(x 除以y 的余数) &lt;TR&gt; &lt;TD rowSpan=2&gt;加、减 &lt;TD&gt;x+y &lt;TD&gt;返回 x 加 y 的值 &lt;TR&gt; &lt;TD&gt;x-y &lt;TD&gt;返回 x 减 y 的值 &lt;TR&gt; &lt;TD&gt;关系运算 &lt;TD&gt;x&lt;y x&lt;=y&lt;BR&gt;x&gt;=y x&gt;y &lt;TD&gt;当符合条件时返回 true 值,否则返回 false 值 &lt;TR&gt; &lt;TD rowSpan=2&gt;等于、&lt;BR&gt;不等于 &lt;TD&gt;x==y &lt;TD&gt;当 x 等于 y 时返回 true 值,否则返回 false 值 &lt;TR&gt; &lt;TD&gt;x!=y &lt;TD&gt;当 x 不等于 y 时返回 true 值,否则返回 false 值 &lt;TR&gt; &lt;TD&gt;位与 &lt;TD&gt;x&amp;y &lt;TD&gt;当两个数位同时为 1 时,返回的数据的当前数位为 1,其他情况都为 0 &lt;TR&gt; &lt;TD&gt;位异或 &lt;TD&gt;x^y &lt;TD&gt;两个数位中有且只有一个为 0 时,返回 0,否则返回 1 &lt;TR&gt; &lt;TD&gt;位或 &lt;TD&gt;x|y &lt;TD&gt;两个数位中只要有一个为 1,则返回 1;当两个数位都为零时才返回零 &lt;TR&gt; &lt;TD colSpan=3&gt;位运算符通常会被当作逻辑运算符来使用。它的实际运算情况是:把两个操作数(即 x 和 y)化成二进制数,对每个数位执行以上所列工作,然后返回得到的新二进制数。由于“真”值在电脑内部(通常)是全部数位都是 1 的二进制数,而“假”值则是全部是 0 的二进制数,所以位运算符也可以充当逻辑运算符。 &lt;TR&gt; &lt;TD&gt;逻辑与 &lt;TD&gt;x&amp;&amp;y &lt;TD&gt;当 x 和 y 同时为 true 时返回 true,否则返回 false &lt;TR&gt; &lt;TD&gt;逻辑或 &lt;TD&gt;x||y &lt;TD&gt;当 x 和 y 任意一个为 true 时返回 true,当两者同时为 false 时返回 false &lt;TR&gt; &lt;TD colSpan=3&gt;逻辑与/或有时候被称为“快速与/或”。这是因为当第一操作数(x)已经可以决定结果,它们将不去理会 y 的值。例如,false &amp;&amp; y,因为x == false,不管 y 的值是什么,结果始终是 false,于是本表达式立即返回 false,而不论 y 是多少,甚至 y 可以导致出错,程序也可以照样运行下去。 &lt;TR&gt; &lt;TD&gt;条件 &lt;TD&gt;c?x:y &lt;TD&gt;当条件 c 为 true 时返回 x 的值(执行 x 语句),否则返回 y 的值(执行 y 语句) &lt;TR&gt; &lt;TD rowSpan=2&gt;赋值、&lt;BR&gt;复合运算 &lt;TD&gt;x=y &lt;TD&gt;把 y 的值赋给 x,返回所赋的值 &lt;TR&gt; &lt;TD&gt;x+=y x-=y x*=y&lt;BR&gt;x/=y x%=y &lt;TD&gt;x 与 y 相加/减/乘/除/求余,所得结果赋给 x,并返回 x 赋值后&lt;br&gt;&lt;br&gt;&lt;I&gt;注意 所有与四则运算有关的运算符都不能作用在字符串型变量上。字符串可以使用 +、+= 作为连接两个字符串之用。&lt;br&gt;&lt;br&gt;&lt;I&gt;提示 请密切注意运算的优先级。编程时如果不记得运算符的优先级,可以使用括号( )。例如:(a == 0)||(b == 0)。&lt;br&gt;&lt;br&gt;一些用来赋值的表达式,由于有返回的值,可以加以利用。例如,用以下语句:a = b = c = 10,可以一次对三个变量赋值。&lt;br&gt;&lt;br&gt;&lt;STRONG&gt;语句&lt;BR&gt;下面将开始讨论 JavaScript 基本编程命令,或者叫“语句”。&lt;br&gt;&lt;br&gt;&lt;I&gt;注释&lt;br&gt;&lt;br&gt;像其他所有语言一样,JavaScript 的注释在运行时也是被忽略的。注释只给程序员提供消息。&lt;br&gt;&lt;br&gt;JavaScript 注释有两种:单行注释和多行注释。单行注释用双反斜杠“//”表示。当一行代码有“//”,那么,“//”后面的部分将被忽略。而多行注释是用“/*”和“*/”括起来的一行到多行文字。程序执行到“/*”处,将忽略以后的所有文字,直到出现“*/”为止。&lt;br&gt;&lt;br&gt;提示 如果你的程序需要草稿,或者需要让别人阅读,注释能帮上大忙。养成写注释的习惯,能节省你和其他程序员的宝贵时间,使他们不用花费多余的时间琢磨你的程序。在程序调试的时候,有时需要把一段代码换成另一段,或者暂时不要一段代码。这时最忌用 Delete 键,如果想要回那段代码怎么办?最好还是用注释,把暂时不要的代码“隐”去,到确定方法以后再删除也不迟。&lt;br&gt;&lt;br&gt;&lt;I&gt;if 语句 &lt;DIV class=blockcode&gt;&lt;FONT face=NSimsun&gt;&lt;CODE id=code3&gt;if ( &lt;条件&gt; ) &lt;语句1&gt; [ else &lt;语句2&gt; ];&lt;BR&gt;本语句有点象条件表达式“?:”:当&lt;条件&gt;为真时执行&lt;语句1&gt;,否则,如果 else 部分存在的话,就执行&lt;语句2&gt;。与“?:”不同的是,if 只是一条语句,不会返回数值。&lt;条件&gt;是布尔值,必须用小括号括起来;&lt;语句1&gt;和&lt;语句2&gt;都只能是一个语句,欲使用多条语句,请用语句块。&lt;br&gt;&lt;br&gt;注意 请看下例: &lt;DIV class=blockcode&gt;&lt;FONT face=NSimsun&gt;&lt;CODE id=code4&gt;if (a == 1)&lt;BR&gt; if (b == 0) alert(a+b);&lt;BR&gt;else&lt;BR&gt; alert(a-b);&lt;BR&gt;本代码企图用缩进的方法说明 else 是对应 if (a == 1) 的,但是实际上,由于 else 与 if (b == 0) 最相近,本代码不能按作者的想法运行。正确的代码是 &lt;DIV class=blockcode&gt;&lt;FONT face=NSimsun&gt;&lt;CODE id=code5&gt;if (a == 1) {&lt;BR&gt; if (b == 0) alert(a+b);&lt;BR&gt;} else {&lt;BR&gt; alert(a-b);&lt;BR&gt;}&lt;BR&gt;&lt;I&gt;提示 一行代码太长,或者涉及到比较复杂的嵌套,可以考虑用多行文本,如上例,if (a == 1) 后面没有立即写上语句,而是换一行再继续写。浏览器不会混淆的,当它们读完一行,发现是一句未完成语句,它们会继续往下读。使用缩进也是很好的习惯,当一些语句与上面的一两句语句有从属关系时,使用缩进能使程序更易读,方便程序员进行编写或修改工作。&lt;br&gt;&lt;br&gt;&lt;I&gt;循环体 &lt;DIV class=blockcode&gt;&lt;FONT face=NSimsun&gt;&lt;CODE id=code6&gt;for (&lt;变量&gt;=&lt;初始值&gt;; &lt;循环条件&gt;; &lt;变量累加方法&gt;) &lt;语句&gt;;&lt;BR&gt;本语句的作用是重复执行&lt;语句&gt;,直到&lt;循环条件&gt;为 false 为止。它是这样运作的:首先给&lt;变量&gt;赋&lt;初始值&gt;,然后*判断&lt;循环条件&gt;(应该是一个关于&lt;变量&gt;的条件表达式)是否成立,如果成立就执行&lt;语句&gt;,然后按&lt;变量累加方法&gt;对&lt;变量&gt;作累加,回到“*”处重复,如果不成立就退出循环。这叫做“for循环”。下面看看例子。 &lt;DIV class=blockcode&gt;&lt;FONT face=NSimsun&gt;&lt;CODE id=code7&gt;for (i = 1; i &lt; 10; i++) document.write(i);</CODE><BR></FONT></DIV>本语句先给 i 赋初始值 1,然后执行 document.write(i)语句(作用是在文档中写 i 的值,请参越“对象化编程”一章);重复时 i++,也就是把 i 加 1;循环直到 i<10 不满足,也就是 i>=10 时结束。结果是在文档中输出了“123456789”。<br><br>和 if 语句一样,<语句>只能是一行语句,如果想用多条语句,你需要用语句块。<br><br>与其他语言不同,JavaScript 的 for 循环没有规定循环变量每次循环一定要加一或减一,<变量累加方法>可以是任意的赋值表达式,如 i+=3、i*=2、i-=j 等都成立。<br><br>提示 适当的使用 for 循环,能使 HTML 文档中大量的有规律重复的部分简化,也就是用 for 循环重复写一些 HTML 代码,达到提高网页下载速度的目的。不过请在 Netscape 中重复进行严格测试,保证通过了才好把网页传上去。作者曾试过多次因为用 for 循环向文档重复写 HTML 代码而导致 Netscape“猝死”。IE 中绝对没有这种事情发生,如果你的网也是只给 IE 看的,用多多的 for 也没问题。<br><br><I>除了 for 循环,JavaScript 还提供 while 循环。 <DIV class=blockcode><FONT face=NSimsun><CODE id=code8>while (&lt;循环条件&gt;) &lt;语句&gt;;&lt;BR&gt;比 for 循环简单,while 循环的作用是当满足&lt;循环条件&gt;时执行&lt;语句&gt;。while 循环的累加性质没有 for 循环强。&lt;语句&gt;也只能是一条语句,但是一般情况下都使用语句块,因为除了要重复执行某些语句之外,还需要一些能变动&lt;循环条件&gt;所涉及的变量的值的语句,否则一但踏入此循环,就会因为条件总是满足而一直困在循环里面,不能出来。这种情况,我们习惯称之为“死循环”。死循环会弄停当时正在运行的代码、正在下载的文档,和占用很大的内存,很可能造成死机,应该尽最大的努力避免。&lt;br&gt;&lt;br&gt;&lt;I&gt;break 和 continue&lt;br&gt;&lt;br&gt;有时候在循环体内,需要立即跳出循环或跳过循环体内其余代码而进行下一次循环。break 和 continue 帮了我们大忙。&lt;br&gt;&lt;br&gt;break;&lt;br&gt;&lt;br&gt;本语句放在循环体内,作用是立即跳出循环。&lt;br&gt;&lt;br&gt;continue;&lt;br&gt;&lt;br&gt;本语句放在循环体内,作用是中止本次循环,并执行下一次循环。如果循环的条件已经不符合,就跳出循环。&lt;br&gt;&lt;br&gt;例 &lt;DIV class=blockcode&gt;&lt;FONT face=NSimsun&gt;&lt;CODE id=code9&gt;for (i = 1; i &lt; 10; i++) {&lt;BR&gt; if (i == 3 || i == 5 || i == 8) continue;&lt;BR&gt; document.write(i);&lt;BR&gt;}</CODE><BR></FONT></DIV>输出:124679。<br><br><I>switch 语句</I><br><br>如果要把某些数据分类,例如,要把学生的成绩按优、良、中、差分类,我们可能会用 if 语句: <DIV class=blockcode><FONT face=NSimsun><CODE id=code10>if (score >= 0 && score < 60) {<BR> result = 'fail';<BR>} else if (score < 80) {<BR> result = 'pass';<BR>} else if (score < 90) {<BR> result = 'good';<BR>} else if (score <= 100) {<BR> result = 'excellent';<BR>} else {<BR> result = 'error';<BR>}<BR>看起来没有问题,但使用太多的 if 语句的话,程序看起来有点乱。switch 语句就是解决这种问题的最好方法。 <DIV class=blockcode><FONT face=NSimsun><CODE id=code11>switch (e) {<BR> case r1: (注意:冒号)<BR> ...<BR> [break;]<BR> case r2:<BR> ...<BR> [break;]<BR> ...<BR> [default:<BR> ...]<BR>} <BR>この大きなセクションの機能は次のとおりです。 e の値を計算し (e は式)、それを以下の「ケース」の後の r1、r2... と比較します。e と等しい値が見つかった場合、「ケース」になります。 " が実行されます。break ステートメントまたは switch 段落の終わり ("}") に遭遇するまで、以下のステートメントが実行されます。 e に一致する値がない場合、「default:」に続くステートメントが実行されます。default ブロックがない場合、switch ステートメントは終了します。 <br><br>上記の if セクションは switch で書き換えることができます。 <DIV class=blockcode><FONT face=NSimsun><CODE id=code12>switch (parseInt(score / 10)) {<BR> case 0:<BR> case 1:<BR> case 2:<BR> case 3:<BR> case 4:<BR> case 5:<BR> result = 'fail';<BR> break;<BR> case 6:<BR> case 7:<BR> result = 'pass';<BR> break;<BR> case 8:<BR> result = 'good';<BR> break;<BR> case 9:<BR> result = 'excellent';<BR> break;<BR> default:<BR> if (score == 100)<BR> result = 'excellent';<BR> else<BR> result = 'error';<BR>}<BR>parseInt() メソッドは後で紹介され、丸めに使用されます。最後のデフォルトセクションで使用されている if ステートメントは、100 ポイントをエラーとして扱うことを避けるためのものです (parseInt(100 / 10) == 10)。 <BR></script>
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。