
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
JavaScript
2015.08.22
ホームページ制作のために、JavaScript勉強をし始めたけど、なかなか思い通りのアニメーションが作れるようにならない・・・。そんなお悩みはありませんか?実際Javascriptは、入門レベルでも思ったより複雑な点が多く、仕組みも理解したはずなのになぜか動かないことがとても多いです。
でも実は、あるコツを掴めば、誰でも入門レベルのJavascriptを簡単に使いこなして便利なアニメーションが作れるようになっちゃうんです!一見難しそうに見えるJavascriptですが、これを機にちゃちゃっとマスターしちゃいましょう!
まず、セレクタ以前の話として、ホームページ作成にjavascriptを使うときは必ず初心者のかたは「jQuery」を使いましょう。圧倒的に作業が簡単になります。
jQuery最初の難関は、「セレクタ」の使い方を覚えることです。「セレクタ」とは、id=”button” や class=”container” のようなものです。これらを使い、アニメーションの対象になる要素を決めます。
例えば、
というdivに対してアニメーションを設定したい場合は、
このように書きます。.click(function(){ }); というのは、「その対象のdivをクリックしたら動作を開始する」という意味の処理です。また、#(シャープ)はidを意味し、.(ピリオド)はclassを意味します。
今回は「topbarというidがついたdiv」を指定する場合は、”div#id”という設定方法になります。これが、jQueryの基本です。
上述にもありましたが、「click」はクリックというアクションに対して機能を設定するためのコードです。jQueryでは実際に使われるようなコードは決まっているので、まずはそれを頭に入れることでかなり開発が楽になります。
▼定番の3つのコード
・click:クリックに対して機能を設定する
・mouseover:マウスが上に乗っかった時の機能を設定する(mouseleaveでマウスが外れた時の設定ができます。)
・fadeIn:非表示設定(display: none;)になっていた要素を表示する(fadeOutで逆に非表示の設定ができます。)
この3つさえ覚えていれば基本的な処理はできると思うので是非お試しください!
さらに、例えば、「10秒後に処理を実行したい」と思った時には、「setTimeout」が使えます。
例えばこのコードを使えば、ページを開いて10秒後(10000ミリ秒)後に「test」というアラートを表示することが出来ます。
もう一つ、「10秒毎に同じ処理を繰り返したい」なんてこともあります。そういった時は、
このように書くことで、「test」というアラートを10秒毎に表示することが出来ます。
これも頭に入れておくと、とてもホームページ作成が簡単になるので覚えておいてください!
もうこれは「お決まり」として覚えましょう。だいたいのjQueryのコードはこの形に当てはめることでどうにかなります。
「this」とは、直前に指定されたセレクタを指します。これを使うことで、コードを簡潔に保つことが出来ます。
jQueryを完全にマスターするには、一見膨大な量の知識が必要なように思われてしまいます。でも、実際レベルの高い人ほど「暗記」していることは少ないです。
インターネットには大量にjQueryに関する記事やコードの実例が存在しています。例えば、「jQuery スライドショー」のように調べれば、スライドショーの作り方がたくさん見つかります!
是非皆さんもJavascriptのコツを掴んで、便利なホームページを作ってみてください!
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.