JAVASCRIPT」タグアーカイブ

JACASCRIPTで引数省略、関数の引数より多い引数を指定した場合はarguments

JACASCRIPTで引数省略、関数の引数より多い引数を指定した場合はarguments

–まとめ

Javascript関数 引数を省略したり、追加したり、可変変数の扱い

JACASCRIPTで関数の引数を省略することは可能
ではもし、関数を定義したときの引数より多い引数を指定した場合はどうなるのか?

関数の引数が多くなったときは
arguments
を使う。

argumentsを使って配列のように扱う。

はじめに

関数の引数の数を変更したい要望は時間が経つに連れて増えてくる。
最初の仕様と実際に使ってみた仕様は変わってくる。
引数を変えるだけだから、関数を記述した箇所に引数を入れればいいだけ。
しかし、その記述が多い場合、その作業は大変なものになる。
コンパイルが必要な場合は、もう一度ビルドから必要かも(Javascriptにコンパイルはないから不便はない)。
できれば、関数の定義と新規に引数を追加したファイルだけ関数の引数の追加を修正したいことがある。
JAVASCRIPTは、引数の省略ができる。指定されなかった引数は無視できるように関数を修正しておけばよい。
 それならば、引数が2つの場合で引数を1つ指定するといった使い方ができるし、引数が2つの場合で引数を3つ以上指定することも可能である。
注意するのは、引数を省略できて、かつ引数の数が多いのにその余分な引数を取得する方法(arguments)を理解できている必要がある。
理解していないと、他に関数が定義されていると初心者開発者が混乱してしまう。関数で定義した引数の数が実際に記述されている引数の数が違うと記述の間違いと思う。実際はそうでなくてargumentsで余分な引数を取得していた。

すぐに理解できる関数の引数
引数が1つの場合で引数を1つ指定する
引数が2つの場合で引数を2つ指定する
ここまでは問題ない。引数の数があっているから。
次に、引数が2つの場合で引数を1つ指定するところからいろいろとややこしいことが起こる。

引数が2つの場合で引数を1つ指定する

引数が2つの場合で引数を3つ指定する



https://oshiete.goo.ne.jp/qa/225482.html
JavaScriptは、関数の引数の省略できる。
続きを読む

JAVASCRIPT 構造体もどきと自分のファイル名(URL)を取得

JAVASCIPTの構造体もどき。
構造体のようにオブジェクトとして扱うことで、複数の変数を1つのオブジェクトに格納できる。
これを配列に入れれば多くの変数をまとめて扱える。

自分のファイル名(URL)を取得
例えばこんな感じのURL「https://www.XXX.com/index.html」(架空)があるとして、index.htmlにJAVASCRIPT、window.location.hrefを書いていたとすれば「https://www.XXX.com/index.html」
を取得します。
index.htmlがないときはhttps://www.XXX.comを取得することになります。

・ファイル名を取得
window.location.href.split(‘/’).pop();
splitでスラッシュを区切りにして分割します。
そしてpopで最後の分割であるindex.htmlを取得してファイル名を取得することになります。
index.htmlがないときは、たぶんwww.XXX.comが表示されるはず。
なので、URLを取得したいときは
window.location.href
までを記述すればOKみたい

ファイル名を取得する必要性は、あまりありませんが、個別のファイルになにか仕組みを入れておいて特別なメッセージを表示させるとか、あるページを開こうとしたときに、IE11、クロムならOKだけど、サファリやOperaだったらアラートを表示させたいとかに使えるでしょう。その際は、URLの判定用の配列を作成してどのURLならOKとして、事前に登録しておく必要があります。
今回はそこまで書いていません。またJavascriptは外部ファイルにしておくほうが今後利便性は高いですが、ブログ記事のためにわかりやすいく扱いやすいように同じファイルの中に記載しています。

//参考にしたサイト
//https://b.0218.jp/20140404132553.html

続きを読む

開発言語別簡易文法チート表、VB.NETとC#のチート表他Javascript、PHP

開発言語別簡易文法チート表、VB.NETとC#のチート表他Javascript、PHP
チートとはずるいとか卑怯とか騙すいう意味があるらしいけど、開発言語とか良い意味で使えば便利とか得するとか秘伝、秘密の巻物的な意味合いも出てくるだろう。
簡単に言えば、開発言語別の文法一覧。
いくつも言語を使っていると、IF文だけでもそれぞれ異なる。でもまとめてみると以外にもグループ分けすれば同じ文法だったりする。
C言語系はほぼ同じ。
Rubyとかパイソンとかのスクリプト系は独自路線を走ってる。
スプレッドシートにまとめていたので、下のPDFからダウンロードできる。
見にくかったりまとまったりしているのは、書きなぐりだから。きれいにレイアウトするのが面倒になった。

・文法の特徴と類似点
C,C++,C#とJAVA,JAVASCRIPT、Google App Script,PHPは似ている
VBとCLASSICASPとエクセルは似ている

開発言語別簡易文法チート表、VB.NETとC#のチート表他Javascript、PHP – チート表PDF 2019/04/06版随時改定予定

続きを読む

JAVASCRIPTでドラッグ・アンド・ドロップのリンクメモ 

JAVASCRIPTでドラッグ・アンド・ドロップのメモ 

以前ドラッグ・アンド・ドロップを試して妥協してしまった。
またがんばるか
リンクメモ

今から3分で,HTML5のドラッグ&ドロップAPIと File APIを習得しよう(JSの実装サンプル付き)
https://language-and-engineering.hatenablog.jp/entry/20140330/HTMLfiveDragDropAndFileAPISample

エイジャックスAJAXドキュメント調査中、アジャックスって読んでた

エイジャックスAJAXドキュメント調査中、アジャックスって読んでた

エイジャックスAJAXの書籍を買おうと思ったのに、人気がないのかほとんど10年前に出版されたものがほとんど。たぶんJAVASCRIPTかJQUERY関連の書籍の内容に含まれている感じ。
続きを読む

2018年次回作成アプリ 学習言語ネタ jquery ajax,まずはjqueryを勉強中

2018年次回作成アプリ 学習言語ネタ jquery ajax,まずはjqueryを勉強中

アイフォンアプリも作りたいけど、仕事にも直結する言語についても学習しなくてはならないのでJqueryでを勉強中。物覚えが悪いので快調には進まず、いつも回り道。年を取ると頭が鈍くなっていけない。

javascript をより便利にしたjquery を勉強する。
(個人的メモ)勉強中のフォルダは
/Users/maseda/Desktop/jQuery学習のフォルダにある。

続きを読む

JAVASCRIPTドラッグアンドドロップのみの機能とJQUERYのボタンクリックサンプル

JAVASCRIPTドラッグアンドドロップのみの機能とJQUERYのボタンクリックサンプル

Railsを勉強中ですが、JAVASCRIPTがわからなくなって整理中

画像を選択して、ブラウザ上に表示、ドラッグアンドドロップのみの機能

https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file
を参考

ドラッグアンドドロップ
http://jsfiddle.net/ginpei/bSF9z/

ここが参考になる。

$(function(){
	//処理
});

$(window).on("load",function(){
	//処理
});

の違いは、読み込みデータの違いらしい。
functionはHTMの読み込みが終了したタイミングで実行され、windowの方は画像やJSやCSSのすべてのデータが読み込まれてから実行されるのだそうです。

http://qiita.com/nfnoface/items/04c4e1df59c79322c82bを参考にしています。

http://naoyashiga.hatenablog.com/entry/2013/10/22/150030

<html>
<head>
<meta charset="UTF-8"/>
<title>0325画像を選択するのとドラッグアンドドロップのみ</title>
<style>
#dropzone {
	background-color: #cfc;
	border: solid 3px #9c9;
	color: #9c9;
	min-height: 50px;
	padding: 20px;
	text-shadow: 1px 1px 0 #fff;
}
#dropzone.dropover {
	background-color: #cff;
	color: #9cc;
}

#files:empty::before {
	color: #ccc;
	content: "(Files data will be shown here.)";
}
#files img {
	border: solid 1px #ccc;
	cursor: pointer;
	height: auto;
	margin: 0 10px;
	max-height: 128px;
	max-width: 128px;
	width: auto;
}
</style>
</head>
<body>
これはJQUERYを使用していません。inputにinchange=handleFiles(this.files)を指定しています。<br>
ちゃんとサムネイルがでるOK。画像を選択する複数対応版、ドラッグアンドドロップするとサムネイルを表示するだけです。アップロードとかDBに登録しません。JAVASCRIPTの勉強とドラッグアンドドロップの学習用です。<br>
<a href = "https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file" target= _blank>https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file</a>
を参考<br>
<br>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">


<a href="#" id="fileSelect">Select some files</a> 
<br><br>

ドラッグアンドドロップ<br>
<a href="http://jsfiddle.net/ginpei/bSF9z/" target=_blank>http://jsfiddle.net/ginpei/bSF9z/</a>
<br>ここが参考になる。<br>
<div id = "dropzone">ここにドラッグアンドドロップしてください
</div>


<div id="fileList">
  <p>画像の表示領域</p>
</div>

<script>
window.URL = window.URL || window.webkitURL;

var fileSelect = document.getElementById("fileSelect"),
    fileElem   = document.getElementById("fileElem"),
    fileList   = document.getElementById("fileList");
//ID=fileSelectであるリンクをクリックすると、ID=fileSelectの変数fileSelectのaddEventListenerの処理が
//実行され、hidden状態のファイル選択ボタンが隠れているのにかかわらず、fileElem.click()として
//クリックされます。そして、ファイル選択ダイアログでファイルを選択したときにonChange状態となり、function handleFiles()が実行されることになります。
//けっこう複雑な動きです。
fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>ファイルが選択されていません</p>";
  } else {
    var list = document.createElement("Ol");
    for (var i = 0; i < files.length; i++) {
      var li = document.createElement("li");
      list.appendChild(li);
      
      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function(e) {
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      
      var info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
    fileList.appendChild(list);
  }


}

//ドラッグアンドドロップ ここでドロップすると、ID=fileListに追加されます。
var dropbox;
//注意するのは変数名がdropboxでIDがdropzoneになってます。ID側を変更するときは、下のdropzoneの部分を変更します。
dropbox = document.getElementById("dropzone");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

</script>


</body>
</html>

JQUERYを使った ボタンクリックのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<title>0325_JQuery_Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(function(){
    $(document).on('click', '#button', function(event, p1, p2){
        console.log(arguments);
        console.log(p1);
        console.log(p2);
    });
    $(document).on('click', '#button1', function(){
        $('#button').trigger('click', [$(this).text()]);
    });
    $(document).on('click', '#button2', function(){
        $('#button').trigger('click', [$(this).text(), 'ほげほげ']);
    });
	//こんな書き方もできる ボタンのID
	$("#button_another").click(function(){
		console.log("button_another_click")
	});
});
</script>

</head>
<body>
<a href=http://qiita.com/nfnoface/items/04c4e1df59c79322c82b target=_blank>http://qiita.com/nfnoface/items/04c4e1df59c79322c82b</a>を参考にしています。
<br>
jQueryを使用しています。<br>
ボタンを押して、コンソールのログを見るとそれぞれのボタンの出力がわかります。
<button id="button">BUTTON</button><br/><br/>
<button id="button1">ボタン1</button><br/><br/>
<button id="button2">ボタン2</button><br/><br/>
<button id="button_another">別の方法</button><br/><br/>
<br>
別のクリック方法<br>下はボタンではないけれど、クリックするとJSが動作します。<br>
なお、ブラウザでは何も変化せず、コンソールに出力されます。
参考にしたのは<br>
<a href=http://naoyashiga.hatenablog.com/entry/2013/10/22/150030 target=_blank>http://naoyashiga.hatenablog.com/entry/2013/10/22/150030</a><br>
<p id='nameless'>nameless function</p>
<p id='name'>name function</p>
<p id='test'>test</p>
<p id='bind'>bind</p>
<p id='click'>click</p>

<script>

function name(){
    console.log("name");
}

function badSample(t){
    console.log("badSample:" + t);
}

function bindSample(event){
    //bindSample:100
    console.log("bindSample:" + event.data.num);
}

function clickSample(event){
    //clickSample:100
    console.log("clickSample:" + event.data.num);
}

$("#nameless").click(function(){
  console.log("nameless");
});

$("#name").click(name);

$("#test").click(badSample(100));

$("#bind").bind("click",{num : 100},bindSample);

$("#click").click({num : 100},clickSample);
</script>

<br>
<br>
別のボタンクリックに処理のサンプル<br>
<a href=http://semooh.jp/jquery/api/events/trigger/type,+%5Bdata%5D/>http://semooh.jp/jquery/api/events/trigger/type,+%5Bdata%5D/</a>
<br>
Button#1をクリックすると数が増加します<br>
Button#2をクリックすると2つの数が増加します。<br>

<button id="button_sa1">Button #1</button>
<button id= "button_sa2">Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
<script>
$("#button_sa1").click(function () {
  update($("span:first"));
});
$("#button_sa2").click(function () {
  $("#button_sa1").trigger('click');
  update($("span:last"));
});
function update(j) {
  var n = parseInt(j.text(), 0);
  j.text(n + 1);
}
</script>

<pre>
$(function(){
	//処理
});
</pre>
と
<pre>
$(window).on("load",function(){
	//処理
});
</pre>

の違いは、読み込みデータの違いらしい。<br>
functionはHTMの読み込みが終了したタイミングで実行され、windowの方は画像やJSやCSSのすべてのデータが読み込まれてから実行されるのだそうです。

</body>
</html>

アンドロイドAndroidアプリ製作でディスプレイサイズ、スクリーンサイズ取得判別,Unity Admob、UNITY C#、ジャバスクリプトのリンクメモ

アンドロイドAndroidアプリ製作でディスプレイサイズ、スクリーンサイズ取得判別,Unity Admob、UNITY C#、ジャバスクリプトのリンクメモ

調べ物をしたときに、今後参考となるサイトのリンクメモです。

【スクリーンサイズの取得、ディスプレイ情報の取得】

アンドロイドAndroidアプリ製作でディスプレイサイズ、スクリーンサイズ取得判別
AndEngineのダウンロード

画面解像度などディスプレイの情報を取得する方法 –
[Androidアプリ/Android] ぺんたん info

[AndroidTips][Java]画面のサイズや解像度、密度などのデイスプレイの情報を取得する |
Androidアプリ開発情報まとめブログ

画面サイズを取得する
– Androidプログラマへの道 ~ Moonlight 明日香 ~ – Seesaa Wiki(ウィキ)

Androidの画面サイズを攻略して機種依存を吸収する(ナビゲーションバーとステータスバーのサイズを取得する) |
Tech Booster

【・UnityでAdmob広告】

[Unity][iOS]Unityで吐き出したXcodeプロジェクトへのAdmob表示方法 | iPhoneアプリをつくりんぐ
>最近の更新はありません。
[[UIViewController alloc]init];を使うタイプです。

xapp: Unity3Dで作ったゲームにAdMobを表示する方法(iOS編)
>UnityViewController*を使うタイプ

20121123 アド部定例会 unityアプリに広告を入れる方法

【・UNITY C#、javascriptジャバスクリプト】

ゲームは初心者にやさしく: Unity C#とJavascriptの主な違い

Convert unity javascript (unityscript) to C#

Unityでゲーム開発

イノベーション |シーンを跨いで情報を引き継ぐ

ComputerGraphics/Unity/Tips/Script/GetChildAndParentObject – Neareal

【・Unity transform 移動】

ActionScript入門Wiki – Unity – コードからTransformに値を設定する

Unityのtransformのアクセス速度 | 生存日記

【・Unity 回転】

Unity コントローラーの向きにモデルを回転させる方法 – 物欲センサーと戦う日々

[Unity] GameObject自身の角度を取得したい: ものづくりログ

UnityのJavaScript:Vector3とQuaternion : Nanashi-soft

Unity:C#のforループ文 : Nanashi-soft

Unityのプラットフォーム別、ディスプレイスクリーンサイズ別判別 Unity iOSにおけるGUIのiPhoneディスプレイ対応


クリスマストイレットペーパー

画像蒟蒻畑 温州みかん味(25g*12コ入)【蒟蒻畑】[こんにゃく ゼリー ダイエット食品]
●こんにゃく(グルコマンナン)をフルーツ果汁で味付けしたポーションタイプのフルーツコンニャクです。

イカリボタン25mm ブラックダメージ加工ボタンの付け替え、ボタンを無くてお困りの方

インクカートリッジ、IC6CL70L エプソン