let hoge2 = 'test';
～ 略 ~
// グローバル変数が宣言されているかチェックする。
if(typeof hoge !== 'undefined'){
console.log('あり');
}else{
console.log('なし'); // ←
}
/**
* 整数のチェック
* @note
* null, 空文字は正常と見なす。
* 文字列型の整数値も正常と見なす。
* 半角スペースが混じっていればエラーと見なす。
* 符号付き整数（+100, -100）は正常と見なす。
*
* @param mixed value
* @return true:正常 false:エラー
*/
function isInteger(value){
if(value === null) return true;
if(value === '') return true;
if(Number.isNaN(value)) return false;
let value2 = Number(value); // 数値型に変換
if(Number.isInteger(value2) ) return true; // 整数判定
return false;
}
let user_agent = window.navigator.userAgent;
console.log(user_agent);
ブラウザごとの出力例
ChromeMozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36 Edg/86.0.622.51
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36 OPR/71.0.3770.284
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0
$(()=>{
Neko.bark('帽子猫');
});
class Neko{
static bark(neko_name){
$('#res').append(`${neko_name}はミーとなく`);
}
}
$(()=>{
let dog = new Dog();
dog.barkWrap();
});
class Dog{
barkWrap(){
Dog.bark('赤犬');
}
static bark(dog_name){
$('#res').append(`${dog_name}はポウポウとなく`);
}
}
$(()=>{
Pig.barkWrap();
});
class Pig{
static barkWrap(){
this.bark('黒豚');
}
static bark(name){
$('#res').append(`${name}はキーキーとなく`);
}
}
<input type="text" autocomplete="on" list="list1">
<datalist id="list1">
<option value="あきはばら"></option>
<option value="あこうろうし"></option>
<option value="あまりりす"></option>
<option value="あきあかね"></option>
<option value="赤猫"></option>
<option value="あかいすいせい"></option>
<option value="あかいねこ"></option>
</datalist>
<button onclick="test1(2)" class="btn btn-primary btn-sm" >入力候補変更1</button>
<button onclick="test1(3)" class="btn btn-primary btn-sm" >入力候補変更2</button>
function test1(data_no){
let list2 = [];
if(data_no == 2){
list2 = ['かまいたち','からす', 'かまねこ', 'かます', 'かまきり', 'かたくりこ', 'きつね', 'くま'];
}else{
list2 = ['さむらい','さむい', 'さきほこる', 'さにー'];
}
let list2_option_html = '';
for(i in list2){
let v2 = list2[i];
list2_option_html += `<option value="${v2}"></option>`;
}
//
$('#list1').html(list2_option_html);
}
HTML
<textarea id="textarea1" ></textarea>
JavaScript
jQuery(()=>{
automateTextareaHeight('#textarea1');
});
// テキストエリアの高さを自動調整する。
function automateTextareaHeight(slt){
let taElm = $(slt);
// 文字入力した時に高さ自動調整
taElm.attr("rows", 1).on("input", e => {
$(e.target).height(0).innerHeight(e.target.scrollHeight);
});
// クリックしたときに自動調整
taElm.attr("rows", 1).click("input", e => {
$(e.target).height(0).innerHeight(e.target.scrollHeight);
});
}
JavaScriptの覚書：YES NO ダイアログ
if(window.confirm("あなたは猫を飼っていますか")){
console.log('はい。猫を飼っています。');
}else{
console.log('いいえ。猫が勝手に住みついているだけです。');
}
HTML
<script src="./dist/jsQR.js"></script>
<script src="JsQrEx.js"></script>
<script src="script.js?v=1.0.1"></script>
～略～
<div>
<input id="start_btn" type="button" value="スタート" onclick="start()" class="btn btn-primary"/>
<input id="stop_btn" type="button" value="停止" onclick="stop()" style="display:none" class="btn btn-warning" />
</div>
<div>QR読込URL→<span id="res" class="text-success"></span></div>
<div id="qr_read_config"></div>
<canvas id="qr_canvas"></canvas>
script.js
let jsQrEx;
$(()=>{
jsQrEx = new JsQrEx('qr_canvas', callback);
});
function callback(value){
$('#res').html(value);
console.log(value);
}
function errFunc(err){
alert('カメラが不許可ですよ');
}
function start(){
jsQrEx.start(()=>{
$('#start_btn').hide();
$('#stop_btn').show();
}, errFunc);
}
function stop(){
jsQrEx.stop();
$('#start_btn').show();
$('#stop_btn').hide();
}
HTML
<button type="button" onclick="openModal()">モーダルを開く</button>
<div class="modal js-modal">
<div class="modal__bg js-modal-close"></div><!-- 背景クリックによる閉じる -->
<div class="modal__content">
<div>いろはにほへとちりぬのを<br>わかよたれそ</div>
<a class="js-modal-close" href="">閉じる</a>
<button type="button" class="js-modal-close" onclick="closeModal()">閉じるボタン</button>
</div><!--modal__inner-->
</div><!--modal-->
CSS
.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
}
.modal__bg{
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.modal__content{
background: #fff;
left: 50%;
padding: 40px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
}
JavaScript
$(()=>{
$('.js-modal-open').on('click',function(){
$('.js-modal').fadeIn();
return false;
});
$('.js-modal-close').on('click',function(){
$('.js-modal').fadeOut();
return false;
});
});
function closeModal(){
$('.js-modal').fadeOut();
}
function openModal(){
$('.js-modal').fadeIn();
}