ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

Javascript

【Javascript,PHP】AjaxでjsからPHPへデータの受け渡し

AjaxでjsからPHPへデータの受け渡し http://qiita.com/katsunory/items/9bf9ee49ee5c08bf2b3d html <h1>Ajax form</h1> <h2>input</h2> <table> <tr> <th>name</th> <td><input type="text" id="name"></td> </tr> <tr> <th>pass</th> <td><input type="text" id="pass"></td> </tr> </table> <button id="btn">送信</button> <h2>result<…</h2>

【Javascript,PHP】Ajax、JSON、データフォーマットの種類

Ajax、JSON、データフォーマットの種類 Ajax Asynchronous JavaScript + XML サーバとの間の通信(データのやり取り)を非同期で行う 同期通信 結果が返されるまで待って、結果を受け取ってから次に進む 非同期通信 結果が返されるまで待って、結果を受け取っ…

【node.js】macへのインストールと概要

node.jsとは サーバーサイドのJavaScript JavaScript アプリケーションのプラットフォーム ノンブロッキングI/O I/Oの結果を待たないで処理をすすめる。 I:O=入出力 C10K問題 (クライアント1万台接続問題)を解決 C10K問題 1万接続でパフォーマンスが落ちな…

【PHP,MySQL,Javascript】メモアプリを制作

メモアプリ1 追加と排除ができる簡単なメモアプリです。 目的 データベースとのやりとりの基礎を実際に理解する。 見やすいUI,UXを考えて作る。 レンタルサーバーにアップロードする。 使用するもの PHP データベースとのやりとり、データの表示 MySQL レン…

【javasript】要素の高さをそろえる関数 7/7更新

高さをそろえる関数 探してもjQueryばかりだったのでjavascriptのみで高さをそろえられる関数を作ろうとしました。 目標 第一引数に揃えたい要素、第二引数に何個ずつそろえるかを指定し、 引数を変更するだけで高さを揃えられるようにする。 heightEquality…

【javascript】フレームワーク

javascriptフレームワーク 引用 https://furien.jp/columns/187/https://rdlabo.jp/angular2-364.phphttp://qiita.com/kmszk/items/2e3d6d2a71ae774d080a jsが有効化されているのが当たり前の時代jsフレームワークでviewを構築するような時代 フレームワーク…

【javascript・SVG】SVGの基本とjavascriptを使ってのアニメーション

svg scalable Vector Graphics 拡大縮小してもきれいに見える XMLで書かれている svgタグの書き方 <svg width="600" height="300" viewBox="0 0 400 200"> <rect width="400" height="400" fill="red"/> <rect width="100" height="50" fill="blue"/> </svg> 閉じタグない物には「/」を末尾につける。 下に書いたものの方が描画するとき上に描画される rect 四角形を作れる。 viewbox svgのどの位置を枠の中に表…

【javascript・css3】jsで作るtoggleメニュー

DEMO 目標 Timer処理でのスライドイン・アウト表現 javascriptでcss3のアニメーションを動かす 反省、改善点 コードの簡略化 heightを自動で取得できるようにする。 css3でもう少し簡単にかけるかもしれない。 コード html <div> <p id="nav_btn"> <span id="mark"> <span></span> <span></span> </span> </p> <ul id="toggle_menu"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li></li></ul></div>

【Javascript】フェイドイン・アウトするスライダー

DEMO 目標 複数の画像をフェイドイン、アウトして切り替えていく 読み込んだ時、画像をランダムに表示 ボタンを押すと特定の画像を表示 画像の切り替えに合わせてボタンも切り替わる 実装 2枚の画像を重ねることで対応。z-indexとopacityをタイマー処理で増…

【javascript】キャラクターを操作して動かすアニメーション

DEMOこれが歩きます。 関数をまとめるところは今後やっていきます。。。 <html lang="ja"> <head> <meta charset="UTF-8"> <style> #img{ position:absolute; z-index:-999; top:100px; left:100px; } .controlar{ position:static; z-index:999; width:100px; height:100px; text-align:center; } .controlar s</meta></head></html>…

【javascript】DOMの操作・参照など【随時更新】

最終更新:2017/4/22 DOMの操作 要素の参照 getElementById idを参照 <div id="test"></div> <script> var test = document.getElementById('test'); test.textContent=('hello.'); </script> getElementsByClassName classを参照 document.getElementsByClassName('class'); getElementsByTagName …

【javascript】タイマー処理を使った画像のフェイドイン・アウト

DEMO html <p><img src="img/img1.jpg" alt="photo" id="img"></p> <ul> <li id="f_out"> フェードアウト </li> <li id="org"> 元の画像 </li> <li id="f_in"> フェードイン </li> </ul> </html> javascript var f_out = document.getElementById('f_out'); var f_in = document.getElementById('f_in'); var img = document.getElementById(…

【javascript】タイマー処理をつかったスライドショー

DEMO html <html> <head> <meta charset="UTF-8"> </head> <body> <p> <img id="gazou" src="img/img1.jpg" alt="potato"> </p> <button id="play">play</button> <button id="stop">stop</button> <script type="text/javascript" src="script/slide1.js"></script> </body> </html> javascript var play_…

【javascript】タイマー処理【随時更新】

タイマー処理 setInterval 一定時間ごとにある処理を繰り返す。 前の処理が終わったかどうかを"判断せず"に繰り返す。 setInterval(function, 時間指定,functionの引数1, functionの引数2,…) 例 指定した関数を指定時間ごとに繰り返す。 var i = 0; function…

【javascript】連想配列【随時更新】

連想配列 オブジェクトとして扱われる。 連想配列のキーになるシンボルの事をプロパティという Objectコンストラクタ 生成 //Objectコンストラクタ var obj = new Object(); Arrayコンストラクタ var arr = new Array(); </script> 書き方 var obj = { a: 'あ',b: 'か…

【javascript】DOMの操作・イベント【随時更新】

HTMLイベントハンドラ属性 HTMLタグに記入できる <div onclick="alert('クリックされました。')">button</div> 関数の呼び出し <div onclick="hello();">button</div> <script> function hello(){alert('hello');}; </script> イベントリスナー addEventListener Nodeが持つメソッド。引数が3つある test.addEventListener('イベント名','イベントリスナー(呼び…

【javascript】正規表現を扱うオブジェクト【随時更新】

正規表現とは? 特定のパターンを文字列で指定して一致する文字列を検索する方法。 柔軟に検索できる。 数値や文字列などを指定できる。 webサービスではエラーの検出等で使う。 正規表現の使いどころ https://webnaut.jp/markup/606.html RegExp var 変数 =…

【javascript】関数やMath,Numberを使った復習

関数を使って練習したコードを上げていきます。 引数に入力した半径を元に円の面積をpxで表す /*-----css-----*/ #b{ width:20px; height:20px; margin:0 auto; background:linear-gradient(-45deg,#f33,#33f); color:#fff; text-align:center; } /*-----jav…

【javascript】数値を扱うオブジェクト(Number,Math)【随時更新】

Numberオブジェクト 数値や浮動小数点を扱うことができる。 無限大や非数などを表すプロパティがある。変数に数値を代入したり、数値を扱った計算をすると自動的で作成される。Numbeobjectの生成 //変数numに1を生成 var num = new Number([1]); //変数numに…

【javascript】関数(ユーザー定義関数)【随時更新】

関数の定義と呼び出し //関数の定義 function 関数名{ } //関数の呼び出し 関数名(); 引き数の指定。 function 関数名(引数1 引数2){ 実行する処理。 } 引き数は変数も指定できる。 function add(a,b){ var c = a + b; document.write( a + '+' + b + "=" + …

【javascript】document.writeを使わずに九九の計算表

前にdocument.writeを使って100 x 100の表を作りましたが今回はinnerHTMLで指定して作りました。DEMOhtml + javascript <body> <div id="btn">100 x 100</div> <table id="table"> </table> <p> </p> <script> var btn = document.getElementById('btn') btn.onclick = cl; var table = document.getElementById('table'); var nu</body>…

【javascript】cssスプライトを再現

javascriptでcssスプライトを再現 後からもっとスマートなやり方に改変していきたいと思います。・4/7時点でのDEMOhtml <ul> <li><a href="#"><img src="img/js_sp1.jpg" onmouseover="this.src='img\/js_sp6.jpg';" onmouseout="this.src='img\/js_sp1.jpg';" name="a">HOME</li> <li> <a href="#"></a></li></ul>

【javascript】Dateオブジェクト【随時更新】

日付、時刻を扱う Date 日付、時刻を扱う為のオブジェクト。 日時を1970年1月1日0:00からの経過時間をミリ秒で保持している。 ブログの内容も復習 Dateオブジェクトを生成 var a = new Date();//現在の日付と時刻を生成 var b = new Date(1000);//1000ミリ秒…

【javascript】画像置換、for文での表組み作成

onmouseoverによる画像置換 DEMOhtml <li><img src="img/photoS1.jpg" alt="1" onmouseover="change(1);" onmouseout="end();"></li> <li><img src="img/photoS2.jpg" alt="2" onmouseover="change(2);" onmouseout="end();"></li> <li><img src="img/photoS3.jpg" alt="3" onmouseover="change(3);" onmouseout="end();"></li>

【javascript】オブジェクトについてとビルトインオブジェクト【随時更新】

オブジェクトとは プログラムで扱う情報を部品化して管理 オブジェクトの種類 ビルトインオブジェクト webブラウザのオブジェクト DOM(Document Of Model) ユーザー定義オブジェクト ビルトインオブジェクト javascriptに組み込まれているオブジェクト。 ECM…

【javascript】 break、continue

break swich文を抜ける。 break文がない場合、それ以下のcaseも実行される。 var x = 20; switch(x){ case 10: document.write(x + 'は十です。'); break; case 20: document.write(x + 'は二十です。'); break; case 30: document.write(x + 'は三十です。'…

【javascript】for構文で元号と西暦を表示

javascriptで元号から西暦を計算してtable内に書き出します。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>review</title> <style> table{ text-align:center; font-family:Arial; border-collapse:collapse; width:200px; margin:0 auto; } th,td{ border:1px solid #000; } </style> </head> <body> <table> <tr> …</tr></table></body></html>

【javascript】switch構文~setTimeout等

swich構文の復習 var x = 1; switch(x){ case 1: console.log('1です。') ; break;//必須 case 2: console.log('2です。'); break; default: console.log('1と2以外の値です。'); break; } caseは並べてかける。 switch(x){ case 1: console.log('1です。') …

【javascript】 配列【随時更新】

基本的な書き方 配列の定義 var 配列名 = new Arry(要素数=最初の空きの数) var a = new Arry(6) //中が空でも.lengthで6が返される。 //一般的には要素数指定しない。 配列の初期化 var 配列名 = []; var 配列名 = [1,2,3,4,5]; 値の参照など var arr = [2,…

【javascript】関数の練習

関数の復習javascriptの関数を改めて復習します。関数を作る //関数aを作成 function a(){ console.log(333); } //aを呼び出し a(); 引数を指定 function a(x,y){ console.log(x + y); } //xとyにそれぞれ引数4と5を指定 a(4,5); callback関数関数の引数に関…