ＳＱＬの窓
TOP / JavaScript
- 1 2 3 4 5 >>

2018年03月09日


JavaScript の論理和(||) による『無かった場合の値の代入』/ expr1 || expr2 は expr1 を false と見ることができる場合は expr2 を返します

タイトルのまんまですが、MDN の 『式と演算子』のページに記述されています。

以下は jQuery で取得した文字列値に trim を実行して、空文字列だったら 0 をセットするという処理です。

var value = $("#target").val().trim() || 0;


また、値の変わりに実行文を記述する事もできるので、関数にすれば戻り値がセットされます。

function myfunc ( txt ) {
	console.log( txt );
	return "未定義";
}
var value = $("#target").val().trim() || myfunc("ここが実行される");




$("#target") の値が未入力または空白の場合、myfunc の引数がデベロッパーツールのコンソールに表示されて、value には "未定義" がセットされます
posted by lightbox at 2018-03-09 14:07 | JavaScript | このブログの読者になる | 更新情報をチェックする

2018年02月12日


Seesaa の記事に下の『最新の同カテゴリのリスト』のリンクの最後に付く ?seesaa_related=category を削除する方法

どうも、Google が嫌がってるように気がしてならないので削除しました。jQuery 前提なので申し訳無いですが、JavaScript でゴリゴリ書くと長くなるので。

場所は、コンテンツの『記事』の コンテンツHTML編集 でテンプレートを直接変更します。場所は、記事の下の listCategoryArticle を探せばいいと思います。

追加する部分は script 部分のみ　<script> 〜 </script> です。

<div class="listCategoryArticle">
【<% article_category.name %>の最新記事】<br />
<ul style='padding-right:25px;'>
<% loop:list_category_article %>
<li><a style='font-size:16px;box-shadow:none;' href="<% article.page_url %>"><% article.subject | text_summary(100) %></a></li>
<% /loop %>
</ul>
<script>
$(".listCategoryArticle a").each( function(){
   var url = $(this).prop("href");
   url = url.replace("?seesaa_related=category","");
   $(this).prop("href", url);
} );
</script>
</div>
タグ：Seesaa javascript
posted by lightbox at 2018-02-12 20:12 | JavaScript | このブログの読者になる | 更新情報をチェックする

2017年11月18日


JavaScript : ブラウザ判定( IE11 対応 ) / edge を追加

2017-11-18 更新 : edge を追加
※ 前回投稿日 : 2014-10-02

▼ 運営中サイトのブラウザ比率



IE11 の登場で少し変わりました(IE11 を一意に識別することが必要な場合があります。 その場合は、Trident トークンを使ってください)

IEのシェアは大きいですが、実際問題として IE6、IE7、IE8、IE9、IE10 が存在します。IE 以外では Firefox と Google Chrome を少なくとも視野にいれる必要があります。( あと、Safari もあります )

そういえば、『Operaが独自路線を転換、ブラウザエンジンをWebKitに切り替え』 なんで、気苦労が少し減りますが、相変わらず IE は増える一方で・・・・


ちにみに、jQuery 1.9 では、$.browser は削除されています



<script>
function browser_name() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			alert("IE6");
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			alert("IE7");
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			alert("IE8");
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			alert("IE9");
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			alert("IE10");
		}
		else {
			alert("Unknown");
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		alert("IE11");
	}
	else if (userAgent.indexOf("edge") > -1) {
		alert("Edge");
	}
	else if (userAgent.indexOf("firefox") > -1) {
		alert("Firefox");
	}
	else if (userAgent.indexOf("opera") > -1) {
		alert("Opera");
	}
	else if (userAgent.indexOf("chrome") > -1) {
		alert("Google Chrome");
	}
	else if (userAgent.indexOf("safari") > -1) {
		alert("Safari");
	}
	else {
		alert("Unknown");
	}
}
</script>
<input type="button" value="表示" onclick="browser_name();">


関連する記事

prototype.js の Browser メソッドを転用して jQueryの名前空間へ投入。IE バージョンも含めてブラウザ(仕様)判定

String オブジェクトにメソッドとして実装

IE と それ以外の判定方法として "ie".browser() で判定できます。

▼ 実際の実行



<script type="text/javascript">

String.prototype.browser = function() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var target = this.valueOf();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			return ( target == "ie6" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			return ( target == "ie7" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			return ( target == "ie8" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			return ( target == "ie9" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			return ( target == "ie10" || target == "ie" );
		}
		else {
			return false;
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		return ( target == "ie11" || target == "ie" );
	}
	else if (userAgent.indexOf("edge") > -1) {
		return ( target == "edge" );
	}
	else if (userAgent.indexOf("firefox") > -1) {
		return ( target == "firefox" );
	}
	else if (userAgent.indexOf("opera") > -1) {
		return ( target == "opera" );
	}
	else if (userAgent.indexOf("chrome") > -1) {
		return ( target == "chrome" );
	}
	else if (userAgent.indexOf("safari") > -1) {
		return ( target == "safari" );
	}
	else {
		return false;
	}
}
</script>
<select id="browser">
	<option value="chrome">chrome</oprion>
	<option value="firefox">firefox</oprion>
	<option value="opera">opera</oprion>
	<option value="safari">safari</oprion>
	<option value="edge">edge</oprion>
	<option value="ie11">ie11</oprion>
	<option value="ie10">ie10</oprion>
	<option value="ie9">ie9</oprion>
	<option value="ie8">ie8</oprion>
	<option value="ie7">ie7</oprion>
	<option value="ie6">ie6</oprion>
	<option value="ie">ie</oprion>
</select>
<input type=button
	value="ブラウザ判定"
	onclick='alert((document.getElementById("browser").value).browser())'>


jQuery の名前空間に登録

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$.extend({
	browser_name: (function(){
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var browser_string = "unknown"

		if (userAgent.indexOf("msie") > -1) {
			if (appVersion.indexOf("msie 6.0") > -1) {
				browser_string = "IE6";
			}
			else if (appVersion.indexOf("msie 7.0") > -1) {
				browser_string = "IE7";
			}
			else if (appVersion.indexOf("msie 8.0") > -1) {
				browser_string = "IE8";
			}
			else if (appVersion.indexOf("msie 9.0") > -1) {
				browser_string = "IE9";
			}
			else if (appVersion.indexOf("msie 10.0") > -1) {
				browser_string = "IE10";
			}
		}
		else if (appVersion.indexOf("trident/7.0") > -1) {
			browser_string = "IE11";
		}
		else if (userAgent.indexOf("edge") > -1) {
			browser_string = "Edge";
		}
		else if (userAgent.indexOf("firefox") > -1) {
			browser_string = "Firefox";
		}
		else if (userAgent.indexOf("opera") > -1) {
			browser_string = "Opera";
		}
		else if (userAgent.indexOf("chrome") > -1) {
			browser_string = "Chrome";
		}
		else if (userAgent.indexOf("safari") > -1) {
			browser_string = "Safari";
		}
		return browser_string;

	})()
});

console.log($.browser_name);

</script>


▼ オリジナルコード
http://winofsql.jp/VA003334/infoboard.php?id=070828100942&mid=sjscript&pid=3


IE と それ以外だけの判定

<script type="text/javascript">

	var ie = window.navigator.appName.toLowerCase().indexOf("microsoft") > -1;
	ie |= window.navigator.userAgent.toLowerCase().indexOf("trident/7.0") > -1;
	if (ie) {
		// IE 用
		console.log("IE");
	}
	else {
		// IE 以外用
		console.log("IE以外");
	}

</script>
posted by lightbox at 2017-11-18 15:17 | JavaScript | このブログの読者になる | 更新情報をチェックする

2016年10月10日


JavaScript : 入力文字列を 変数用16進数表現 に変換する

\u を使って、ソースコードに埋め込む文字列として、キャラクタセットに依存せずにコードを作成する為に使用します。( "あ" == "\u3042" )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function htmlentities2() {
	var a = $("#do_encode").val();
	var w = "";
	var n = 0;
	var p;
	for( var i = 0; i < a.length; i++ ) {
		p = (a.charCodeAt(i)).toString(16);
		if ( p.length > 2 || a.substr( i, 1 ) == "\"" || a.substr( i, 1 ) == "'" ) {
			w += "\\u" + ("00"+p).substr(2+p.length-4,4);
		}
		else {
			w += a.substr( i, 1 );
		}
	}
	$("#result").text( w );
}
</script>
<input id="do_encode" type="text" size="60">
<br>
<input
	type="button"
	value="入力文字列を alert 用16進数表現 に変換"
	onclick='htmlentities2()'>
<pre id="result"></pre>


※ JavaScript外部ファイル を charset を使用せずに作成する為に htmlentitie と併用します。




関連する記事

JS : 入力文字列を htmlentitie に変換する























posted by lightbox at 2016-10-10 12:55 




| JavaScript
| このブログの読者になる
| 更新情報をチェックする


























JavaScript : 入力文字列を htmlentity に変換する






一文字づつプログラムで判断して、都合のいいように変換する方法です。




 
 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function htmlentities() {
	var a = $("#do_encode").val();
	var w = "";
	for( var i = 0; i < a.length; i++ ) {
		if ( $("#check").prop("checked") ) {
			if ( a.substr(i,1) == '&' ) {
				w += "&amp;";
			}
			else if ( a.substr(i,1) == '<' ) {
				w += "&lt;";
			}
			else if ( a.substr(i,1) == '>' ) {
				w += "&gt;";
			}
			else if ( a.substr(i,1) == '"' ) {
				w += "&#" + a.charCodeAt(i) + ";";
			}
			else if ( a.substr(i,1) == "'" ) {
				w += "&#" + a.charCodeAt(i) + ";";
			}
			else {
				if ( $("#check_jp").prop("checked") ) {
					if ( a.charCodeAt(i) > 255 ) {
						w += "&#" + a.charCodeAt(i) + ";";
					}
					else {
						w += a.substr(i,1);
					}
				}
				else {
					w += a.substr(i,1);
				}
			}
		}
		else {
			w += "&#" + a.charCodeAt(i) + ";";
		}
	}
	$("#result").text( w );
}
</script>
<input id="do_encode" type="text" size="60">
<br>
<input
	type="button"
	value="入力文字列を htmlentitie に変換"
	onClick='htmlentities()'>
<br>
<label for="check">変換を必要最低限にする</label>
<input type="checkbox" id="check">
 / 
<label for="check_jp">但し、日本語は変換する</label>
<input type="checkbox" id="check_jp">
<br>
▼ 以下に表示されます
<pre id="result"></pre>









&# を使用して数字で文字列を表す方法に変換します

変換後の文字列は、ボタンの下に表示されます。選択してコピーして下さい。

この文字列は alert 内では、文字列の代替えとしては使用できません









 
 /  


▼ 以下に表示されます




関連する記事

JavaScript : 入力文字列を 変数用16進数表現 に変換する
























posted by lightbox at 2016-10-10 12:41 




| JavaScript
| このブログの読者になる
| 更新情報をチェックする























2016年07月08日




HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる






単純な、メッセージのカスタマイズは以下をご覧下さい
HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述

ここでは、さらに CSS で :invalid と :valid 疑似クラスを使用する事によって、常に色を使ってエラーの状態をユーザに訴えます。

:valid で枠線を緑に指定

エラーが無ければ、この状態になります

:invalid で枠線を赤に指定

この指定によって、ここでは未入力チェックとして required を指定しているフィールドが最初から枠線が赤くなります。

required と pattern で色を変える

まず、CSS で、クラスに required と pattern で別の色を指定します。いずれも、枠線の太さを太くし(IE11 は元々そうなるので正しくコントロールできませんでした)、背景色を別々に設定します。

さらに、oninvalid(FORM 送信時のイベント) で、対応するクラスを追加してやると、required では、背景がピンクになり、pattern では背景がオレンジになります。

リアルタイムに色を変える

このままでは、送信時にしか色が変わらないので、onchange イベントを追加して、oninvalid と同じ内容を追加します。そうすると、入力した内容が変化する毎に色が変わる事になります。

※ いずれも、oninput で $(this).removeClass("required pattern"); が必要です。










	
	







 
 

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
input:invalid {
	border: 1px solid red;
}
input.required:invalid {
	border: 2px solid red;
	background-color: pink;
}
input.pattern:invalid {
	border: 2px solid red;
	background-color: orange;
}

input:valid {
  border: 1px solid green;
}
</style>

<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("change", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("input",function(){
			$(this).removeClass("required pattern");
			this.blur();
			this.setCustomValidity("");
			this.focus();
		});
});
</script>

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>















タグ：jquery HTML5 


















posted by lightbox at 2016-07-08 16:54 




| JavaScript
| このブログの読者になる
| 更新情報をチェックする

























- 1 2 3 4 5 >>




















Seesaa の各ページの表示について




Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります


<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>


この記述は、以下の場所で使用します



















































Powered by Seesaa

 
























container 終わり































✅ フリーフォントで簡単ロゴ作成

✅ フリーフォントでボタン素材作成

✅ フリーフォントで吹き出し画像作成

✅ フリーフォントではんこ画像作成

✅ ほぼ自由に利用できるフリーフォント

✅ フリーフォントの書体見本とサンプル

✅ 画像を大きく見る為のウインドウを開くボタンの作成





































✅ CSS ドロップシャドウの参考デモ

✅ イラストAC

✅ ぱくたそ

✅ 写真素材 足成

✅ フリーフォント一覧

✅ utf8 文字ツール












右サイド 終わり



base 終わり