Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Similar to Javascript & jquery
Similar to Javascript & jquery (20)
Javascript & jquery
- 6. rootage.inc agenda １. What's Javascript？ ２. What's jQuery？ ３. Demonstration ４. Conclusion ５. Bibliography total 31 slides 6
- 8. rootage.inc javascriptとは Webページに組み込まれたプログラムを Webブラウザ上で実行するために用いられる プログラミング言語 8 1. What’s javascript ?
- 9. rootage.inc alert とは 9 1. What’s javascript ? OK ×ボタン
- 10. rootage.inc 警告ダイヤログボックスを 表示させるコード [xxx.js] function msg() { alert(‘何で押したし。'); } [yyy.jsp] <input type=“button” value=“警告！" onclick="msg();"> 10 1. What’s javascript ?
- 11. rootage.inc 11 1. What’s javascript ? confirm とは OK キャンセル ×ボタン
- 12. rootage.inc 確認ダイヤログボックスを 表示させるコード [xxx.js] function msg(){ var myRet = confirm(“計算機が～"); if (myRet == true) { alert("７セグメン ト～"); } else { alert("拾うのを止 めました。"); } } [yyy.jsp] <input type=“button” 12 1. What’s javascript ?
- 13. rootage.inc 13 1. What’s javascript ? prompt とは OK キャンセル ×ボタン 入力ボックス
- 14. rootage.inc 入力ダイアログを表示 させるコード [xxx.js] function msg(){ password = prompt("パスワードを～") if (password == "ABCDE"){ location.href = “zzz.jsp"; } else { alert("パスワードが違 います"); } } [yyy.jsp] <input type = “button” value=“入力する" 14 1. What’s javascript ?
- 15. rootage.inc 15 1. What’s javascript ? onclick とは click!
- 16. rootage.inc リンクやフォーム内の ボタンなどをクリックした 場合の処理を実行するコー ド [xxx.js] function myEnter(){ myRet = confirm("計算機 が～"); if (myRet == true) { alert("７セグメン ト～"); } else { alert("拾うのを止 めました"); } } [yyy.jsp] 16 1. What’s javascript ?
- 20. rootage.inc 前準備は簡単！ <script src= "https://ajax.googleapis.com/ajax/libs/jquery/ 3.0.0/jquery.min.js"></script> を jspファイル内の<head></head>内に挿入するだ け！ 20 2. What’s jQuery ?
- 22. rootage.inc click! click! 22 2. What’s jQuery ? toggleClass とは click! click!
- 23. rootage.inc 引数にクラス名を 指定することで 指定したクラスをトグル処 理 [xxx.js] jQuery (function(){ $("#btn").click(function () { $(this).toggleClass ("btn"); }); }) [yyy.jsp] <button class = “btn” >押さないで </button> [zzz.css] .btn {background-color:red;} 23 2. What’s jQuery ?
- 24. rootage.inc scroll! 24 2. What’s jQuery ? scroll とは
- 25. rootage.inc ブラウザ上でスクロールを 行った時に 発生するイベント [xxx.js] jQuery(function(){ jQuery(window).scroll (function(){ var obj_t_pos = jQuery('#target').offset().top; var scr_count = jQuery(document).scrollTop() + (window.innerHeight/2); if (scr_count > obj_t_pos){ jQuery('#target').addClass('red'); }else{ jQuery('#target').removeClass(); } }) }) [yyy.jsp] <p id="target">よく見つけたね</p> [zzz.css] #target{ margin: 150px 0; font-size: 25px; } 25 2. What’s jQuery ? クラスを 実行する クラスを 実行しない 「よく見つ けたね」 が画面の 中央に 来た時に、
- 28. rootage.inc 4. Conclusion javascript を使うことで、 ダイヤログボックスを出したり、 操作によって画面を変化させたりと、色々でき る！ さらに、 ｊQuery を使うと より効率的にできる！ 28
- 30. rootage.inc 5. Bibliography Windowオブジェクトが持つ、alert()、confirm()、prompt()メソ ッド http://ibaraki-it.org/it-dojo/2007-07-25/ JavaScript Index メソッド、プロパティ、関数・リファ レンス http://www.scollabo.com/banban/jsindex/ AjaxTower クリック時の処理(onClick) 30
- 31. rootage.inc Thank you for listening!! 31
Editor's Notes
- 複雑にしようと思えば思うほど、複雑になり大変。なので、jqueryを使う！
- 画像と説明をくっつける。
- http://illustcut.com/?page_id=43 画像のURL
- jqueryを使おう！
- 要は、クラスがあったら消す、無かったら付け加える！
- スクロールして、指定した文字列が画面の中央に来た時に、色が変化する仕様。
- Javascriptは動きなので、実際に動いているものを見た方がおもしろいですよね？