jQuery JavaScript 個人的な技術メモ

jQuery 

  • jQueryのプラグインを探す時に便利なサイトのまとめ

http://coliss.com/articles/build-websites/operation/javascript/best-site-when-looking-for-jquery-plugins.html

スクロールで要素が現れたらイベント

$(window).scroll(function() {
   var posDiff = $("#target").offset().top - ($(window).scrollTop()+$(window).height());
   if (posDiff < 0) {
     // 要素が画面内に現れた
   }
});

postion: fixed が効かない端末でのヘッダー位置制御

$(window).scroll(function() {
   var posDiff = $("#header").offset().top - $(window).scrollTop();
   if ($(window).scrollTop() < 0) posDiff = 0;
   $("#header").css("top", "-"+posDiff+"px");
});

スマホブラウザでURLバーを消す

ページ読み込み完了時に1px上にスクロールさせる(スクロールできるHeightがある場合のみ)

$(function(){
    setTimeout(function(){ window.scrollTo(0,1); }, 20); // URLバーを消す
});

JavaScript

値判断

if (typeof a === "undefined") {
  alert("aは未定義");
}

submit時に確認ポップアップ

function submitCheck() {
	return confirm("送信してもよろしいですか?\n\n送信したくない場合は[キャンセル]ボタンを押して下さい");
}
<input id="toukou_button"  type="image" alt="投稿する!" src="/page/sugolog/images/toukou.gif" onClick="return submitCheck()" />

JavaScriptでsha256

jsSHAライブラリを使用。New BSD License。

jsSHA - SHA Hashes in JavaScript

  • JSプログラム
<script src="sha256.js" type="text/javascript"></script>
<script type="text/javascript">

var src_text = "Hello World";

var shaObj = new jsSHA(src_text, "TEXT");
var sha256digest = shaObj.getHMAC("", "TEXT", "SHA-256", "HEX");

document.write(sha256digest);

</script>
  • 実行結果
50082da69e7e4780c867be198e795b9cd5e94e739ee9485aa95a70f60e36e73f 
  • 念のためPHPで同様のプログラムを実行
<?php
$text = "Hello World";
echo hash_hmac('sha256', $text, false);
  • 実行結果
50082da69e7e4780c867be198e795b9cd5e94e739ee9485aa95a70f60e36e73f

同じになった。

ページ上部に DEBUG 情報

  • PC
<div style="position:fixed;top:0px;left:0px;width:100%;height:20px;background-color:#ddd;" id="topInfo">INFO</div>
  • スマートフォン
<div style="position:absolute;top:0px;left:0px;width:320px;height:20px;background-color:#ddd;" id="topInfo">INFO</div>
<script type="text/javascript" charset="utf-8">
var topInfoScroll = function()
{
    document.addEventListener('scroll', function(){document.getElementById("topInfo").style.top = window.scrollY+"px";}, false);
};
if (window.addEventListener) {
    window.addEventListener("load", topInfoScroll, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", topInfoScroll);
};
</script>

IE9以前で console.log エラー回避

if(!window.console) { window.console = { log: function(msg){} }; }