Initial Site

Initial Site

Initial Site

javascriptの実行順とちょこっと自己紹介

  • ササキ  2015/01/30 19:57
りんごがflashを食べてhtml5の世界ができた

りんごがflashを食べてhtml5の世界ができた

今年は年始から風邪をひいてしまい、やっと先週くらいから調子が戻ってきた 今年厄年のsasakiです! 久しぶりにコーディングの案件をいただきました。 コーディングするにあたり吸収したものをアウトプット拡散するためにしばし、技術系の内容で攻めようと思ってます。 そのまえにちょっと経歴紹介 自分は、いまとなっては過去の技となったFlashの制作をしていたモノです。 りんごの会社がFlashを排除したときからずいぶんと時代は流れ、今となってはFlashつかうことなんてなくなってしまいました。 あのときはりんごの会社嫌いでしたが、いまは右手にはiPhone、家にはiMacがいる生活を送っております。 そんな気持ちを絵にしたのが上のやつですw そのあとは、コーディングを覚えなんとか現在まで(一時webから離れていた時期はありますが)何とか生きながらえてきました。 この会社に入ってからは、体制が変わるまでディレクター(会社によって役割が異なると思いますが)というより交渉人的な立ち位置で仕事の交通整理のようなことをしてきました。 体制が変わるときに、またモノ作ることをやりたいと希望したところ現在のポジションにしていただきました。感謝であります。 前置き長くなりました。 本題入ります。 今回コーディングするにあたり引っかかったのがキーワード的に言うと

  • レスポンシブデザイン
  • javascript
  • jQuery
  • cssアニメーション
  • グリッドデザイン
  • bootstrap

まず第一回 「javascript,jQuery」について書かせていただきます。 なにが、引っかかったかと言うと、あやふやにはわかっていたけど実際どうなんだ!ってことで javascript jQuery の実行順です javascript は htmlに外部読み込みできるけど、それとhtml内に書いたものだとどういう順番で実行されるの? またそれにjQuery が入ってくるとどうなるんだ?って疑問です。

JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか?と、ふと疑問に思いました http://analogic.jp/external-js-execute-timing/

世の中には同じことを思ったり、考える人はたくさんいらっしゃいます。 また 複数のjavascriptファイルが読み込まれる場合です 単体での動作は問題ないと思いますが、外部ファイル間で依存している場合どうなるんだろう? <script>タグの出現順序に関係なくロードが完了した別のJSファイルから処理されたりするのでしょうか?

HTMLマークアップの中に複数の<script>タグ(外部ファイル参照やインラインスクリプト)や、スクリプト以外のマークアップが存在する場合でも、HTML上での出現順序通りに順次処理される

つまりHTML上の上から順番にscriptは実行されるってことです さらに script内の処理をしている間は他の処理は止まり、HTMLの(画面の)レンダリングもストップする。 javascriptの確認のため alert() を使うことがあると思いますが alertが出るとhtmlのレンダリング止まりますよね そこのalertまでの処理をしたってことですね。

なるほど、 そんで javascriptはhtml内DOMを操作するのに使います。 上の結果を踏まえると javascript が head の中で読み込まれた直後にbodyの中の何かの処理を行うことはできない ってことですよね つまり、上記のような場合は ページが読み込み終わったらjavascriptを実行するってことになります そんならその実行のタイミングって指定できないの? というとこで onload イベントハンドラ の登場です そしてこれは、あくまでページが読み込み終わってから実行するので、ページ内にすげー重たいファイルとかがいたりすると、javascriptが発動するまで時間がかかります。 ちなみに、このイベントハンドラっていうのは、いろんなのがいます。 onClick,onChange,onAbort など気になる方は調べてみてください。 長くなったので今回はここらへんで。ぜんぜんjQuery絡んでねーじゃん!っていうことで次回はjQueryについて 結論は javascript は html上の上から順番に実行される 詳しく知りたい方は、引用させていただいた こちらのページをどうぞ

コメントをどうぞ

技術の記事

  1. 2
    photoshopで簡単な加工からそれなりに綺麗にする方法
  2. pixta_4153512_M
    夏バテ気味のようです。
  3. CropperCapture1
    【ターゲットブランク】target=_blankなのか。target=blankなのか。それとも、target=newなのか。WEB屋のメモ帳
  4. lgi01a201404292200
    プログラマは稼げるのか?

おすすめ記事

  1. イニシャルサイトコーポレートサイト
    コーポレートサイトをリニューアルしました
  2. なんでもQ
    相談Q&Aサイト「なんでもQ」開発中です!
  3. さんぽすフォトコンペ開催中
    今年もさんぽすフォトコンペ開催しました!

人気の記事

  1. ファミコン
    パズドラ、モンスト、白猫に続く次のゲームは…?
  2. konagaya_20150303
    日常でつい使ってしまう間違えやすい日本語
  3. konagaya20150513
    初心者でも気軽に登れて絶景が見れる山
  4. BBQ
    グループ会社合同フットサル&バーベキュー大会に参加しました(BBQ編)