バッチャン 日常バッサバッサ

男子大学生の日常を便利にするブログです! 下宿・一人暮らし・SMAP・新しい地図 に関する情報を発信しています!

code3 <jQueryは工程だ!>主要なイベントと使い方

f:id:tsubasa8770:20190210224657j:plain

code programming


テックアカデミーでプログラミングを勉強しています。

僕の場合は、【PHP・Laravelコース】と【フロントエンドコースを両方勉強しています。

個人的には、オススメは【フロントエンドコース】です。

副業でコッソリ稼ぐことができる可能性があるからです。

 

今なら、『shokai伊藤翼』と申し込みフォームの備考欄に記入してもらえれば、1万円引きです!お試しください!

 

 

そして、途中からですが少しずつ勉強したことをアウトプットしようと思っています。

 

今日はその3回目になります!

 

自分なりのメモ・アウトプットが皆さんのお役に立てれば良いな と思っています。

 

詳しくまとめる<ザックリ大枠を掴む

 

 

なお、僕のメモで間違っている点や、もっと詳しく教えて欲しいことがあれば、コメントやツイッターにDMなどを送ってもらえると嬉しいです!

 

twitter.com

 

 今回のメインは『jQuery』です。

とってもJavaScriptフレームワークでありながら、とてもシャレオツなサイト制作

ができると共に、動きがつくのでユーザーにとって飽きさせない加工ができるモノです。

フロントエンドの人間には不可欠な動的なサイト制作なので、気合い入れて行きましょう!

と言っても、他のものに比べたら、そこまで複雑ではないので、楽しいですね。笑

 

学習内容

 

それでは、3回目の学習内容はこちらです。

 

テックアカデミー フロントエンドコース<jQuery>

PHP は見直し

  • syntax error は「構文エラー」という意味PHPの正しい文法書式に沿っていないために表示されるエラー
  • batcan_basa_basa はスネークケース

ヘビみたいに繋がってるからだな、絶対🐍

  • キャメルケースで表したら$batcanBasaBasa
  • var_dump($num); とすれば int(2) という データ型(数値) で見ることができる。 int は 整数型(まぁ数字のことよ)を表すキーワードです。
  • (数値)に文字を入れた場合→ string(バイト数)が出る。string は文字列型のキーワードです。(ちなみに、日本語は1文字3バイト

 

 

jQuery

  • load( )は、ページ内のすべての外部CSSや画像の読み込みが完了したタイミングで発生するイベント
  • ready()を使えばDOM操作を先に始めることができ、結果的に待ち時間を減らすことができる

「もう準備できてるよ〜」って状態にしておくわけだ。

  • append()は、要素の最後にHTMLなどを挿入できる。コイツの(引数)にはHTML文字列だけでなく、DOM要素やjQueryオブジェクトもを追加可能
  • 逆に削除するのはremove()

 

  • <input>(HTMLの話ね)に入力された値を取得するにはval()
  • val(値)で、フォームに値を入力できる

これは、たぶんよく使うからね!

  • サッ!と出てくるログイン画面の作り方 = CSSdisplay: none;として、JavaScript$( ).click(function(){
    $( ).fadeIn();
    });
  • $("セレクタ").attr("属性名")セレクタから、引数に指定した属性名の値を取得できる
  • keydownイベントはキーで入力したものを受け取る
  • 表示、非表示を切り替えたいtoggle()

 

  • slideDown()、slideUp()でスライドアップ、ダウンのアニメーションが使える
  • animate(プロパティ一覧, 時間)で変化のあるアニメーションができる
  • (時間)はミリ秒単位

 

 

$(document).ready(function() {

$(何を).text(どうする); });

 

短縮系も大事((document).readyがめんどくさくなって、なくなっただけ

$(function() {

 $(何を) . text(どうする);

});

 

prepend()は、引数に指定した内容を、要素の先頭に挿入するメソッド 

復習:Progate

PHP

PHP 学習コースⅠ

  • switch

 

その他

jQuery

jQuery 中級編

モーダルを表示しよう まで

 

 

 

 

まとめ

今回は  jQueryのイベント名と使い方ばかり載せてしまいました。

 

これを複合させて作る作業も増えてきました。。。キツイっすね。笑

でも、jQueryの場合は一つ一つは難しい動作はしていないということは理解できてるので、一個ずつ一個ずつ進もうと思います。。。

 

 

jQueryにおいて、大事なのは『工程』だと実感してできました。

 

例えば、『ボタンを押す』→『メニューが開く』→『入力したモノが違う』→『「違います。もう一度入力してください」とメッセージを出す』みたいな感じ。この工程を怠らず、JavaScriptjQueryで書いていくイメージですね。

 

最後まで読んでいただきありがとうございました。

バッチャン@特待生ブロガー (@basabasa8770) | Twitter

でした。