JavaScript

• もはや入力チェックやアラートダイアログを出すだけの存在ではない！

#content

言語仕様†

ES2015(ES6)†

• 2018年現在では主要ブラウザはほぼ対応している
• 古いブラウザ対応のためにトランスパイラを使うことが多い

言語仕様†

オブジェクト展開†

const arg =

アロー関数†

• 超省略系の書き方ができる

const fn = (a, b) => a + b;
const oneArgs = a => a * 2;
const noArgs =()=> console.log('Hello, world!');  // 引数なしの書き方は()のみ

• 二行に渡るなら

const fn = (a, b) => {
  return a + b;
};

• 省略せずに描くと・・上段は関数リテラルで無名関数なのだが！

const fn = funciont(a, b) { return a + b; }
function Add(a,b) { return a + b; }

スプレッド演算子†

• 配列の一括表示

const array = [1, 10, 3];
console.log(...array);

• 可変長引数を受ける

const func2 = (...r) => console.log(...r);

呼び出しに変数名を指定させる†

const full = ({first,last}) =>  { return first + last; };
full({ first:'苗字',last:'名前'});

React†

• Virtual DOM
• コンポーネント中心。MVCのV担当でJSの中にHTMLを記載できる。
• JSではタグが扱えないので事前にコンパイルするか、実行直前に変換する。
• PHPのようにRenderでHTMLの一部を返すような仕組み。

Redux†

• 状態やそれに対応するActionなどを管理するフレームワーク

参考サイト†

• https://qiita.com/tomzoh/items/7fabe7cb57dd96425867

Chromeでデバッグ†

https://app.codegrid.net/entry/breakpoint-1

クラスの定義†

// この一文でprototypeプロパティが使えるようになる
function Foo() {};
// ここで定義を代入。
Foo.prototype = {
    init:function() { alert('A');},
    test:function() { alert('B');}
};

// newして使う必要があるのか･･･
var foo = new Foo();
foo.init();

function Foo() {};
Foo.prototype = {
    init:function() { alert('A');},
    test:function() { alert('B');}
};
Foo.A = function()
{
    alert('A is static');
}
Foo.B = function()
{
    alert('B is static');
}
// newして使う必要があるのか･･･
var foo = new Foo();
foo.init();
// prototypeをはさまないとそのまま実行可能！
Foo.A();
Foo.B();

便利なライブラリ†

Prototype.js†

一昔前の主流

JQuery†

2009年現在はこちらのほうがよろしいらしい。

http://www.slideshare.net/hayatomizuno/jquery-7665168

プラグインの作り方†

http://web-terminal.blogspot.jp/2012/11/jquery4.html

onLoadで動かす。†

$(function () { alert('test'); });

タイマーを仕込む†

setInterval(function(){ alert('test'); },10000);

指定の要素の数をカウントする。†

if ($('#探したい場所のID .その配下のクラス').length > 0) { alert('test'); }

関数が定義されているかをチェックする†

alert(typeof($.cookies.set));

定義されていればobjectとでる。

Jqueryのセレクタ†

• LI要素

$('li')

• LI要素かつクラス名hoge

$('li.hoge')

• LI要素かつIDhoge

$('li#hoge')

• 子孫セレクタDIV contentsのLI

$('DIV#contents LI')

• 子セレクタ DIVの直下のLI

$('DIV#contents > LI')

• グループセレクタ(カンマで区切る)

$('#first, #third")

• Aタグのhref要素を回す

$("a[href]").each(function(){
}

• DIV#hoge以下のAで絞るバージョン

$("DIV#hoge a[href]").each(function(){
}

• チェックボックスをすべてOFF

$("input[type='checkbox']").removeAttr( 'checked' );

• チェックボックスをすべてON

$("input[type='checkbox']").attr( 'checked', 'checked' );

• クラス名hoge以下クラス名fuga以下のチェックボックスOFF

  $(".hoge .fuga input[type='checkbox']").removeAttr( 'checked' );

属性セレクタ†

• href属性を持つものを取得

$("[href]")

• href属性がhogeであるもの

$("[href='hoge']")

• href属性がhogeで始まる、終わるもの

$("[href^='hoge']")
$("[href$='hoge']")

フォームの操作†

• 値の取得と設定

  $("input").val();
  $("input").val("初期値");

変更関連（フォーカスON,OFF,変更)†

$("input").("focus",function(){});
$("input").("blur",function(){});
$("input").("change",function(){});

フォーム用のセレクター†

input[type='text']
input[type='password']
input[type='radio']
input[type='checkbox']
input[type='submit']
input[type='image']

セレクトされたもの、チェックされたもの†

:selected
:checked

Joose†

その他†

Rhino†

JavaでかかれたJavaScript実装。J2SE6.0から標準添付

*メニュー編集

コンピュータ関係

• DataBase
• Linux
• PC-UNIX
• Programming
• PC情報

その他趣味系(別wiki)

• 自動車
• 温泉
• スキー情報

外部リンク

• 旧　技術メモブログ
• 新　技術メモブログ
• ランチブログ
• NIFTYにあるHP
• 旅行記写真館

今日の訪問 1

オンライン人数 7

最新の20件

人気の20件

今日の20件