【授業メモ】JavaScriptの型変換
JavaScriptの型変換
Number()
数字以外を含む文字列を引数に指定するとNaNを返すので注意が必要。
parseInt()
文字列を整数に変換し、実数の場合は小数点以下を切り捨てる。
var num = prompt( '半角数字を入力してください' );
num = parseInt( num );
promptで入れたものは数字を入れてくださいと書いても、
コンピューターはpromptで入れられたものは文字列として認識している
→そのため、入れられた文字列を数字に変換する指示が必要→ num = parseInt( num );
parseFloat()
文字列を実数に変換する。引数に数字以外の文字が含まれている場合は無視される。
CSS3のアニメーション
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーション</title>
<style>
html,body{
margin:0;
padding: 0;
}
body {
}
#box {
width: 300px;
height: 250px;
margin: 100px auto 0;
background: orange;
animation-name: bg-color;/*必ずアニメーションの名前を付ける*/
animation-duration: 10s;/*アニメーションの長さを指定*/
animation-iteration-count: infinite;/*アニメーションのループ設定*/
}
@keyframes bg-color {/*アニメーションの名前をキーフレームに入れる*/
0% {background: yellow;}
25% {background: red;}
50% {background: green;}
75% {background: blue;}
100% {background: pink;}
}
#wrapper {
width: 300px;
height: 250px;
margin: 100px auto 0;
animation: move 1s;
animation-iteration-count: infinite;
}
@keyframes move {
0% {transform: scale(0,0);}
100% {transform: scale(300px,100px);}
}
</style>
</head>
<body>
<div id="wrapper"><div id="box"><img src="bg.png" alt=""></div></div>
</body>
</html>