読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

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

【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関数関数の引数に関…

【javascript】論理演算子、数値・文字列・真偽値への変換、三項演算子

新しく学んだことや復習をまとめて行きます。論理演算子論理AND演算子両辺がtrueならtrue x=7; y=2; if(x === 7 && y === 2){ console.log('xは7でyは2'); } 論理OR演算子両辺どちらかがtrueならtrue x=7; y=2; if(x === 7 || y === 2){ console.log('xは7で…

【javascrip】 分岐とparseIntで平均体重をもとめる

男女別に平均体重を男女別に求める※数値は適当です var heigth; var weight; var man; man = confirm('あなたは男性ですか?',''); height = window.prompt('あなたの身長を半角英数字でかいてね',''); height = parseInt(height,10); //man がtrueかどうか…

【javascript】 ランダム関数と条件分岐の練習

新しく学んだことや復習をまとめて行きます。random関数とif構文を使ったおみくじ var omikuji =parseInt(Math.random() * 10) + 1; console.log(omikuji); if (omikuji == 1){ console.log('大吉'); }else if(omikuji ==2){ console.log('中吉'); }else if(…

【javascript】ポップアップウィンドウを作る

javascriptでフラットなポップアップウィンドウを作りました。画像ごとに値を取得して違う画像を表示します。 ボタンのホバーアニメーションも少し練習しました。ポップアップウィンドウ DemoHTML(top page) <html lang="ja"> <head> <meta charset="UTF-8"> <title>lightbox</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>

【japascript】1ページで内容が切り替わる動き

javascriptでコンテンツが切り替わる動きを作りました。 コンテンツが切り替わる tabをクリックで内容が切り替わります。DemoHTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>a</title> <link rel="stylesheet"href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <div class="container"> <ul> </ul></div></body></html>

【HTML+CSS+JS】クリックでDOMを操作

DOMを追加する ボタンを押すと🐼が現れ、ボタンが消えます。Demohtml+css+javascript <html lang="ja"> <head> <meta charset="UTF-8"> <title>a</title> <style> .box{ font-size:50px; text-align:center; line-height:200px; background:#ffdddd; height:200px; width:200px; margin:0 auto; } #BTN{ font-size:12px; font-wei</meta></head></html>…

【javascript 】条件分岐構文

条件分岐 if else書き方1 if(条件) trueの時の処理 else falseの時の処理 if else書き方2 if{ trueのときの処理 }else{ falseのときの処理 } else if if(条件1){ 条件1がtrueの時 }else if(条件2){ 条件2がtrueの時 }else{ 全て正しくないとき } switch s…

【Javascript】基本的な記述2

Javascriptの記述法について勉強した事をまとめます。 Javascriptの記述方法 HTML内に記述 ブラウザでHelloと表示されます。 <html> <body> <script> document.write("Hello "); </script> </body> </html> 外部から読み込み 外部からjsディレクトリ内のsample.jsを読み込みます。 <script src="js/sample.js"></script> 文章を改行する時は(…

【Javascript】基本的な記述

Javascriptの記述法について勉強した事をまとめます。Javascript記述の基本 大文字と小文字は区別される セミコロンで文が終わる。 処理が完結しており改行されていれば終わり。 改行してあってもまだ続く記号があったり、分が未完結なら改行の次も続いてい…