ライセンス開発環境/ツールTIPSバックドア雑記ペイヴメントの技術メモ自己紹介プライバシーポリシーエンジニア歴20数年の講師が技術ノウハウを解説します。初心者向け【初心者向け】JavaScript無料学習(後編)2020-02-10はじめに前編に続いて短時間で読めるようにJavaScriptで出来ることを広く浅くご紹介します。(前編ではJavaScriptの歴史の紹介、カンタンな実行方法、基本的な文法についてご説明しました。)後編はDOM操作とイベント処理、JQuery、Ajax(紹介のみ)についてご説明します。Modelの頭文字を取った略語です。HTMLやXMLのようなツリー構造を持つ文書をオブジェクトとしてメモリ上に展開し、プログラムから扱えるようにします。DOM操作の例dom.htmlとdom.jsいうファイルを作成しエディタで以下の内容を入力し保存。dom.htmlをブラウザで開くとブラウザに「JavaScriptからテキストを書き込みました」という文字列が表示されます。いう仕組みかと言うと、HTMLドキュメントに空のパラグラフ<p>を作成し、idに"elem"という名前を付けました。document.getElementById('elem')というメソッドを呼び出し、パラグラフ<p>のエレメントを取り出します。パラグラフのエレメントのプロパティinnerHTMLに文字列を代入することで、パラグラフ<p>に動的に文字列を設定できました。"JavaScriptからテキストを書き込みました";次にWEBブラウザ上のイベントについてご説明します。WEBブラウザ上でユーザがボタンをクリックしたりマウスを通過させるなどの操作を行うことをユーザイベントと呼びます。ボタンのクリックイベントevent1.htmlとbutton_event.jsいうファイルを作成しエディタで以下の内容を入力し同じフォルダに保存。event1.htmlをブラウザで開き「ポップアップメッセージ」というボタンを押すと「ボタンが押されました」というポップアップメッセージが出ます。いう仕組みかと言うと、HTMLドキュメントにボタンを作成し、idに"button_event"という名前を付けました。document.getElementById('button_event')というメソッドを呼び出し、ボタンのエレメントを取り出します。)を渡すことで、ボタンを押したときにポップアップメッセージが表示されるようになりました。);タイマーによる非同期イベントJavaScriptではタイマーによる非同期イベントも扱えます。以下の例に示しましたが1秒毎に時計を更新するみたいな使い方ができます。event2.htmlとtimer_event.jsいうファイルを作成しエディタで以下の内容を入力し同じフォルダに保存。event2.htmlをブラウザで開くと現在時刻が表示されます。いう仕組みかと言うと、HTMLドキュメントに空のパラグラフ<p>を作成し、idに"clock"という名前を付けました。document.getElementById('clock')というメソッドを呼び出し、パラグラフ<p>のエレメントを取り出します。1秒(1000msec)に1回、Dateオブジェクトで時・分・秒を取得。パラグラフのエレメントのプロパティinnerHTMLに時・分・秒の文字列を代入することで、パラグラフ<p>に時計を表示することが出来ました。);余談JavaScriptのデバッグに便利なツールを1つご紹介します。私はFirefoxを使っているのですが、ブラウザに搭載されたJavaScriptデバッグ環境の開き方と1メニューからWEB開発を選びます2次にウェブコンソールをクリックします3以下のように【コンソール】というタブが開きます>>に続いてalert("Firefoxって便利")と入力しエンターを押すと、ポップアップウィンドウが表示されます。4JavaScriptコードからデバッグ情報を出力できます。このHTMLを開くと以下のようにコンソールにデバッグメッセージが表示されます。※本記事ではいろいろ端折っておりエンコード(UTF-8)をHTMLに書かなかったためコンソール画面に警告メッセージが出てますが、今回はあまり気にしなくて良いです。逆にこういうエラーも検出できるのでコンソール画面は非常に便利です。【自己紹介】奥さん・息子2人とお気楽に暮らしています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。短時間で読めるようにJavaScriptで出来ることを広く浅くご紹介します。前編ではJavaScriptの歴史の紹介、カンタンな実行方法、基本的な文法についてご説明します。プログラマーになったら最初にソフトウェア開発工程の全体像をざっくり掴んでおくことをオススメします。いえ、いきなり細かく説明されても混乱しちゃうしなぁ...という感じかもしれず。【自己紹介】奥さん・息子2人とお気楽に暮らしています。読まれている記事1【Wireshark】無料で使える通信プロトコルアナライザ2【MinGW】無料のC/C++プログラミング環境をインストールしよう3【初心者向け】ソフトウェア開発工程の全体像をつかみたい4【おすすめ】プログラミングに使える無料のエディタ(vivi)アーカイブ2020年2月2020年1月2019年12月カテゴリーLinuxWEBネットワーク初心者向け開発環境/ツールメタ情報ログイン投稿フィードコメントフィードWordPress.orgペイヴメントのエンジニア塾エンジニア歴20数年の講師が技術ノウハウを解説します。