WebデザイナーのためのJavaScript & jQuery入門

計算(四則演算)してみよう

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
シンプルな計算をプログラムで実行してみましょう。JavaScriptで使われる基本的な演算子をご紹介します。
講師:
08:11

字幕

このレッスンでは JavaScript による簡単な計算を学びましょう。それでは Chapter2 lesson03 のフォルダを開きbegin と final の両方のファイルを選択してブラウザにドラッグ&ドロップします。そうしますと begin のファイルとfinal のファイルがあります。final のファイルには既に計算結果が表示されています。それでは begin のファイルをテキストエディターで開いてみましょう。begin のファイルを Sublime Text にドラッグ&ドロップします。そしてウィンドウを左右に並べてみましょう。それでは begin のHTML の 20 行目からJavaScriptを書いていきます。計算をするには、まず変数を宣言していきます。variable で n1 という名前を宣言してその変数の中に 100 という数字を代入します。そしてもう一つ、 n2 という変数を作って、50 という数値を代入してみました。そしてこの二つの変数を使って計算をしてみましょう。まず document.writeこれは HTML に結果を反映させるためのJavaScript です。 そして括弧を作り、n1 という変数と、+ n2 という変数を足してみます。そして行末にはセミコロンを打っておきます。それでは上書き保存をして、ブラウザにフォーカスしてブラウザを更新してみましょう。無事に 150 という計算結果が反映できました。引き続き計算を続けていきたいのですが、計算結果を増やしてみたいと思います。まず計算結果を増やすのに改行をしたいと思いますので、この計算結果に single quotation でbr と入力して改行をしてもらいます。そして Sublime Text では行にカーソルがある状態で、Command+C 、Windows では Ctrl+C を押すと行をコピーできます。その状態のまま、Ctrl+V Mac では Command+V で行を複製できます。行を複製したら、プラス(+)の部分の演算子をマイナス(-)に変えてみましょう。これが引き算の演算子、減算演算子です。上書き保存をして、ブラウザで更新をしてみましょう。そうしますと、100 引く 50 の計算結果、50 が表示されました。引き続き Sublime Text でこの行の上で複製・コピーを取ってそのままペーストCommand+V あるいは Ctrl+Vこれでまた行が増えましたので今度はマイナスの部分を掛け算の演算子に変えます。 掛け算は「アスタリスク*」です。それでは上書き保存をしてブラウザにフォーカスを移し、 更新です。そうすると 5000 という 100 掛ける 50 の結果が表示されました。そしてまた Sublime Text に戻って別の計算を試しましょう。行の上にカーソルを置いてコピー、ペースト。また行を増やしました。そしてアスタリスクではなくて今度は割り算の演算子です。スラッシュ(/) を入力します。そして上書き保存をしてブラウザで Command+RCtrl+R の更新。そうすると、100 割る 50 の計算結果、2 と表示されました。ではまた Sublime Text に戻りまして、もう一行複製を取ります。そして今度は パーセント(%) を入力しましょう。これは特殊な演算子で、余りを求めることができます。つまり割り切れる場合は 0そして余りは 1 から 9 までを取得することができるので、使い方によってはとても便利な演算子です。では上書き保存をして、ブラウザにフォーカス、更新そして今回は割り切れる、 100 割る 50 は割り切れるので、このように余りが 0 と表示されました。そして今度は、数字以外の計算も試してみましょう。 では変数を新しく宣言します。新しい変数、s1 を宣言して、その変数の中に single quotation で文字列を代入します。「文字列のデータ型」と入力します。そしてもう一つ、ここでもコピーペーストを活用しましょう。Command+C 、Windows では Ctrl+C を押してそしてペーストです。Command+V あるいは Ctrl+V 。これで複製を取りましたので、s1 を s2 に変えてそしてここの文章を「も足し算できる」としました。それではこの変数を使って、足し算、今回は連結をしてみます。では計算式はこれをそのまま使いますので、行末の部分にカーソルを合わせてコピー・ペーストそして行が増えたら、n1 を s1 に変えてそして % を + に変えて、n2 を s2 に変えました。そして上書き保存をして、ブラウザで更新。そうすると文字列のデータ型まではs1 の変数、そして「も足し算できる」は、s2 の変数の内容になっています。このように加算という足し算の演算子だけではなく連結という意味を持つ、演算子として使うこともできます。またこの変数の内容を変えることも試してみましょう。では n1 の値を 3 という整数に変えてみました。 上書き保存をして、ブラウザ上でもう一度更新をしてみます。そうしますと、無事に足し算・引き算そして掛け算・割り算、そして 3 割る 50 は余りが 3 となります。このように簡単な計算方法を覚えるとプログラミングの幅が非常に広がりますので、ぜひ覚えるようにしましょう。このレッスンでは JavaScript での簡単な計算方法を学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。