高機能で拡張しやすいタブ【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js・jqueryのUIとはユーザーインターフェイスの事で、今回は「Tabs」というウインクジェットを利用するため、jQueryUIのCDNをコピーすれば良い【Webデザイン】前回のタブに機能を追加したもの【仕様】・キーボードによる操作を可能にする・新しいタブが選択された際にアニメーション効果を追加する【フォルダー】フォルダーの構成は下図の通り【HTML】ヘッド部に・Googleフォント、jquery及びUI、normalize.css、main.js,main.cssなどを設定する。body部section要素内、hea...jQuery入門--高機能で拡張しやすいタブ
画面領域を有効活用できるタブ【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【Webデザイン】複数のコンテンツ（内容）を「パネル」として、1つのエリアに重ねて配置し、上部の「タブ」によって表示するコンテンツを切り替られるUI（ユーザーインターフェース）で、よく用いられる。【仕様】・タブで画面を切り替える【フォルダー】【imgフォルダー】【index.html】ヘッダーで、様々なプラグインや、外部ファイルを読み込んでいる。body要素をsection要素で、一つのまとまりを作り、更に入れ子としてsection要素を作る。大まかには、下記のように成る＜section＞＜header＞＜ul＞＜...jQuery入門--画面領域を有効活用できるタブ
「ブログリーダー」を活用して、職案人さんをフォローしませんか？
ギャラリーページ（高機能）【開発環境】OS：Win11（64ビット）VSCode1.72.2、VSCodeの拡張機能「LiveServer」を搭載している【各ライブラリ】・jqueryのCDN：jquery-3.7.1.min.js、・jqueryのIUのCDN：jquery-ui.min.js・モダナイザーのCDN：modernizr.min.js・jquery.ba-throttle-debounce.min.jsjQueryの「スロットル」及び「デバウンス」のプラグインスロットル→処理が呼び出されたとき、指定した時間が経過された後に初めて発火しますデバウンス→一定の時間間隔でのみイベントを実行します。最初のイベントが発火してから指定時間内に発生するイベントは実行されません。・Masonry.pkgd...jQuery入門--ギャラリーページ（高機能）
ギャラリーページの作成【開発環境】OS：Win11（64ビット）VSCode1.72.2、VSCodeの拡張機能から「LiveServer」をインストールしているものとする。jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【Javascriptライブラリ】・Masonry→レスポンシブ対応のグリッドレイアウトが出来る・imagesLoaded→すべての画像の読み込みが終わった後に処理を実行できるため、Masonryのレイアウト崩れを防げます。【Webデザイン】サムネイルをクリックすると、大きなぁ画面になる■ギャラリーパージの主な機能今回は「フォットグラファーが自分の作品を紹介するポートフォリオサイト」を想定して、最終的には以下の要件を満たす機能を実装してい...jQuery----ギャラリーページの作成
スムーズスクロール拡張編【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【SmoothieScroll】前回のBasic版では、「scrollTop」プロパティを利用出来る要素を検出する関係を紹介した。今回は、「SmoothScroll」プラグインを使って,スムーズスクロールを作ってみる。まず、「SmoothieScroll」プラグインのダウンロードするか、smooth-scrollCDNをリンクするか＜scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.min.js"＞＜...jQuery-スムーススクロール拡張編
スムーズスクロール【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【スムーズスクロール】スムーススクロールは下図の上向きの↑をクリックすると、上部に戻る。【Webデザイン】プログラマ編【html】続1【imgフォルダー】【CSSフォルダー】main.cssファイルを書く@charset"UTF-8";/*Base*/html{/*扱えるフォント*/"RopaSans",sans-serif;font-size:16px;line-height:1.5;}body{background-color:rgb(255,255,255);color:rgb(0,0,0);min-width:960...jQuery入門--スムーズスクロール
高機能で拡張しやすいタブ【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js・jqueryのUIとはユーザーインターフェイスの事で、今回は「Tabs」というウインクジェットを利用するため、jQueryUIのCDNをコピーすれば良い【Webデザイン】前回のタブに機能を追加したもの【仕様】・キーボードによる操作を可能にする・新しいタブが選択された際にアニメーション効果を追加する【フォルダー】フォルダーの構成は下図の通り【HTML】ヘッド部に・Googleフォント、jquery及びUI、normalize.css、main.js,main.cssなどを設定する。body部section要素内、hea...jQuery入門--高機能で拡張しやすいタブ
画面領域を有効活用できるタブ【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【Webデザイン】複数のコンテンツ（内容）を「パネル」として、1つのエリアに重ねて配置し、上部の「タブ」によって表示するコンテンツを切り替られるUI（ユーザーインターフェース）で、よく用いられる。【仕様】・タブで画面を切り替える【フォルダー】【imgフォルダー】【index.html】ヘッダーで、様々なプラグインや、外部ファイルを読み込んでいる。body要素をsection要素で、一つのまとまりを作り、更に入れ子としてsection要素を作る。大まかには、下記のように成る＜section＞＜header＞＜ul＞＜...jQuery入門--画面領域を有効活用できるタブ
変化するスティツキーヘッダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.js及び、modernizr.min.js【スティツキーヘッダーの概要】・デザインスティツキーヘッダーは上部に達すると【仕組み】今回は、スティツキーヘッダーが上部に達すると、初期状態のヘッダーの内容をコピーして、スティツキーヘッダーを新たに作る。1.初期状態のヘッダーは動かさず、常に元の位置に配置する2.ヘッダーのクローンを作成し、初期状態では画面上部の外側に配置しておく3.ウインドウのスクロールによって初期状態のヘッダーが非表示になった時点で、クローンを見える位置に移動する【フォルダーの構成】imgフォルダー【HTMLコード】【head部】1.Google...jQuery入門--変化するスティツキーヘッダー
スティッキーヘッドヘッダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.js及び、modernizr.min.js【head部】での注意・GoogleFontsの「RopaSans」フォントを取得している。＜linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Ropa+Sans"＞【スティッキーヘッドのデザイン】スクロールする。ヘッドが固定される【概要】スティッキーヘッドはスクロールに合わせて移動するヘッダーですが、画面上部に来ると、ヘッダーだけが固定し、本体はスクロールに合わせて移動する。【処理の流れ】スティッキーヘッドを実装するには、ウインドウのス...jQuery入門--スティツキーヘッダー
多機能なスライドショー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【Modernizr2.8.3のCDN】＜scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"＞＜/script＞modernizr.jsとは、JavaScriptやCSSを書いていると「新しい機能が使えるブラウザではそれを使い、そうでない場合は別の手段で代替する」というように、処理を分岐させたい場合がある。Modernizr（モダナイザー）とは、そういった「機能検出」のためのJavaScri...jQuery入門--多機能なスライドショー
滑らかな動きをするスライドショー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【normalize.cssとは】どのブラウザーでアクセスしても、表示が変わってしまわないように、各々のブラウザーに適用されているデフォルトのスタイルを平均化するために読み込ませるCSSです。◆normalize.cssの使い方まずは、Normalize.cssのページから、ダウンロードし、head内にlinkでnormalize.cssへのファイルパスrelで記載すれば完了。【Modernizrとは】Modernizr（モダナイザ）は、Web開発においてHTML5やCSS3の機能がブラウザでサ...jQuery入門--滑らかな動きをするスライドショー
jQueryプラグインでスライドを作る【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js参照サイト：slickでスライダー実装【スライダーのデザイン】jQueryプラグイン「slick」を使ってスライダーを作ってみる・スライダーは3枚の写真を自動でスクロールする事【slickを選ぶ】https://kenwheeler.github.io/slick/のHPを開くこれをスクロールして、自分の作りたいタイプのものを選ぶ。また、詳細を知りたい場合は「usage」をクリックすると、ジャンプ出来る。手順1HTMLのマークアップ（構造）を確認するhead部へ、2つのcssを読み込むbody部へ、sl...jQuery入門--スライドショー
マスクプラグイン【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN【動画】【jQueryプラグイン】https://releases.jquery.com/にアクセスするプラグインをクリックnpmをクリックこの中から、下図のところをクリックHPに飛ぶ【インストール】VScoodを立ち上げPSC:\Users\Owner>npm-v10.8.2PSC:\Users\Owner>バージョンを確認する。インストールするフォルダ「プラグイン」を作り、インストを開始する・コマンドPSD:\jQuery\プラグイン>npmijquery-mask-plugin【インストールされたフォルダ】以上のようになる。【マスク・プラグインを使ったWebを作る】定...jQuery入門--マスク・プラグイン
タイポグラフィの表現【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【Webデザイン】下図のように、文字を浮かせる。また、マウスを動かすと、影も動く様ににする【フォルダ作成】【コード書く】1.index.html続1・CSS/main.css/**Base*/html{"HelveticaNeue","Arial","HiraginoKakuGothicProN","Meiryo",sans-serif;font-size:16px;line-height:1.5;}body{background-color:#656565;}img{vertical-align:middle;}but...jQuery入門--タイポグラフィの表現
見え隠れするサイドバー【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【デザインと動作】下図のようなデザイン「OPEN」を押すと、サイドバーが表示され、「CLOSE」を押すと、閉じる【フォルダー構成】imgフォルダ・index.htmlファイルここでは、外部入力ファイルの設定続・「CSS/main.css」ファイルにコードを書く/**Base*/html{"HelveticaNeue","Arial","HiraginoKakuGothicProN","Meiryo",sans-serif;font-size:16px;line-height:1.5;}body{background-c...jQuery教科書--見え隠れするサイドバー
レイアウト術【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【丸ボタンのレイアウトHP】HP画面は下図のようになり、動作は、ボタンの上にマウスを乘せると、徐々に黄色に変わる。以上1.フォルダとファイルを用意する2.img3.3フォルダに「index.html」ファイルを作るこの部分で、CSS・jQuery・jsなどを読み込んでいるヘッダーの設定本体の設定本体とフッターの設定4.css/main.cssファイルのコードを書く/**Base*/html{font-family:"HelveticaNeue","Arial","HiraginoKakuGothicProN","Meiryo",...jQuery入門--丸ボタンのレイアウト
画像とキャプション【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムJQuryCDNを入れる＜!--jquery--＞リンク先＜scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"＞＜/script＞＜!--jqueryUIは拡張型--＞リンク先＜scriptsrc="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs0...jQuery入門--画像とキャプション
様々なホバーエフェクト【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsとjquery-ui.min.jsを読み込む＜!--jquery--＞リンク先＜scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"＞＜/script＞＜!--jqueryUIは拡張型--＞リンク先＜scriptsrc="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"integrity="sh...jQuery入門--様々なホバーエフェクト
jQueryを始めよう（onメソッド）【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery-1.10.2及びjquery-ui-1.10.3がインストール済みか、jQueryCDNドメインにリンク済み注意、index.htmlやmain.cssは変えないものとする【表示タイミングを変えるには】1.ブルーの領域にマウスが乗ったら、色を赤にする2.ブルーの領域外にマウスが来たら、色を戻す⇅「main.js」コードを書き換える。$(function(){$('#typo').on('mouseover',function(){$(this).css({color:'#ff0000'});}).on('mouseout',function(){$(this).css({color...jQuery教科書--入門2
jQueryを始めよう（CSSメソッド）【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery-1.10.2及びjquery-ui-1.10.3がインストール済みか、jQueryCDNドメインにリンク済み【サンプルプログラムを作る】ブラウザを開いて、表示すると、下図に用になる。「index.html」コード・コードから分かるように、外部CSSや外部JSを使うときは、ヘッダに置くのが通例、bodyに置けるが、処理が遅くなるので、推奨されない。bodyから※）target=”_blank”とは、リンク先を別タブで開くよう指定できるHTMLタグの1種◆「main.css」のコード/**Base*/html{"HelveticaNeue","Arial","HiraginoKaku...jQuery教科書--入門1
スライダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--2.2.4【slickの導入】slickはjQueryベースの、スライダーを作成するためのプラグインです【slickのダウンロード】【インストール】任意のフォルダ（slick）を選び、slick-1.8.1.zipをクリクすると、インストールされる。【VScodの設定】「fonts」フォルダから「css」フォルダに、2つのファイルを移すslick-theme.cssslick.css「fonts」フォルダから「js」フォルダに,一つのファイルを移すslick.min.js「imde」フォルダには、好きな絵を4枚入れる【スライダーを作ってみる】◆動作1.手動でスクロール出来、尚且つ5秒経つと、自動でスクロール...jQuery入門--スライダー
要素内のレンダリングされたテキストを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【テキストを参照する】HTMLElementオブジェクトのinnerTextプロパティを参照すると要素および要素の子孫要素のテキストを取得することができます。書式；htmlElement.innerText戻り値は、すべてのテキストが連結されたDOMStringオブジェクトが戻されます。どのような文字列が返されるのかについては、要素や要素の子孫要素がブラウザで表示されるときと同じ内容のテキスト内容を取得します。空白ノードなどのようにブラウザでは表示されないものは取得しませんし、スタイルシートの設定などで非表示になっている要素。＜style＞タグのように元々ブラウザに表示されない要素のテキ...要素内のレンダリングされたテキストを取得・設定
ノード内のテキストを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【テキストを参照する】NodeオブジェクトのtextContentプロパティを参照するとノードおよびノードの子孫ノードのテキストをすべて連結した値を取得することができます。書式；node.textContent戻り値はすべてのテキストが連結されたDOMStringオブジェクトが戻されます。実際にどのようなデータがテキストとして返されるのかは、ノードの種類によって異なります。*1と記述したノードについては、コメントと処理命令ノード以外のすべての子ノードのtextContentの値を連結した文字列を返します。それぞれのノードでNode.nodeValueがどのような値を返すのかは「ノードの値を取得・設定(n...JS--ノード内のテキストを取得・設定
ノードの値を取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードの値を参照する】NodeオブジェクトのnodeValueプロパティを参照するとノードの値を取得することができます。書式；node.nodeValue戻り値はノードの値がDOMStringオブジェクトで戻されます。どのような値が返されるのかはノードの種類によって異なっています。例えばノードの種類がTEXT_NODE(テキストノード)の場合、テキストノードに含まれるテキストが返されます。サンプルブラウザを立ち上げるボタンを押すと、pタグのノードをすべて取得します。そのあとで、pタグの子ノードであるテキストノードを取得するためにそれぞれの最初の子ノードを取得します。最後にテキストノードのノードの値を取得し、コ...JS--ノードの値を取得・設定
ノード名の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【ノードの名前を取得する】NodeオブジェクトのnodeNameプロパティを参照するとノードの名前を取得することができます。書式；node.nodeName戻り値はノードの名前を表すDOMStringオブジェクトが戻されます。名前はノードの種類によって異なっています例えばノードの種類がELEMENT_NODE(要素ノード)の場合は、要素のタグ名がノードの名前として返されます。ノードの種類がTEXT_NODE(テキストノード)の場合、常に"#text"という値がノードの名前として返されます。サンプルブラウザを立ち上げるボタンを押すと、id属性の値が'blog'のノードを取得し、そのノードの子ノードをすべて取得します。そのあとで...JS--ノード名の取得
ノードの種類を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【ノードの種類を確認する】NodeオブジェクトのnodeTypeプロパティを参照するとノードの種類を確認することができます。書式；node.nodeType戻り値はノードの種類を表すunsignedshort型の値が戻されます。どの値がどのノードの種類になるのかは次の一覧を見てください。ノードを取得したあと、ノードのnodeTypeプロパティを参照することで取得したノードの種類を確認することができます。サンプル＜!DOCTYPEhtml＞＜htmllang="ja"＞＜head＞＜metacharset="UTF-8"＞＜title＞nodeType＜/title＞＜/head＞＜body＞＜p＞今日は外でランチを食べま...JS--ノードの種類を取得
最初の子ノードと最後の子ノードを取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、【最初の子ノードと最後の子ノードを取得する】1，firstChildプロパティこのノードの1つ下の階層にある子ノードの中の最初のノードを取得することが出来る。書式；node.firstChild2，lastChildプロパティ】このノードの1つ下の階層にある子ノードの中の最後のノードを取得することが出来る。書式；node.lastChildこれらの戻り値としてNodeオブジェクトを返します。子ノードがなかった場合はnullが返ります。例えば特定のノードの子ノードの中で最初と最後の子ノードを取得するには次のように記述します。letelement=document.getElementById('mai...ノードの子・親・兄弟ノードを取得--2
ノードの子・親・兄弟ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【すべての子ノードを取得する】DocumentオブジェクトのgetElementByIdメソッドやquerySelectorメソッドなどを使って要素ノードを取得したあと、NodeオブジェクトのchildNodesプロパティを参照することで、このノードの1つ下の階層にある子ノードをすべて取得することができます。・書式node.childNodesこのプロパティは参照専用です。戻り値としてNodeListオブジェクトを返します。NodeListオブジェクトは複数のノードの集合です。NodeListオブジェクトではlengthプロパティとitemメソッドが用意されており、次のように取得したノードの数を取得したり、...ノードの子・親・兄弟ノードを取得--1
querySelectorのサンプル【開発環境】OS：Win11（64ビット）VSCode1.72.2、【querySelectorのサンプル】querySelectorメソッドはCSSセレクタ形式で条件を指定して要素ノードを取得する。ブラウザを立ち上げるボタンを押すとコンソールに表示されたら、OK【querySelectorAllのサンプル】querySelectorAllメソッドを使ったサンプルを試してみます。querySelectorAllメソッドは条件に一致するすべての要素ノードを取得します。ブラウザを立ち上げるボタンを押すquerySelectorのサンプル
CSSセレクタ形式の条件に一致する要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【querySelectorメソッドおよびquerySelectorAllメソッド】querySelectorメソッドおよびquerySelectorAllメソッドは、CSSのセレクタ形式で条件を指定して一致する要素ノードを取得します。id要素の指定といった簡単なものから条件を組み合わせた複雑なものまで指定することができます。【querySelectorメソッド】querySelectorメソッドはCSSセレクタ形式で条件を指定して要素ノードを取得します。・書式document.querySelector(selectors)引数にはCSSセレクタ形式の値をDOMStringオブジェクトで...CSSセレクタ形式の条件に一致する要素ノードを取得
name属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【getElementsByNameメソッド】DocumentオブジェクトのgetElementsByNameメソッドはname属性の値を指定して要素ノードを取得します。・書式document.getElementsByName(name)引数にはname属性の値をDOMStringオブジェクトで指定します(例えば'hobby'など)。戻り値はNodeListオブジェクトです。NodeListオブジェクト→複数の要素ノードの集合です。NodeListオブジェクトではlengthプロパティとitemメソッドが用意されており、次のように取得した要素ノードの数を取得したり、指定の要素ノードを取り出すこと...name属性の値を指定して要素ノードを取得
class属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【getElementsByClassNameメソッド】DocumentオブジェクトのgetElementsByClassNameメソッドは、要素のclass属性の値を指定して一致する要素ノードをすべて取得します。【書式と使い方】・書式document.getElementsByClassName(classnames)引数にはclass属性の値をDOMStringオブジェクトで指定します(例えば'box'など)。複数のclass属性の値を指定することができ、指定した値のいずれかに一致する要素ノードをすべて取得します。その場合は空白文字で区切って指定します(例えば'boxmenu'など)。戻り値...class属性の値を指定して要素ノードを取得
タグ名を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【getElementsByTagNameメソッドとは】getElementsByTagNameメソッドは、要素のタグ名を指定して一致する要素ノードをすべて取得します。【getElementsByTagNameの書式と使い方】DocumentオブジェクトのgetElementsByTagNameメソッドはタグ名(要素名)を指定して要素ノードを取得します。・書式はdocument.getElementsByTagName(tagname)引数にはタグ名をDOMStringオブジェクト(文字列と考えて頂いて構いません)で指定します(例えば'div'や'p'など)。タグ名に'*'を指定した場合はすべての要素...タグ名を指定して要素ノードを取得
id属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【getElementByIdの書式と使い方】DocumentオブジェクトのgetElementByIdメソッドはid属性の値を指定して要素ノードを取得します。・書式document.getElementById(id)引数にはid属性の値をDOMStringオブジェクトで指定します(例えば'example'など)。戻り値はElementオブジェクトです。見つからなかった場合はnullが返されます。例えばid属性の値として'example'が設定された要素ノードを取得するには次のように記述します。letelement=document.getElementById('example');id属性...id属性の値を指定して要素ノードを取得法
DOMとは【DOMとは】DOMとはDocumentObjectModelの略でHTMLやXMLのドキュメントに含まれる要素や要素に含まれるテキストのデータをオブジェクトとして扱い、ドキュメントをオブジェクトが階層的に組み合わされたものとして識別し、JavaScriptなど色々なプログラミング言語などから、オブジェクトを扱うためのAPIを提供している。DOMは標準化団体であるW3Cで以前は標準化が行われていましたが、現在ではWHATWGによって標準化が行われています。【ノードとは】DOMではドキュメントを構成するオブジェクトのことを「ノード」と呼びます。ノードはさらに種類に応じて「要素ノード」「テキストノード」「属性ノード」などに分類されます。【DOMの階層構造】DOMでは対象となるドキュメントをノートの階...JS--DOM
Ajaxを使った非同期通信の実践編2【開発環境】OS：Win11（64ビット）クロムBrackets【Bracketsを使用する】1，Bracketsを起動する2，作業用フォルダを作る---「work」3，新規ファイルを作る--getText1.html4,コードを書く＜!DOCTYPEhtml＞＜htmllang="ja"＞＜head＞＜metacharset="UTF-8"＞＜title＞Ajaxサンプル＜/title＞＜/head＞＜body＞＜p＞ボタンをクリックするとデータを取得します。＜/p＞＜form＞＜inputtype="button"value="ロード"onClick="getData()"＞＜/form＞テキストデータが入る部分を下記のように書く＜divid="result"＞＜/...Ajaxを使った非同期通信の実践編2
非同期通信の実践編【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムここでは、VisualStudioCodeの拡張機能であるLiveServerをインストールした状態で説明をする。出来ない人はBracketsを使ってください！【フォルダの作成】VScoodを開き、フォルダを開く【ファイルを2つ作る】1.Webページを表示する「sample1.html」ファイル作る2,データ用のファイル「data.txt」を作る【Webベージを立ち上げる】【サーバを立ち上げる】「データの取得」ボタンを立ち上げると、下図のようになったら成功Ajaxを使った非同期通信の実践編
Ajaxを使った非同期通信方法【開発環境】OS：Win11（64ビット）Brackets-2.2.1クロム【非同期通信手段の概要】ここではAjaxによる非同期通信を行うためにXMLHttpRequestオブジェクトの作成し、サーバへリクエストを送信したあと、サーバからレスポンスを受信するまでの方法について解説する。【XMLHttpRequestオブジェクトを作成する】最初にXMLHttpRequestオブジェクトを使って、XMLHttpRequestオブジェクトのインスタンスを作成する。コンストラクタはnewXMLHttpRequest(値1，値2)のように引数がある。・書式letrequest=newXMLHttpRequest();//変数をインスタンス化する（オブジェクトを作成する）【HTTPリクエ...Ajaxを使った非同期通信方法
非同期通信を行う方法【開発環境】OS：Win11（64ビット）Brackets-2.2.1クロム【Ajaxとは】Ajax（エイジャックス）とは、Asynchronous+JavaScript+XMLの略称で、JavaScriptの組み込みオブジェクト「XMLHttpRequest」を用いた非同期処理のことです。【非同期通信と同期通信の違いは】同期通信→ブラウザ側からサーバにリクエストを投げてからレスポンス（応答）があるまで、ほかの処理が出来ない。非同期通信→同時に複数の処理をしたり、前の処理が終わる前に、順番を待たずに次の処理を始める通信を指します。サーバからのレスポンスを待っている間に、ほかの処理をすることが出来る。【XMLHttpRequestオブジェクトのコンストラクタ】Ajaxを使った通信を行う最...Ajaxを使った非同期通信
Windows用BracketsについてBracketsは、Webサイトの設計が簡単にできる、軽量で強力なオープンソースのテキストエディタです。標準で基本機能が備わっていて、使いやすいので、初心者には最適なテキストです。昔はライブプレビューをすると、Chromから拒否されたが、V2.0.1からは改善された。これによって、同期通信が使える様になった。【ダウンロード】Bracketsの公式ホームページ<の下記のところをからダンロードを行ってください成功すると、PCのダンロードにが表示される【インストール】「Brackets-2.2.1.exe」をクリックすると、インストールが開始される。設定任意のフォルダを選択し、同意にチェックすると「次へ」をクリックする標準を選択すると、インストールが開始される。完了すると...Windows用Brackets
テキストエディタPhoenixCodeに付いて【Brackets→PhoenixCode】Bracketsは、Webサイトの設計が簡単にできる、軽量で強力なオープンソースのテキストエディタでが、現在では、ライブプレビューが出来ないので、phoenixCoderエディターに移行標準で基本機能が備わっていて、使いやすいので、初心者には最適です。また、AjaxによるWebサーバが簡単に出来る。【ダウンロード】公式サイトから、ダウンロードする下記のファイルがダンロードされる（Win1164bit）【インストール】「Phoenix.Code_3.7.3_x64-setup.exe」をクロックすると、1、表示される「次へ」をクリック2.「同意する」をクリック3任意のフォルダにインストールしたい場合は「参照」クリックす...テキストエディタ：PhoenixCodeについて
