web制作勉強中です。

職業訓練校でweb制作を勉強しています。勉強のメモなど記録します。

【授業メモ】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>