Category Archives: JavaScript

「jQuery入門」checkboxの状態をする方法

attr
<input type=”checkbox” name=”changfa” checked=”checked” />

prop
$(‘[name=”changfa”]’).prop(‘checked’,true);

「JavaScript入門」チェックボックスの値を取得する

1.htmlコード
<p><input type=”checkbox” name=”chkuser” value=”test”>テスト</p>
<div id=”cft”></div>

2.JSコード
$(function() {
$(‘input[name=”chkuser”]’).change(function() {
if ($(this).prop(‘checked’)) {
$(‘#cft’).text($(this).val());
} else {
//
}
});
});

「jQuery」trigger()とclick()でボタンイベント発火を実行する方法

1.JSPコード
<button>テスト</button>

2.イベントを実行する方法
方法1
$(‘button’).trigger(‘click’);
方法2
$(‘button’).click();

$(‘button’).click(function(){
//処理コード
});

「JavaScript入門」文字列を連結するサンプル

サンプルコード
var tt1= ‘test11’;
var tt2 = ‘test22’;
var tt3 = ‘test33’;
var result = tt1 + tt2 + tt3 ;
console.log( result );

JavaScriptで指定idのdomを操作する方法

サンプルコード
$(“#nameId”).html();
$(“#nameId”)[0].innerHTML;
$(“#nameId”).eq(0)[0].innerHTML;
$(“#nameId”).get(0).innerHTML;

「JavaScript開発」parseJSON()、JSON.parse()、toJSONString()とJSON.stringify()の使い方

JSON文字列:
var str1 = ‘{ “name”: “yamada”, “address”: “tokyo shinagawa” }’;
JSONオブジェクト:
var str2 = { “name”: “yamada”, “address”: “tokyo shinagawa” };

1.JSON文字列をJSONオブジェクトへ変換
方法1
var obj = eval(‘(‘ + str + ‘)’);
方法2
var obj = str.parseJSON();
方法3
var obj = JSON.parse(str);
debug:
console.log(obj.name);
console.log(obj.address);

2.toJSONString()またはJSON.stringify()でJSONオブジェクトをJSON文字列へ変換
方法1
var cft=obj.toJSONString();
方法2
var cft=JSON.stringify(obj);
console.log(cft);

「JavaScript入門」cookie処理(設定、取得、削除)のサンプル

1.cookieの設定
function setCookie(name,value)
{
var Days = 60;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + “=”+ escape (value) + “;expires=” + exp.toGMTString();
}

2.cookiesの取得
function getCookie(name)
{
var arr,reg=new RegExp(“(^| )”+name+”=([^;]*)(;|$)”);
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
3.cookiesの削除
function deleteCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() – 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + “=”+cval+”;expires=”+exp.toGMTString();
}

「JavaScript入門」replace()で特殊の文字列を置き換えるサンプル

JavaScriptコード
function escapeHTML(str) {
return str.replace(/&/g, ‘&amp;’)
.replace(/</g, ‘&lt;’)
.replace(/>/g, ‘&gt;’)
.replace(/”/g, ‘&quot;’);
}

「javaScript入門」in演算子の使用サンプル

JSコード
var oneArr=new Array();
oneArr[“firstKey”]=”data11″;
oneArr[“secondKey”]=”data22″;
var oneObj={};
oneObj.firstKey=”data11″;
oneObj.secondKey=”data22″;
for ( key in oneArr ) {
document.write(key+’=>’+oneArr[key]);
}
for ( key in oneObj ) {
document.write(key+’=>’+oneObj[key]);
}

「Angular入門」@HostBinding()と@HostListener()の使い方

サンプルコード:
import { Directive, HostBinding, HostListener } from ‘@angular/core’;

@Directive({
selector: ‘[appRainbow]’
})
export class RainbowDirective{
possibleColors = [
‘darksalmon’, ‘hotpink’, ‘lightskyblue’, ‘goldenrod’, ‘peachpuff’,
‘mediumspringgreen’, ‘cornflowerblue’, ‘blanchedalmond’, ‘lightslategrey’
];
@HostBinding(‘style.color’) color: string;
@HostBinding(‘style.borderColor’) borderColor: string;
@HostListener(‘keydown’) onKeydown(){
const colorPick = Math.floor(Math.random() * this.possibleColors.length);
this.color = this.borderColor = this.possibleColors[colorPick];
}
}