スライダー、アコーディオンメニュー、フワッと動くアニメーション…
html、cssでなんとかコーディングができるようになってきた私にとっては
なんとなく恐ろしい響きの言葉達です。
その恐怖の原因は
JavaScript JQuery
最近ではcss3などを使用してスライダーやアニメーションを表現することもできますが。
やはり動的な部分に関してはJavaScript JQueryを使用することが多いと思います。
基本的なことはプラグインを使用したり、先人達が残したソースコードの
コピペでなんとかなることが多いのですが、細かな調整やカスタマイズが必要な時もあり、
けっこうツライ….
１からコードをスラスラ書けないにしても、せめてこの()と{}に包まれた
謎の文字列を解読できるようになれば少しは人生が良い方向に向かうのでは？
そう考えまずは基礎となるJavaScriptの基本を自分なりにまとめてみました！
ということで第一回はJavaScript(以下Js)の基本文法を確認したいと思います。
長いソースコードの中ではなかなか解りにくいのですが、Jsには二つの基本文法があるようです。
まずは
オブジェクト.メソッド(パラメーター)
です。
オブジェクトというのは文字列や画像などの「物」と考えると良いかもしれません。
次のメソッドというのはオブジェクトへの命令で、パラメーターが命令の詳細です。
試しに記述してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基本文法</title> </head> <body> <script> window.alert('働きたくない'); </script> </body> </html> |
このコードでは
オブジェクト = window（コードが動いているブラウザのウィンドウ）
メソッド = alert（警告ウィンドウを表示する命令）
パラメーター = ‘働きたくない’ (警告ウィンドウに表示するものの詳細)
となります、
最後の ; は命令文の終わりにつける”。”のようなものです。
実際にブラウザで実行してみると、
ブラウザのウィンドウに警告ウィンドウでパラメーターに入れた言葉が表示されていると思います。
もう一つの文法が
オブジェクト.プロパティー
です。
プロパティーというのはオブジェクトの情報を意味します。
１つ目の文法と組み合わせてブラウザウィンドウの横幅を
調べてみたいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基本文法</title> </head> <body> <script> window.alert(window.innerWidth); </script> </body> </html> |
先ほどのパラメーターの部分がブラウザウィンドウの横幅情報を取得する記述になっています。
オブジェクト = window （ブラウザのウィンドウ）
プロパティー = innerWidth （ウィンドウの幅）
コード全体を日本語にすると
ブラウザのウィンドウに警告ウィンドウでブラウザのウィンドウ幅を表示
となるわけです（わかりにくい…）
いかがでしょうか？
少しでもJsが身近に感じていただけたでしょうか？
さらに実践的な内容を学びたい! 転職に行かせる技術を身に付けたい！という方は
こちらもチェックしてみてください。
- 5651 views
- ITの雄
