へべれけFXライフ java script

setInterval() と setTimeout() の違いのメモ

タイマー処理の違い

http://dotinstall.com/lessons/basic_javascript_tips/2115
を参考に
setInterval() と setTimeout() の違いのメモ

setInterval()
これは、処理が終わったことを考慮しないため
１秒間隔で処理しようとすると
終わっていないのに追加処理させていくので
最後にはクラッシュする

なので、複雑なものは

setTimeout() を使う
こちらは終わっているかどうか考慮してくれる

単純なものなら
setInterval() でもOK
でもできるだけ
setTimeout() で書いた方が楽

１秒後とに１たすのを setInterval() なら
setInterval(function(){
console.log(++i);
},1000);

これを setTimeout() に書き換えると
function plusOne(){
console.log(++i);
setTimeout(plusOne,1000);
}
plusOne();
というようになる

スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

Pagetop

即時関数と無名関数

即時関数と無名関数

#18 無名関数と即時関数で出来ること
http://dotinstall.com/lessons/basic_javascript_tips/2118
に解説がある

一回しか使わない、
もしくは即座に実行したい
または、書くのが面倒
そんなときに使えるのが
即時関数

ユーザ関数を
（）
で囲って、最後に（）;
をつける

例えば
function helloworld(){
console.log("hello world);
}
これを実行するには
通常なら
helloworld();
とするけど

即時関数にしたいのなら
(function helloworld(){
console.log("hello world);
})();
というように
（）で囲って、最後に();
をつけている

無名関数は
function (){
console.log("hello world);
}
というように、関数の名前がないもの

テーマ : プログラミング
ジャンル : コンピュータ

Pagetop

診断結果のツイート

http://dotinstall.com/lessons/shindan_js/4805
を参考に
結果をツイートする機能をつけてみる

これは今後もいろいろと応用できそう

Web Intents | Twitter Developers
https://dev.twitter.com/docs/intents
も参考にするとよりわかりやすい

まず、表示領域を div で作成

<div id="tweet"></div>

処理は script タグの中に追記する

var tweetLink ='';
$('#tweet').html(tweetLink);

var tweetLink ='';
の中へリンクの作成を追記する

これは、公式サイトのドキュメントに載っている
Web Intents を使う
URLは
https://dev.twitter.com/docs/intents

この中にある
Tweet or Reply to a Tweet
を使う
https://dev.twitter.com/docs/intents#tweet-intent

この中で使うURLが
https://twitter.com/intent/tweet?
で
使うオプションが
Web API ではおなじみの？のあとに
追加していくことができる

オプションについては
Supported Parameters
の項目にそれぞれの説明が英語で記載されている

これを元にコードを書いていく
今回はツイート機能なので
https://twitter.com/intent/tweet?text=投稿内容
というかんじになる

ただし、日本語そのままだと文字化けするので
encodeURIComponent()
でエンコードしておく必要がある

結果は
result に格納されているので
encodeURIComponent(result)
というようにする

今回はハッシュタグをつけているので
&hashtag=dotinstall
もつけているので
var tweetLink = '<a href="https://twitter.com/intent/tweet?text='+ encodeURIComponent(result) +'&hashtags=dotinstall">ツイートする</a>';

このままでも使えるけど、名前をいれなくても
できるという問題があるので、これを対処

この処理には
if () で判定する

if($('#name),val() ==''){
alert('名前を入力してください');
return false;
}

関数の中で終わらせるには
return false;
を使う

これで結果のツイート機能
そして入力チェックのできあがり

テーマ : プログラミング
ジャンル : コンピュータ

Pagetop

java script でキャラ診断

java script でキャラ診断

ドットインストールの
http://dotinstall.com/lessons/shindan_js
を参考にして、キャラ診断の作成

とはいっても、メインでやってみたいのは、後半の twitter で
診断結果を投稿するとこ

いくつかサンプルなどをつくるときに
楽をするためには
ベースとなるファイルをつくり、あとは使いまわすほうが楽

なので、base.html を作成し
ソースは

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<title>タイトル</title>
</head>
<body>

</body>
</html>

あとは、これをコピーして使いまわす

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
はjQuery をつかうのに必須

<input type="text" id="name" value="">
<input type="button" id="shindan" value="診断">

というように診断ボタンを作成

診断ロジックは java script

<body style="text-align:center;">
とすれば、画面中央寄せのものができる

診断結果については
配列で指定する
var types =['勇者','魔法使い','戦士','遊び人','スター',];

診断に使う名前は
var name =$('#name').val();
で取得できる

診断ゲームなので、ランダム要素がほしいということで
var type =types[Math.floor(Math.random() * types.length)];
とする
.length とすることで、最大値を自動取得可能
Math.random() は
java script で乱数を発生させるもの

Math.floor() は小数点四捨五入
これで、配列の数値だけ取得できる

あとは、診断結果を作成
var result = name +'さんは'+ type +'です';

これを表示するので
<p>ここに結果表示</p>
となっているのを
<p id="result">結果表示</p>
としておいて

java script の中で
$('#result').text(result);
とすれば
id="result" になっている部分を
text() の内容で書き換えてくれる

今回は result = 結果の内容なので
結果表示となっている部分が
診断内容に置き換わる

もし、うまく稼働しないときには
chrome で
Ctrl + Shift + i
で
develper tools を起動して
console タグを開くと
エラーがあればその内容が表示されているので
その部分を修正しやすくなります

次は、診断結果の追加
これは、単純に
var charas =['かっこいい','かわいい','クールな'];
というように
配列を用意して
var chara =charas[Math.floor(Math.random() * charas.length)];
というように
ランダムで要素取得できるようにすればOK

あとは、診断結果を追加するだけ
var result = name +'さんは'+ type +'です';
を
var result = name +'さんは'+chara+ type +'です';
というようにすれば、いろいろな判定をつけることができる

テーマ : プログラミング
ジャンル : コンピュータ

Pagetop

java script でストップウォッチ

java script でストップウォッチ

スタート
ストップ
リセットボタン
を作成

表示は div で作成
id="set"
style="fong size:120px">0.0</div>

用はボタンの onclick="関数"
として<script> のところにそれぞれの関数を記述しておけばOK

簡単に
setinterval を使って百ミリ秒ごとに0.1 足しているけど
正確なストップウオッチに比べると時間がずれる

これを回避するには0.1 足すのではなく
new Date().getTime() で
ミリ秒を取得し、start の時刻との差を取る用にする

setInterval(function(){
sec +=0.1;
document.getElementById("set").innerHTML=sec;
},100);
だけだとたまに変になる

一旦１０倍にして四捨五入するようにして
1/10 にすればいい

round() は
四捨五入する関数

なので
setInterval(function(){
sec +=0.1;
document.getElementById("set").innerHTML=sec;
},100);
を
sec から

Math.round(sec*10)/10;
とすれば、見た目もすっきりする

こうしないと凄い桁数になっている

次にストップとリセット作成

var timerid ;
で宣言しておいて

function start() のところの
setInterval(function(){
を
timerId = setInterval(function(){
にする

あとは

function stop(){
clearInterval(timerid);
}
これでOK

次にリセット
function reset(){
document.getElementById('sec').innerHTML='0.0';
sec =0.0;
}

とすればOK

innerHTML='0.0';
で表示を
0.0
に置き換えて

sec =0.0;
とすることで数値も初期化している

テーマ : プログラミング
ジャンル : コンピュータ

Pagetop

ホーム次のページ »

Pagetop

最新記事