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

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

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

JS

【javascript】オブジェクト(オブジェクトリテラル)、連想配列

【今回の紹介】 「オブジェクト(オブジェクトリテラル)、連想配列」 現場でなんかそれぞれ微妙に解釈が異なり、若干ぎくしゃくしたので、 整理します。 ※開発ブランクがある人、最近始めた人で議論すると、なんか上手くいきません。 曖昧な理解でやってた…

【php・mysql・javascript】DB連携メモ~現在のレコードの値から発行するsqlを変える・動的に追加するリストidの整合性を保つ~

【今回の紹介】 前回はDBとWebtodoリストを連携する過程で勉強になったことを紹介しました。 勉強になったことは全体としては、 ①CUIでテーブルを定義する②複数の値をPOSTし、DBへ登録する③現在のデータを見て、SQLを発行する④再度リクエスト…

【Javascript・php・xmlhttprequest・ajax】外部ファイル(text)に書き込む&読み込む(おまけ)~キャッシュについて~

【今回の内容】 今回はキャッシュについて考えてみたい 【前回までの流れ】 前回までで以下のようなデータの流れをつかむことができた。 ●入力→追加→保存→呼び出し→表示 しかし、前回記事にあげた動的要素の追加・保存・表示を行うプログラムの 動作確認を行…

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

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

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

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

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

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

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

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

【Javascript・Ajax・PHP】ページ遷移を行わず、テキストファイルに入力データのログを出力するサンプル

【今回の紹介】 今回は、 以前作成したWebToDoリストのログをとる と言う事をしたいと思います。 【HTTPプロトコルとは】 HTTPプロトコルは、Webでデータを交換する際に、用いているルールのことだそうです。 【HTTPプロトコルの特徴…

【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ファイルを読み込む」 をやっていきたいと思います。 【テキストで読み込むこととの違い】 前回はテキストファイルを読み込むことを行いまし…

【訂正】XMLの表記に間違いがあり

境内の通りです。 以前の記事に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(イベントハンドラ)】同一ページ内で指定した部分へ遷移する部品

今回は、イベントハンドラについて簡単なものを作ったので紹介します。 【イベントハンドラとは】 ページを閲覧していて、 ・プルダウンを選択したら、ページ繊維した ・文字や写真にマウスカーソルをあてたら、色が変わる写真が変わった ・ボタンをクリック…

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

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

【Javascript】 varの存在意義について

今回は、varの存在意義について。 当たり前ですが、「var」は変数の前につきますが、 ひとによってつけたり、つけなかったり まちまち そこにどんな意味があるのか?少し調べてみたので記載します。 varは通常このように書くと思います。 例)var i=0; ※ちな…

【Javascript】動的なテーブルの追加+選択した行を削除する

動的なテーブルシリーズです。 この前の記事の流れとして、動的にテーブルを生成して操作を行うという ことを紹介してきました。 グレープシティ社などからもエクセルライクをWebで実現するパッケージなどもでています。 参考URL:http://www.grapecity.c…

【Javascript】動的なテーブルの追加+選択したテーブルの行に着色する

動的なテーブルシリーズです。 この前の記事の流れとして、 グレープシティ社などからもエクセルライクをWebで実現するスプレッドというパッケージなどもでているなどといったことを紹介しました。 参考URL:http://www.grapecity.com/tools/products/spr…

【Javascript】動的なテーブルの追加

お客さんの業務から自分達の業務まで、テーブル構造で情報をまとめるということはよくあると思います。 グレープシティ社などからもエクセルライクをWebで実現するパッケージなどもでています。 参考URL:http://www.grapecity.com/tools/products/spread…

【Javascript】Javascriptの型制約について+オブジェクト型を調べる

Javascriptって型に関してゆるすぎないか 他の言語を利用してきた人はそういった印象をもつのではないでしょうか? 経験の浅い自分も同じような印象を持ちました。 では、そもそもなぜ型が必要なのか? 型のゆるさによって、開発者にどのような影響があるの…

【Javascript】オブジェクトのプロパティを取得する部品

今回は、オブジェクトのプロパティを表示する部品の紹介。 〇〇な動きさせたいんだけどなー どこいじればいいかなー このオブジェクトってこういうメソッド又はプロパティ持ってたっけ?? っと、ググルことは、よくあること。 検索すればどのオブジェクトに…

【初心者向け】HTML.Javascript.CSSを学ぶならこのツール!!

今回は、HTML.Javascript.CSSをこれから学びたいという人向けに便利ツールを紹介します! 紹介するのは、CODEPREPという便利ツールである 参考:http://codeprep.jp/ja このツールは以下の点で非常に魅力的である。 1、一方的な情…

【Javascript】Javascriptで動的にウィンドウサイズを取得

Webページを作成する際に、 ウィンドウのサイズでレイアウトが崩れるとか、崩れないとか、、 意外とウィンドウの大きさって重要であったりします。 この部品が即時的に役立つかはわかりませんが、動的にウィンドウの大きさがわかるシンプルなものを作りまし…

【Javascript】switch文で正規表現を使ってみよう!!!

前回、作成したシンプルな正規表現の部品から、今回は条件分岐を取り入れてみました。 実際の業務では、以下のような入力チェックを行うのかなと思います。 1、違うファイルに各項目のIDと項目のあるべき属性をまとめて管理する 2、入力チェックを行う際は…

【Javascript】Javascriptの正規表現について~最もシンプルな部品~

今回は、どんなシステムでも埋め込まれている入力チェックについての学習。 JSの正規表現学習メモです。 「処理の流れ」 1、テキストボックスのIDから値を取得 2、指定した正規表現で判定する ※返り値がNULL=一致しないという条件で判断しています こ…

.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; }