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

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

【javascript】ボタンごとに別ウィンドウで違う画像を表示【Todays code】

Javascript

それぞれのパンダをクリックすると新しいウィンドウで大きい画像が表示されます。

f:id:p_and_a_fam:20170318002739p:plain
●Demo

HTML(top page)

<!DCOTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../style.css">
<script type="text/javascript"src="../script.js"></script>
</head>
<body Onload="view();">
<p>nihao</p>
<div id="img"></div>
<!--windowを閉じる-->
<p><button onClick="window.close();">閉じる</button></p>
</body>
</html>

HTML(new window)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charaset="UTF-8">
<title>otherwindow</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p>click and Expand panda.</p>
<div class="box img1" onClick="img(1)"></div>
<div class="box img2" onClick="img(2)"></div>
<div class="box img3" onClick="img(3)"></div>
</div>
</body>
</html>

css

@charset "utf-8";
.container{
  width:620px;
  margin:0 auto;
}
.box{
  float:left;
  cursor:pointer;
  border:2px solid #aaa;
  box-sizing:border-box;
  height:200px;
  width:200px;
}
.box+.box{
  margin-left:10px;
}
.img1{
  background:url("img.jpg") no-repeat center center/cover #ff8888;
  background-blend-mode:screen;
 }
.img2{
  background:url("img.jpg") no-repeat center center/cover #88ff88;
  background-blend-mode:screen;
 }
.img3{
  background:url("img.jpg") no-repeat center center/cover #8888ff;
  background-blend-mode:screen;
 }
 .img1:hover,.img2:hover,.img3:hover{
  opacity:0.7;
 }
p{
  text-align:center;
 }
 button{
   margin:0 auto;
 }
#img{
  text-align:center;
  padding-bottom:20px;
}

javascript

function img(x){
/*viewerフォルダ内のindex.htmlの後ろにno=x(引数)をつけている*/
var viewer="./viewer/index.html?no="+x;
/*新しくwindowを開く(windowの引数は3つ)*/
window.open(viewer,"viwer","width=600,height=550,menubar=no,toolbar=no,scrollbars=no");
}
/*new window*/
function view(){
  /*urlの後ろの?以降を抽出*/
  var GET_OP=location.search;
  /*GET_OPで取得した値を=の前後で分ける。配列に格納される。*/ 
  GET_OP=GET_OP.substr(1);
  var AR_OP=GET_OP.split("=");
  /*AR_OPの2番目、つまり=の後ろの値→1を指定。*/
  var IMG_NO=AR_OP[1];
  /*変数IMG_NAMEにimgタグを書き出す値を入れる*/
  var IMG_NAME='<img src="../img0'+IMG_NO+'.jpg" width="400px" class="view_img">';
  /*IMG_NAMEを書き出す。*/ document.getElementById("img").innerHTML=IMG_NAME;
}

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

Javascript

javascriptでコンテンツが切り替わる動きを作りました。

コンテンツが切り替わる

tabをクリックで内容が切り替わります。

●Demo

HTML

<!DOCTYPE html>
<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>
<li id="tab1" onClick="change(1);">tab1</li>
<li id="tab2" onClick="change(2);">tab2</li>
<li id="tab3" onClick="change(3);">tab3</li>
</ul>
<div id="content1">
<div class="img"></div>
<p>
コンテンツ1</p>
</div>
<div id="content2">
<div class="img"></div>
<p>
コンテンツ2</p>
</div>
<div id="content3">
<div class="img"></div>
<p>
コンテンツ3</p>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";
/*reset*/
ul{
  list-style:none;
}
/*body*/
body{
  font-size:16px;
}
/*container*/
.container{
  margin:5% 10%;
  min-width:315px;
}
/*tab*/
ul{
  overflow:hidden;
}
li{
  color:#fff;
  font-weight:bold;
  text-align:center;
  text-shadow:2px 2px 2px #000;
  float:left;
  cursor:pointer;
  border-radius:15px 15px 0 0;
  line-height:30px;
  height:30px;
  width:100px;
}
li#tab1{
  background:#eeee88;
}
li#tab2{
  background:#ee88ee;
}
li#tab3{
  background:#88eeee;
}
/*content*/
#content2,#content3{
  display:none;
}
#content1,#content2,#content3{
  border-radius:0 15px 15px 15px;
  background:#eeee88;
  height:300px;
  padding:50px;
  box-sizing:border-box;
}
.img{
  float:left;
  background:#fff;
  height:200px;
  width:45%;
  margin-right:20px;
}
#content>p{
  float:left;
  width:45%;
}

javascript

function change(x) {
if(x==1) {	document.getElementById("content1").style.backgroundColor = "#eeee88";
document.getElementById("content1").style.display="block";
document.getElementById("content2").style.display="none";
document.getElementById("content3").style.display="none";}

if(x==2) {	document.getElementById("content2").style.backgroundColor = "#ee88ee";
document.getElementById("content1").style.display="none";
document.getElementById("content2").style.display="block";
document.getElementById("content3").style.display="none";}

if(x==3) {	document.getElementById("content3").style.backgroundColor = "#88eeee";
document.getElementById("content1").style.display="none";
document.getElementById("content2").style.display="none";
document.getElementById("content3").style.display="block";}
}

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

Javascript

javascriptでDOMの操作を勉強しました。

DOMを追加する

ボタンを押すと🐼が現れ、ボタンが消えます。

●Demo

html+css+javascript

<!DOCTYPE html>
<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-weight:bold;
  border-bottom:1px solid #000;
  cursor:pointer;
  text-align:center;
  width:100px;
  margin:10px auto;
}
</style>
</head>
<body>
<div class="box">
<p id="OUTPUT"></p>
</div>
<div id="BTN" onClick="addNode();">
PUSH!
</div>
<script>
function addNode(){
  var CHILD=document.createElement("p");
  CHILD.setAttribute("id","CLD");
  CHILD.innerHTML="🐼";
  var PARNET=document.getElementById("OUTPUT");
  PARNET.appendChild(CHILD);
  var CLD=document.getElementById("CLD");
  CLD.style.fontSize="50px";
  document.getElementById("BTN").style.display="none"
}
</script>
</body>
</html>

DOMを消したり出現させたりする。

PANDAを押すと🐼が現れ、REMOVEを押すと消えます。

●Demo

html+css+javascript

<!DOCTYPE html>
<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-weight:bold;
  border-bottom:1px solid #000;
  cursor:pointer;
  text-align:center;
  width:100px;
  margin:10px auto;
}
</style>
</head>
<body>
<div class="box">
<span id="PANDA">🐼</span>
</div>
<p id="BTN" onClick="add();">
PANDA
</p>
<p id="BTN" onClick="remove();">
REMOVE
</p>
<script>
function add(){
  document.getElementById("PANDA").style.display="block"
}
function remove(){
  document.getElementById("PANDA").style.display="none"
}
</script>
</body>
</html>

30分バナー製作2つ目(1day30min1bunner)

1day1bunner(1日一つバナー制作)

30分以内でバナーを作っていきます。

柑橘系炭酸飲料のバナー

f:id:p_and_a_fam:20170316105443j:plain
ターゲット
10代~20代
概要
新発売の炭酸果汁飲料
素材
レモン:フリー 商品:既存のものを合成加工
tool
Photoshop
time
30min

反省

新発売としては本当に印象的なものになっているのか?(10代20代がこれを見てクリックするか?)

この見せ方で商品パッケージを覚えてもらえるのか?商品が埋もれていないか?

目線の流れ的に文字の入れ方は適しているのか?フォントの種類、加工はこれでいいのか?

時間を区切ると完成度の低さが目立ってきます。作業工程を明確にして必要最低限な物は何か等、手より頭を動かす部分が大事だと感じました。

【CSS,HTML】transformでボタンをアニメーションさせる(Todays code)

HTML・CSS

transformでボタンのアニメーションを作りました。

ハンバーガーメニューの変形

不要論もあるハンバーガーメニューですが、アニメーションの練習として製作してみました。

上下二本が傾いてXに変形

●Demo

html

<div class="button1">
<span></span>
<span></span>
<span></span>
</div>

css

/*button*/
.button1{
  position:relative;
  height:100px;
  width:100px;
  margin-bottom:30px;
  transition:transform  0.4s;
}
.button1 span{
  display:inline-block;
  position:absolute;
  background:#000;
  width:100%;
  height:4px;
  transition:transform  0.4s,opacity 0.2s;
}
.button1 span:first-of-type{
  top;:0;
}
.button1 span:nth-child(2){
  top:50px;
}
.button1 span:nth-child(3){
  bottom:0;
}
/*button:hover*/
.button1:hover span:first-of-type{
  position:absolute;
  transform:translateY(50px)rotate(45deg);
  top:;0
}
.button1:hover span:nth-of-type(2){
  opacity:0;
}
.button1:hover span:nth-of-type(3){
  position:absolute;
  transform:translateY(-50px)rotate(-45deg);
  bottom:0;
}

回転してXに変形

●Demo

html

<div class="button2">
<span></span>
<span></span>
<span></span>
</div>

css

/*button*/
/*button2*/
.button2{
  position:relative;
  height:100px;
  width:100px;
  margin-bottom:30px;
  transition:transform  0.4s,opacity 0.2s;
}
.button2 span{
  display:inline-block;
  position:absolute;
  background:#000;
  width:100%;
  height:4px;
  transition:transform  0.4s,opacity 0.2s;
}
.button2 span:first-of-type{
  top;:0;
}
.button2 span:nth-child(2){
  top:50px;
}
.button2 span:nth-child(3){
  bottom:0;
}
/*button2:hover*/
.button2:hover{
  transform: rotate(360deg);
}
.button2:hover span:first-of-type{
  position:absolute;
  transform:translateY(50px)rotate(45deg);
  top:;0
}
.button2:hover span:nth-of-type(2){
  opacity:0;
}
.button2:hover span:nth-of-type(3){
  position:absolute;
  transform:translateY(-50px)rotate(-45deg);
  bottom:0;
}

transformとperspectiveで3D的な動きのボタン

●Demo

html

<div class="button2">
<span></span>
<span></span>
<span></span>
</div>

css

/*全体の変化のスピード*/
.button3,.button3::after {
	transition: all .3s;
}
/*最初に見えているボタン*/
.button3 {
  color: #333;
  line-height: 54px;
  border: 2px solid #333;
  box-sizing: border-box;
  height: 54px;
  text-align: center;
  width: 200px;
	position: relative;
  /*デフォルトより前面に出している*/
	z-index: 2;
  /*3Dのパースを指定*/
	perspective: 300px;
  /*3D空間を指定*/
	transform-style: preserve-3d;
}
.button3::after {
  position: absolute;
  display: block;
  content: '';/*空のコンテンツを入れている*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  transform-origin: center top;
  /*X軸を中心に90度の位置
  (つまり垂直になっていて見えない)*/
  transform: rotateX(90deg);
  opacity: 0;
}
.button3:hover {
	color: #fff;
}
.button3:hover::after {
  /*背面へ下げる*/
  z-index: -1;
  /*X軸を中心に0度の位置
  (回転していない=デフォルトの位置)*/
	transform: rotateX(0);
	opacity: 1;
}

30分バナー製作1つ目(1day30min1bunner)

1day1bunner(1日一つバナー制作)

30分以内でバナーを作っていきます。

脱毛サロンのキャンペーンバナー

f:id:p_and_a_fam:20170315111205j:plain
ターゲット
10代~20代女性
目的
キャンペーンの認知、サイトへの誘導
素材
フリー
tool
Photoshop,illustlator
time
30min

反省

完全にこのバナーの模写になってしまったのが反省点です。

日頃からアイディアをストックして、瞬間的にアウトプット出来る様にしていきたいです。

javasriptでDOMへの書き込みなど Todays code 3/14

Javascript

毎日1つ以上、コードの反復練習。

今日練習したコード

confirmでtrueならstyleが書き出される。

<script>// 
var x=window.confirm("背景に色を付ける");
if(x==true){
document.write("\
<style>\
body{background:#f00;}\
</style>\
");
}
</script>

・confirm 直訳:確認する

デバック方法

alert();

alertで変数を呼び出せばfalseかtrueか等が分かる。

onClick

<h1 onclick="alert('panda')">click!</h1>

・h1をクリックするとalertが現れる。

・この場合文字列は"ではなく'で囲まないとerror


タグ内に2つ以上書く

<h1 onClick="x=prompt('write panda');
alert(x);">click!</h1>

javascriptで使えるイベント

onClick
クリックしたとき
onDblclick
ダブルクリックされたとき
onKeyDown
キーが押し下げられたとき
onKeyPress
キーが押されたとき
onKeyup
押されていたキーが上がったとき
onMouseDown
マウスボタンが押し下げられたとき
onMouseUp
押されていたマウスのボタンがあがったとき/dd>
onMouseOver
マウスカーソルが領域に入ったとき
onMouseOut
マウスカーソルが領域から出たとき
onMouseMove
マウスカーソルが動いたとき
onLoad
読み込みが完了したとき
onUnload
別のページに移動する前
onFocus
入力フォーカスを得た
onBlur
入力フォーカスが外れたとき
onSubmit
送信ボタンが押されて送信される直前
onReset
リセットボタンが押されてリセットされる直前
onChange
セレクトボックスなどの選択項目が変化したとき
onSelect
セレクトボックスなどの選択項目が選択されたとき
onResize
サイズを変更されたとき
onMove
移動したとき
onDragDrop
ドラッグアンドドロップされたとき
onAbort
読み込みが中止されたとき
onError
エラーが発生したとき

関数にしたものをタグ内で呼び出す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function a(){
x=prompt("入力して")
alert(x);
}
</script>
</head>
<body>
<header>
<h1 onClick="a();">click</h1>
<p>click up column</p>
</header>
</body>
</html>

関数に引数を渡す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function a(b){//引数bを指定
alert(b);//bに代入された値をalertする
}
</script>
</head>
<body>
<h1>click under button</h1>
<button onClick="a('black & white')">panda</button>
<!--関数a(b)の引数bにblack & whiteを渡す-->
<button onClick="a('black & yellow')">tiger</button>
<!--関数a(b)の引数bにblack & yellowを渡す-->
</body>
</html>

・pandaボタンを押せばblack & white、tigerボタンを押せばblack & yellowが表示される。

Nodeを追加

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function addNode(){
/*addNodeという関数を作る。*/
var child=document.createElement("p");
/*pを新たに作る変数child*/
child.innerHTML="●○panda○●";
/*childの中に●○panda○●と書き込む*/
var parnet=document.getElementsByTagName("div").item(0);
/*一番最初のdiv( item(0) )を指定する変数parnet*/
parnet.appendChild(child);
/*parnetの子ノードリストの末尾にchildを追加*/
}
</script>
</head>
<body>
<h1>add Node</h1>
<button onClick="addNode();">
infinity panda button
</button>
<div></div>
</body>
</html>

・「infinity panda button」を押す度に<p>●○panda○●</p>が<div><div>の中に書き込まれていく

createElement
新たな要素を追加(属性(classやid)はつけられない)
innerHTML=""
指定した要素の中に文字列を書き込む
document.getElementsByTagName("")
タグを指定する
getElementsByTagName("")
タグを指定する
item()
Nodelistを指定(何番めの指定した要素か)
appendChild()
指定した親Nodelistの子Nodelistの末尾にNodeを追加