新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

DOM

【javascript】jsonの配列から動的にリストを生成する

【今回の紹介】 掲題の通り 【内容】 jsonの配列から動的にリストを生成する ■参考ソース <script> window.onload=function(){ addProblem(); addOption(); } function addOption(){ for(var i=0;i<4;i++){ var add_li=document.createElement('li'); add_li.id='res…

【php・Ajax・mysql】Webtodoリスト完成~はじめてjs・php・Ajax・mysqlを連携させ、わかったこと・わからなかったこと~

【今回の紹介】 簡易なWebアプリを作ってみたいということから、Webtodoリストを作成しました。 その振り返りとメモを兼ねて紹介します。 【内容】 ■当初の目的 ①Webアプリ作成の全体像をつかむ ①-①汎用的な機能(登録・変更・削除・検索)を作成してみる ①-…

【Javascript・php・xmlhttprequest・ajax】外部ファイル(text)に書き込む&読み込む

【今回の紹介】 ずっとできなかったことができるようになりました。 掲題にある通り外部のファイルの読み込みと書き込みを行う事です。これができることにより具体的には、 javascriptで動的に追加したものが保存できます。 【処理の流れ(概要)】 ①追加ボ…

【PHP・Javacsript】(完成)簡易な商品購入サイトを作る ~ユーザが入力した情報を別画面のテーブルで受け取る~

【今回の内容】 とても簡易な商品購入サイトができましたー。 ページ遷移する際のデータの受け渡しの感覚がつかめてきたような気がします。 最近、プログラミングが結構楽しい。 ・思ったようにプログラムが動く感じ ・想像したものが少しずつ出来ていく感じ…

【PHP・Javascript】簡易な商品購入サイトを作る ~入力画面処理(PHPにJSを埋め込む)~

【今回の内容】 前回から簡単な商品購入サイトを作るみたいな流れでやっています。 今回は、情報を入力する画面の作成します。 【やること】 1、PHPにJavascriptを埋め込む 2、クライアント側でプルダウン選択時に商品の金額をで自動計算 3、クライアント…

【Javascript】いままで作成したもの ~メモ~

【今回の内容】 フォルダの整理を行っていて、出てきたものを あげてきます。 ソースをそのまま貼り付けていますので、読みにくいかもしれません。 こう書いた方がよいなどのご意見などがありましたら是非ください。 【ソース】 「ウィンドウのサイズを出力…

【Javascript・DOM】少しでも実用的なモノを作る~WebTodoリスト~

【今回の紹介】 今回は、 WebTodoリストを作成します。 たいした理由はなくて、 会社の先輩がJavascript・DOMを勉強をする過程でWebTodoリストとかを作成し、自分で使いながら改造していた からです。笑 【WebToDo】 目的:DOMの勉強 ・各ノー…

【Javascript・DOM】プルダウンによりカテゴリーを絞りながら、リストを追加する

【今回の内容】 今回は、 ・プルダウンの動的生成 ・動的生成したプルダウンに属性・テキストを与える ・動的に生成したプルダウンで選択した情報をもとに リストを追加する というのをやります。 DOM、たくさん使います ざっくりいうと ・既存のプルダウ…

【Javascript】きれいなJavascriptについて

【今回の内容】 掲題にあるように今回は、 きれいなJavascriptについて です。 この「きれいな」には様々な解釈があると思います。 ・ロジックがしっかりとしている ・形式がしっかりしている(コメント・変数の宣言位置) ・HTMLからしっかり外出しされ…

【JavaScript・Ajax・XML】JavaScriptから、XMLHttpRequestを使用して外部のXMLファイルを読み込む

【本日の内容】 掲題ににあるように、今回は、 「JavaScriptから、XMLHttpRequestを使用して外部のXMLファイルを読み込む」 をやっていきたいと思います。 【テキストで読み込むこととの違い】 前回はテキストファイルを読み込むことを行いまし…

【JavaScript】外部のテキストファイルをページ遷移なしで読み込む

【今回の内容】 今回は、前回から調べていたページ遷移なしで同一ページないの値をサーバとやり取りを行い、更新することを行ってみたいと思います。 具体的には、 「HTMLページに外部ファイルを読み込み、ページの一部を更新する」というの行ってみます。 …

【Javascript・XML・DOM】XMLとはどんな特徴をもつのか~前回までの流れを受けて~

【xmlとは】 xmlとは、汎用性の高いデータを長期的に保存することができる言語。 ※自分でデータ形式(要素タグなど)を作成できるが、 大文字・小文字・タグの入れ子の関係は厳格ニ規定する必要あり。 【xmlの特徴】(CSV形式やバイナリ形式との比…

【Javascript】XMLHttpRequestに関する基礎的なメモ

【XMLHttpRequestによりできること】 「XMLHttpRequest」とはjavaScriptなどに書き込むことができ、 指定したURLと自由にHTTP通信を行えるもの。 Ajax関連の書籍を読むと必ずと言っていいほど出てくるもの。 →動的なページ生成をページ遷移せずに…

【Javascript・DOM】動的なリストの作成とDOMのツリー構造③

【今回やること】 今回も前回の続き。 前回の動的なリストに以下の点を追加します。 ・今回はユーザが選択するリストに<a href>を追加し、リンク設定を出来るようにする 【ノードの構造】 今回のノードの構造は以下のなっていると思います。 ※bodyのところでもっと枝</a>…

【Javascript・DOM】動的なリストの作成とDOMのツリー構造

今日は、DOMを使って、動的にリストを生成します。 テーブルと同様でリストを動的に生成していきたいと思います。 うまく活用出来たら、これで自分だけのリンク集とか作れるんじゃないかなと思います。(生成したHTMLをどう保存するかは学習の必要が…

【Javascript・DOM】全てのテキストボックスを初期化する部品

今日はDOMについて。 【DOMとは】 DOMとは、「doccument object model」の略で、HTMLやXMLに含まれる要素にアクセスできる仕組みことだそうです。 【DOMでできること】 DOMを利用することによって、サーバサイドではなく、クライアント側で…

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }