Movatterモバイル変換

春(?)のチキチキjQuery祭り松本悦宜 / @ym405nm 姫路IT系勉強会

こんにちはーーーー XD• 今回は発表者の松本が、jQueryについて格闘したときに覚えたjQueryの使い方、魅力についてお話します• まだまだ勉強不足なこともありますがご容赦ください• 途中で質問やコメントがありましたらいつでもお願いします。間違ってたらごめんなさい Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

目次• 自己紹介• jQueryの概要• jQueryの使い方• jQueryのプラグイン• jQueryのセキュリティ• jQueryのまとめ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

自己紹介 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

概要• jQueryはJavaScriptのライブラリのひとつ• Write Less, Do More - JavaScriptを簡単に扱うことができる• プラグインを使うことにより、複雑な JavaScriptの処理を簡単に使用できる Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

概要 > jQueryの特徴• 軽量 - 32KB• クロスブラウザ - IE 6.0+, FF 3.6+, Safari 5.0+, Opera, Chrome• CSS3対応 - HTML5コンテンツに有用• ヌルヌル動く Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

概要 > jQueryの特徴• 軽量 - 32KB• クロスブラウザ - IE 6.0+, FF 3.6+, Safari 5.0+, Opera, Chrome• CSS3対応 - HTML5コンテンツに有用• ヌルヌル動く - チャラいサイトが作れる！ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

概要 > 簡単に書ける？実際どのくらい簡単にかけるのか、普通のJavaScript と jQuery を比較してみる• テキストボックスに入っている値を変数に取得する• テキストボックスには予め t1 というIDが与えられているものとする Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

概要 > 簡単に書ける?jQueryがない時∼ var tb1 = document.getElementById( t1 ); var text = tb1.value; Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

概要 > 簡単に書ける?jQueryがない時∼ var tb1 = document.getElementById( t1 ); var text = tb1.value; ト？ドキュメンレメント？ゲットエ小文字？大文字？ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

概要 > 簡単に書ける？jQueryがある時∼ var text = $( #t1 ).val(); たった１行でかける！ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

概要 > 簡単に書ける？jQueryがある時∼ var text = $( #t1 ).val(); たった１行でかける！そう、jQueryならね Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > ダウンロード• jQuery公式サイトから入手できる http://jquery.com/ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > ロード<!DOCTYPE HTML><HTML><HEAD> HTMLに1行埋め込むだけ</HEAD><BODY> <script type=”text/javascript” src=”./jquery.js”></script><BODY></HTML> HTML文書 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > ロード<!DOCTYPE HTML><HTML><HEAD><SCRIPT TYPE=”text/javascript” SRC=”./jquery.js”></SCRIPT> jQueryが書ける！<SCRIPT> Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > その他の入手法<!DOCTYPE HTML><HTML><HEAD></HEAD><BODY> CDN<BODY></HTML> Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > その他の入手法 Google Libraries API https://developers.google.com/speed/libraries/<script src="https://ajax.googleapis.com/ajax/libs/jquery/(Version)/jquery.min.js"></script> 直リンすることでJSファイルを用意しなくても使える Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

それでは実際に使ってみましょう

使い方 > 基本型要素を選んで処理を渡すだけ！ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 基本型要素を選んで処理を渡すだけ！ $( #t1 ).val( test ); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 基本型要素を選んで処理を渡すだけ！ $( #t1 ).val( test ); セレクタ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 基本型要素を選んで処理を渡すだけ！メソッド $( #t1 ).val( test ); セレクタ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 基本型要素を選んで処理を渡すだけ！メソッド $( #t1 ).val( test ); セレクタ要素を指定する Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 基本型要素を選んで処理を渡すだけ！処理を指定するメソッド $( #t1 ).val( test ); セレクタ要素を指定する Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > セレクタ$(“#himeji”)<div id=”himeji” ></div>$(“.himeji”)<div class=”himeji” ></div> Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド• メソッドは様々な種類があるので、すべて覚えるのは大変＞＜• その都度リファレンスを参考にしながら書いていきましょう• むしろコピペで Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド• とりあえず今日は「普通のJavaScriptであんなに苦労していたのに！！！」っていうところ中心にご紹介します Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド• 属性• CSS• エフェクト• イベント• Ajax Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性• HTML書くときの属性ってなんだっけ？ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性属性って？タグ？要素？ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性属性って？タグ？要素？<a href= ./index.html >LINK </a> Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性属性って？タグ？要素？要素<a href= ./index.html >LINK </a> Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性属性って？タグ？要素？要素<a href= ./index.html >LINK </a>タグタグ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性属性って？タグ？要素？属性要素<a href= ./index.html >LINK </a>タグタグ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性属性って？タグ？要素？ここを今からいじります属性要素<a href= ./index.html >LINK </a>タグタグ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性• a要素のリンク先を変えてみる Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性jQueryがない時∼ var link = document.getElementById("link"); link.href = next2.html ; Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性jQueryがある時∼ $( #link ).attr("href","next2.html"); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性• しかし、、、 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性みなさんおなじみIE6 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性 <a href= next.html id= link > $( #link ).attr("href"); IE6,7 だけフルパスでかえってくるnext.html ﬁle://localhost... IEのための調整 javascript編 http://goo.gl/FQPFH Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > 属性 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > CSS• CSSをJavaScriptで動的に変えたい• JavaScriptで背景を変えるには？ CSS #d1{ background-color: white; } Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > CSSjQueryがない時∼ var d1 = document.getElementById("d1"); d1.style. backgroundColor = black ; Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > CSSjQueryがある時∼$( #d1 ).css("background-color","black"); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > CSS CSS JavaScript jQuerybackground-color backgroundColor background-color font-size fontSize font-size font-weight fontWeight font-weight• CSSっぽく書ける Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > CSS CSS JavaScript jQuerybackground-color backgroundColor background-color font-size fontSize font-size font-weight fontWeight font-weight 命名規則のせいか微妙に違う、、、• CSSっぽく書ける Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > エフェクト• 通常のJavaScriptではかなり複雑なアニメーションを１行で実現してしまうメソッド• 要素を隠しだり出したり動かしたりする時によく用いる Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > エフェクト• 例えば要素を下にスライドさせて表示するには $( d1 ).slideDown(); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベント例• ロードイベントが発生したら• クリック読み込まれる• ダブルクリック• マウスオーバー• フォーカス Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベントjQueryがない時∼ • イベントハンドラを使う var b1 = document.getElementById( b1 ); b1. onclick = function(){ //処理 } 仕様上あまり使われなくなった Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベントjQueryがない時∼ • イベントリスナーを使う var b1 = document.getElementById( b1 ); b1. addEventListener( click ,function (){ // 処理 },false); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベント• しかし、、、 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベント Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベントIEでは addEventListener ではなく attachEventを使います var b1 = document.getElementById( b1 ); b1. attachEvent = ( onclick , function(){ //処理 } attachEvent() と addEventListener() http://goo.gl/yDbTn Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベントIEでは addEventListener ではなく attachEventを使います var b1 = document.getElementById( b1 ); b1. attachEvent = ( onclick , function(){ //処理 clickではなくonclick } attachEvent() と addEventListener() http://goo.gl/yDbTn Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベント• つまりどこかでブラウザを判断する処理が必要になります Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベントjQueryがある時∼ ※ jQuery1.7以降 ( #b1 ).on( click ,function(){ //処理 }• clickの所をいろいろ変えられる Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベントjQueryがある時∼ ※ 以前のバージョン ( #b1 ).bind( click ,function(){ //処理 }• 以前のjQueryではbindメソッド等を使う Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > イベントjQueryがある時∼ ( #b1 ).click(function(){ //処理 }• イベントごとのメソッドも用意されている Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > Ajax• AjaxはJavaScriptによる非同期通信を指す• 非同期通信を行うことにより、高いユーザビリティを持ったサイトを構築可能• Google Maps, Twitter, Facebook Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > Ajax 例• TwitterやFacebookのお知らせ • ページを読み込まなくても情報が更新される Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > AjaxAjaxを使うときには XMLHttpRequest を用いるhttpRequest = new XMLHttpRequest();httpRequest.overrideMimeType('text/xml');httpRequest.open('GET', 'http://google.com', true);httpRequest.onreadystatechange = function() { if(httpRequest.readyState == 4) { if(httpRequest.status == 200) { // 成功したときの処理 } }} Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > AjaxAjaxを使うときには XMLHttpRequest を用いるhttpRequest = new XMLHttpRequest(); XMLHttpRequestを開くhttpRequest.overrideMimeType('text/xml');httpRequest.open('GET', 'http://google.com', true);httpRequest.onreadystatechange = function() { if(httpRequest.readyState == 4) { if(httpRequest.status == 200) { // 成功したときの処理 } }} Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > AjaxAjaxを使うときには XMLHttpRequest を用いるhttpRequest = new XMLHttpRequest(); XMLHttpRequestを開くhttpRequest.overrideMimeType('text/xml');httpRequest.open('GET', 'http://google.com', true); URLを指定httpRequest.onreadystatechange = function() { if(httpRequest.readyState == 4) { if(httpRequest.status == 200) { // 成功したときの処理 } }} Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > AjaxAjaxを使うときには XMLHttpRequest を用いるhttpRequest = new XMLHttpRequest(); XMLHttpRequestを開くhttpRequest.overrideMimeType('text/xml');httpRequest.open('GET', 'http://google.com', true); URLを指定httpRequest.onreadystatechange = function() { if(httpRequest.readyState == 4) { if(httpRequest.status == 200) { レスポンスチェック // 成功したときの処理 } }} Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > Ajax Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > Ajax • XMLHttpRequestはIEでは使えないif(window.XMLHttpRequest) { httpRequest = new XMLHttpRequest(); httpRequest.overrideMimeType('text/xml');} else if(window.ActiveXObject) { XMLHttpRequestを開く try { httpRequest = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { httpRequest = new ActiveXObject('Microsoft.XMLHTTP'); }} XMLHttpRequest の使い方 IE用 http://goo.gl/fqtW8 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > Ajax• jQueryで簡単に操作することができる$.get( http://example.com , {param1 : abc , param2 : def }, function (data) { // コールバック時の処理 }, json ); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > Ajax• jQueryで簡単に操作することができる$.get( http://example.com , {param1 : abc , param2 : def }, function (data) { // コールバック時の処理 }, json ); http://example.com/?param1=abc&param2=def Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > Ajax• jQueryで簡単に操作することができる$.get( http://example.com , {param1 : abc , param2 : def }, function (data) { // コールバック時の処理 }, json ); http://example.com/?param1=abc&param2=def JSON Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > Ajax• JSON • Ajax通信でよく使う形式 • JavaScriptのオブジェクト形式であるため、 JavaScriptから操作しやすい • 他の言語でも用いられており、パースする関数がある場合も Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > メソッド > Ajax• マッシュアップ • 他サービスが提供するサービスを使うことによりコンテンツを作成する Request JSON Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > $ $( #t1 ).val( test );ちょっと待て、こいつ何？ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > $• $は変数でありjQueryのエイリアス Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > $• $は変数でありjQueryのエイリアスJavaScriptでは、一部の記号やマルチバイト文字を変数名に使用できます Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > $• $は変数でありjQueryのエイリアスJavaScriptでは、一部の記号やマルチバイト文字を変数名に使用できます var ひらがな; var 漢字; varﾟωﾟﾉ ; Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > $ $ は jQuery のエイリアス• $ = jQuery• $ == jQuery• $ === jQuery Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > $ $ は jQuery のエイリアス• $ = jQuery true• $ == jQuery true• $ === jQuery true Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > $$( #t1 ).val( test ); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > $$( #t1 ).val( test );jQuery( #t1 ).val( test ); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 関数• 関数の書き方基本形 function himeji( ){ //処理 } himeji( ); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 関数• 関数の書き方変数に関数を入れるvar himeji = function( ){ //処理 }; Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 関数• 関数の書き方 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 関数 • 関数の書き方var himeji = function( ){ //処理変数に関数を入れる }; Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 関数 • 関数の書き方var himeji = function( ){ //処理変数に関数を入れる }; funcName( ); 変数名＋括弧 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 関数 • 関数の書き方var himeji = function( ){ //処理変数に関数を入れる }; funcName( ); 変数名＋括弧 ( function( ){ } )( ); 無名関数 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 関数 • jQuery での無名関数var himeji = function( jQuery ){ //処理 }; funcName( jQuery ); ( function($){ } )(jQuery); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 関数• 一番シンプルな無名関数$(function(){ // 処理}); Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

使い方 > 関数• ページが読み込まれて開始するなら、、、$(document).ready(function(){ // 処理}); 今さら聞けないjQuery実行パターンまとめ http://goo.gl/CWWdl 無名関数をすぐに実行する(function(){})()の覚え書き http://goo.gl/RqbC8 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

プラグイン• jQueryを用いたライブラリである• jQueryの特徴を活かし、さらに複雑な処理を完結に書けるようにする Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

プラグイン > 例• jQuery UI• jQuery mobile jQuery UI - Demos & Documentation http://goo.gl/wch2v 画像ポップアウト・イメージギャラリー・スライドショー http://goo.gl/gyStO 無駄にエンターを強く押してしまいそうな誰得jQueryプラグイン jdtMdnStrongEnter.js http://goo.gl/36PCn Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ• jQueryによるXSS対策• jQueryによるXSS事例• フォームの注意事項 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ > XSSJavaScriptと切っても切れない縁なのがXSS（クロスサイトスクリプティング） Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ > XSSJavaScriptと切っても切れない縁なのがXSS（クロスサイトスクリプティング）仲良しBBSはじめまして [1] 名無しさんよろしく！はじめましてよろしく！ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ > XSSJavaScriptと切っても切れない縁なのがXSS（クロスサイトスクリプティング）仲良しBBS 仲良しBBSはじめまして [1] 名無しさん <script>alert [1] 名無しさんよろしく！はじめまして (1);</script> JavaScript実行よろしく！ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ > XSS通常はサーバ側で処理を行い、HTMLの特殊記号を無効にする(例) PHP : htmlspecialchars関数 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ > XSS$(element).text( xxxxxxxxxxx ); PHPのイタい入門書を読んでAjaxのXSSにつでHTMLを無効化するいて検討した(1) http://goo.gl/MB3Ql $(element).html( <script> ) JavaScriptが実行される！ $(element).text( <script> ) JavaScriptが実行されない！ Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ > XSSjQueryがXSSを引き起こすこともある$( #id ) : ID指定$( <div> ) : 要素を追加$( #<div> ) : 要素を追加 Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ > XSShttp://example.com/index.html#<img src... jQueryにおけるXSSを引き起こしやすい問題任意のコードについて http://goo.gl/HrBvn location.hash 等の処理により実行 ※最新のバージョンでは修正されています Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ > 注意事項 jQueryでのバリデートを過信しない名前 :メール :※メールアドレスが不正です jQueryで値をチェックして、エラーを返している Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

セキュリティ > 注意事項 jQueryでのバリデートを過信しない名前 :メール : あくまでも、ブラウザ上の話!※メールアドレスが不正ですリクエストを直接送るとデータの改変は容易にできる jQueryで値をチェックして、エラーを返している Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

まとめ• jQueryは簡単にJavaScriptを書ける• セレクタとメソッドを指定するだけで動く• プラグインを使うと、さらに複雑な処理までできる• セキュリティも忘れずに！• LTのみなさんお待たせしました Yoshinori Matsumoto @ym405nm /姫路IT系勉強会 2012年4月21日

おわり jQuery日本語リファレンス http://goo.gl/qv1Ed

Movatterモバイル変換

Change Language

春のチキチキjQuery祭り - 姫路IT系勉強会

Embed presentation

Recommended

More Related Content

Similar to 春のチキチキjQuery祭り - 姫路IT系勉強会

More from yoshinori matsumoto

春のチキチキjQuery祭り - 姫路IT系勉強会

Editor's Notes