javascript一覧

[jQuery] カレンダー入力簡単設置方法

参考サイト

http://www.webdesign-fan.com/jquery-ui-datepicker

STEP1

jQuery設置

<script src=”js/jquery-1.9.1.min.js”></script>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js”></script>

<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js”></script>

<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css” >

STEP2

カレンダー用スクリプト

<script>
$(function() {
$(“#datepicker”).datepicker();
});
</script>

<script>
$(function() {
$(“#datepicker”).datepicker();
$(“#datepicker”).datepicker(“option”, “showOn”, ‘button’);
$(“#datepicker”).datepicker(“option”, “buttonImageOnly”, true);
$(“#datepicker”).datepicker(“option”, “buttonImage”, ‘ico_calendar.png’);
});
</script>

STEP3

 

入力欄にカレンダー指定

<input type=”text” id=”datepicker”>



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。


 




[javascript] 数値かどうか判定する

isNan(値)で判定が可能。
varcheck=function(){
  varnum=document.getElementById(‘input01’).value;
  if(!isNaN(num)){
     alert(“入力された数は”+num+“です。”);
  }else{
     alert(“数値以外が入力されています”);
  }
}



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。


 




[JS] JavaScript の const

constとは定数のことです
定数とは、上書きできない値です。 固定値に使用できます。

但し
jshint に対するコメントがない場合、jshint が警告を出します。

警告を回避するためには

constの前にコメントを入れてあげましょう。

 

※JSのconstはECMAScript 6 から使用できます。



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。


 




[React] FireBaseにデプロイ

https://qiita.com/yasupeke/items/c27abd951e216bf48f4f

 

Install
npm install -g firebase-tools
Login
firebase login
と入力すると

? Allow Firebase to collect anonymous CLI usage information? (Y/n)
使用状況の情報収集に協力するか聞かれるから任意で
Y/nを選ぶとデフォルトに設定しているブラウザが立ち上がり認証を求められる

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?…

Waiting for authentication…

+ Success! Logged in as address@gmail.com
こんな表示になってたら認証完了

プロジェクトの初期化
プロジェクトディレクトリ作成し、そのディレクトで以下コマンド入力

firebase init
と入力すると

You’re about to initialize a Firebase project in this directory:

D:\projectname

? Are you ready to proceed? (Y/n)
このディレクトリをFirebaseプロジェクトとして初期化しようとしてけど準備はいい?
と聞かれるのでYES!

? What Firebase CLI features do you want to setup for this folder? (Press <space> to select)
(*) Database: Deploy Firebase Realtime Database Rules
>(*) Hosting: Configure and deploy Firebase Hosting sites
どういうプロジェクトにするか聞かれる

データベース:Firebaseリアルタイムデータベースルールを展開
ホスティング:Firebase Hostingサイトの設定と展開
=== Project Setup

First, let’s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use –add,
but for now we’ll just set up a default project.

? What Firebase project do you want to associate as default? (Use arrow keys)
[don’t setup a default project]
> projectname (projectname-hoge1)
projectname (projectname-hoge2)
[create a new project]
このディレクトリをどのFirebaseプロジェクトに関連付けるか聞かれるので自分の環境に合わせる
既にプロジェクトをつくってればそれを選択

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? (database.rules.json)
リアルタイムデータベースの設定について聞かれる
何も入力せずにエンターするとdatabase.roles.jsonが作られる

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build’s output directory.

? What do you want to use as your public directory? (public)
ホスティングの設定について聞かれる
多分firebaseのデプロイでアップロードするディレクトリを聞いてるのだと思う
publicのまま変更しなくていいのであればそのままエンター
変更したい場合は入力する

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
次にSPAなのか聞かれる

+ Wrote public/index.html

i Writing configuration info to firebase.json…
i Writing project information to .firebaserc…

+ Firebase initialization complete!
上記が出力されれば初期化完了!

以下のようなディレクトリ構成で必要なものができあがる

projectname
├─ .firebaserc
├─ database.rules.json
├─ firebase.json

└─ public
└─ index.html
Deploy
firebase deploy
と入力すると

=== Deploying to ‘projectname’…

i deploying database, hosting
+ database: rules ready to deploy.
i hosting: preparing dist directory for upload…
+ hosting: public folder uploaded successfully
+ hosting: 1 files uploaded successfully
i starting release process (may take several minutes)…

+ Deploy complete!

Project Console: https://console.firebase.google.com/project/projectname/overview
Hosting URL: https://projectname.firebaseapp.com



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。


 




[jQuery] 指定した条件でテーブルの行を並び替える

http://developmentor.lrlab.to/postal/jquery/jquery.tablesorter/basic1.html



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。


 




[javascript] input タグと属性を追加

http://makisuke.seesaa.net/article/45031561.html



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。


 




[wysiwyg bootstrap] Hタグの適用について

[概要]
wysiwyg エディタを使用したが、以下うまく動かず(バグ?)

・Hをボタンにして設置。押しても効かない

・Hボタン押下時、BOLDボタンが反応してしまう。

・formatBlock h2が適用されるようだがqueryCommandStateコマンドが効かない(Mozilaでバグ報告あり)

・formatBlock h2が適用されるようだがもう一度ボタンを押しても戻らない(BoldやItalicはOn Offの切り替えがコマンドで自動制御できているらしい)

[HTML側]

以下のように編集

<div class=”btn-group”>

<a class=”btn formatBlockh2″ data-edit=”formatBlock h2″ data-original-title=”formatBlock h2″ title=”formatBlock h2″>H</a>
<a class=”btn formatBlockh3″ data-edit=”formatBlock h3″ data-original-title=”formatBlock h3″ title=”2nd-level header”>h</a>
</div>

編集しているのでダウンロードして参考にしてみて下さい。
bootstrap-wysiwyg

※IEに対応する場合は、以下の書き換えが必要です。
・formatBlockのパラメータに<h2>等のようにタグ表現にする必要があります。

・解除時に使用している<p>タグも対象外とのことですので<pre>で対応する必要があります。

(今回解除時にNULLが動作しないため<p>タグを利用して置換するということをしていますが

他によいやり方があれば是非ご報告ください)

 



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。


 




[JavaScript] イベントハンドラ一覧

イベント名 意味
onload 読み込みが終わったとき
onresize ウィンドウの幅が変わったとき
onclick マウスでクリックしたとき
ondblclick マウスでダブルクリックしたとき
onmouseover マウスカーソルがのったとき
onmouseout マウスカーソルが外れたとき
onmousedown マウスボタンを押したとき
onmouseup マウスボタンを離したとき
onkeydown キーボードのキーを押したとき
onkeyup キーボードのキーを離したとき
onfocus フォーカスが当たったとき
onblur フォーカスが外れたとき
onchange フォームの値が変わったとき
onsubmit フォームを送信したとき



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。


 




[html] buttonタグのsubmitを無効にする方法

<button type="button">既読にする</button>

これで無効になります。

用途
button 押下時、form actionに反応するのではなく、javascriptで指定した、submitを呼び出したい時に使用。

 



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。


 




[javascript] clipboardData.setDataの改行挙動報告

現象
IE11のテキストエリアの改行込みの文字列に対して、clipboardData.setDataでコピーをしたが
エディタに張り付けると、¥r¥nではなく、¥nのみになってしまう。

原因

onclick=”this.select();clipboardData.setData(‘text’,this.value);”

上記のようにvalueしていたために、\rが削除されてしまった。

対策
onclick=”this.select();clipboardData.setData(‘text’,this.innerText);”

上記のようにinnnarTextにする。

ちなにみ上記はinput type=”text”の場合はinnterTextではなくvalue指定でないとエラーになるかも(ブラウザによりますね)

・・・ってこんな仕様わからないよねっ。


 



メルマガ登録をお願いします。

素敵な?情報がいつもあなたに届くようになります。(itmnewsの記事が届きます。)お役に立つかどうかわかりませんが頑張りますっ。登録してみてください。