SlideShare una empresa de Scribd logo
1 de 14
Java Script  on Rails 제 5 회 루비세미나 발표자료 (2007 년  12 월  1 일 ) 튜토리얼 [email_address] http://thinkr.egloos.com http ://usefulparadigm.com
모든 자바스크립트 마법이 시작되는 한 줄 <%= javascript_include_tag  :defaults  %>
레일스  Ajax  헬퍼 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ajax  응답의  3 유형 Client Server ,[object Object],[object Object],HTML  조각 1 Client Server ,[object Object],[object Object],[object Object],[object Object],데이터  only (XML, JSON, etc) 2 Client Server ,[object Object],자바스크립트 (instructions) 3 1 3 2 Client-side Processing Loosely-coupled Server-side Processing Tightly-coupled
RJS =  Ruby  generated JavaScript try { $(&quot;here&quot;).visualEffect(&quot;highlight&quot;); } catch (e) {alert('RJS error:' + e.toString());    alert('$(amp;quot;hereamp;quot;).visualEffect(amp;quot;highlightamp;quot;);');  throw e  } page[‘here’].visual_effect(…) page.select(‘xxx’).doSomething ... class ThingsController < .. def do ... # process rutines end  <%=  link_to_remote  “Hello,”,   :url => do_things_path %> <div id=“ here ”>World!</div> Form Rails RJS Hello, World! Hello, World!
Ajax Request Processing <div id=“ userlist ”>...</div> <%  remote_form_for  :user,   :update => ‘ userlist ’,   :position => :bottom,   :url => users_path do … render  :partial  => :user, :locals => … <div id=“ userlist ”>...</div> <%  remote_form_for   :user,   :url => users_path do … page.insert_html :bottom,  ‘ userlist ’ ,    :partial  => :user, :locals => … 액션 뷰 뷰 Ajax Request RJS Ajax Request
Why RJS? ,[object Object],[object Object],[object Object],[object Object]
JavaScriptGenerator 와  RJS  프록시 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
RJS Recipes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
WHERE  do I put my JS? <%=  yield :javascript  %> layouts/application.rhtml <% content_for  :javascript do  %> <%= javascript_include_tag  :my_own  %> <%  end  %> controllers/index.rhtml var myObject = function() { ... public/javascripts/my_own.js
Unobtrusiveness? <%=  link_to_remote “ Click Me? ”,    user_path(3)  %>
Unobtrusive  JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Rails Way vs. jQuery Way? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Rails Javascript Helper Prototype + LowPro/UJS jQuery
DEMO

Más contenido relacionado

La actualidad más candente

Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework Sakthi Bro
 
Requirejs
RequirejsRequirejs
Requirejssioked
 
Automated testing with RSpec
Automated testing with RSpecAutomated testing with RSpec
Automated testing with RSpecNascenia IT
 
Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4성일 한
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IVisual Engineering
 
jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)Addy Osmani
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applicationsMilan Korsos
 
How to learn to build your own PHP framework
How to learn to build your own PHP frameworkHow to learn to build your own PHP framework
How to learn to build your own PHP frameworkDinh Pham
 
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Caldera Labs
 
SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsMike Subelsky
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewVisual Engineering
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
Обзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScriptОбзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScriptCOMAQA.BY
 

La actualidad más candente (20)

Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework
 
Requirejs
RequirejsRequirejs
Requirejs
 
Symfony2 and AngularJS
Symfony2 and AngularJSSymfony2 and AngularJS
Symfony2 and AngularJS
 
RSpec 2 Best practices
RSpec 2 Best practicesRSpec 2 Best practices
RSpec 2 Best practices
 
Automated testing with RSpec
Automated testing with RSpecAutomated testing with RSpec
Automated testing with RSpec
 
Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 
jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 
22 j query1
22 j query122 j query1
22 j query1
 
How to learn to build your own PHP framework
How to learn to build your own PHP frameworkHow to learn to build your own PHP framework
How to learn to build your own PHP framework
 
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
 
SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
JavaScript Basics with baby steps
JavaScript Basics with baby stepsJavaScript Basics with baby steps
JavaScript Basics with baby steps
 
Being a jsp
Being a jsp     Being a jsp
Being a jsp
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Js unit testing
Js unit testingJs unit testing
Js unit testing
 
Обзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScriptОбзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScript
 

Destacado

루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작SangHun Lee
 
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기Sukjoon Kim
 
레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드Sukjoon Kim
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails추근 문
 
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)Taeung Song
 
문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시동현 조
 
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션Taegon Kim
 
프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요Chris Ohk
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께지수 윤
 
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)MinGeun Park
 
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101Chang W. Doh
 
초급 개발자 탈출
초급 개발자 탈출초급 개발자 탈출
초급 개발자 탈출JeongHun Byeon
 
게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법Chris Ohk
 
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태NAVER D2
 
손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.Kwangsung Ha
 
EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기이상한모임
 
소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵중선 곽
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기JinKwon Lee
 

Destacado (18)

루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작
 
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
 
레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails
 
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
 
문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시
 
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션
 
프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께
 
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
 
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101
 
초급 개발자 탈출
초급 개발자 탈출초급 개발자 탈출
초급 개발자 탈출
 
게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법
 
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태
 
손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.
 
EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기
 
소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 

Similar a JavaScript on Rails 튜토리얼

Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On RailsWen-Tien Chang
 
And the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportAnd the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportBen Scofield
 
Introduction to Prototype JS Framework
Introduction to Prototype JS FrameworkIntroduction to Prototype JS Framework
Introduction to Prototype JS FrameworkMohd Imran
 
PHP and Rich Internet Applications
PHP and Rich Internet ApplicationsPHP and Rich Internet Applications
PHP and Rich Internet Applicationselliando dias
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous MerbMatt Todd
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2tonvanbart
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery ApplicationsRebecca Murphey
 
Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rob
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2borkweb
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricksambiescent
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPresswpnepal
 

Similar a JavaScript on Rails 튜토리얼 (20)

Merb jQuery
Merb jQueryMerb jQuery
Merb jQuery
 
Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On Rails
 
And the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportAnd the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack Support
 
Introduction to Prototype JS Framework
Introduction to Prototype JS FrameworkIntroduction to Prototype JS Framework
Introduction to Prototype JS Framework
 
Framework
FrameworkFramework
Framework
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
Rails is not just Ruby
Rails is not just RubyRails is not just Ruby
Rails is not just Ruby
 
JS-05-Handlebars.ppt
JS-05-Handlebars.pptJS-05-Handlebars.ppt
JS-05-Handlebars.ppt
 
Intro to jquery
Intro to jqueryIntro to jquery
Intro to jquery
 
PHP and Rich Internet Applications
PHP and Rich Internet ApplicationsPHP and Rich Internet Applications
PHP and Rich Internet Applications
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous Merb
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
 
Rails <form> Chronicle
Rails <form> ChronicleRails <form> Chronicle
Rails <form> Chronicle
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPress
 

Más de Sukjoon Kim

워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드Sukjoon Kim
 
Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발Sukjoon Kim
 
루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날Sukjoon Kim
 
Realtime Web 간보기
Realtime Web 간보기Realtime Web 간보기
Realtime Web 간보기Sukjoon Kim
 
페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011Sukjoon Kim
 

Más de Sukjoon Kim (6)

워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드
 
Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발
 
Merb tutorial
Merb tutorialMerb tutorial
Merb tutorial
 
루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날
 
Realtime Web 간보기
Realtime Web 간보기Realtime Web 간보기
Realtime Web 간보기
 
페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011
 

Último

Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 

Último (20)

Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 

JavaScript on Rails 튜토리얼

  • 1. Java Script on Rails 제 5 회 루비세미나 발표자료 (2007 년 12 월 1 일 ) 튜토리얼 [email_address] http://thinkr.egloos.com http ://usefulparadigm.com
  • 2. 모든 자바스크립트 마법이 시작되는 한 줄 <%= javascript_include_tag :defaults %>
  • 3.
  • 4.
  • 5. RJS = Ruby generated JavaScript try { $(&quot;here&quot;).visualEffect(&quot;highlight&quot;); } catch (e) {alert('RJS error:' + e.toString()); alert('$(amp;quot;hereamp;quot;).visualEffect(amp;quot;highlightamp;quot;);'); throw e } page[‘here’].visual_effect(…) page.select(‘xxx’).doSomething ... class ThingsController < .. def do ... # process rutines end <%= link_to_remote “Hello,”, :url => do_things_path %> <div id=“ here ”>World!</div> Form Rails RJS Hello, World! Hello, World!
  • 6. Ajax Request Processing <div id=“ userlist ”>...</div> <% remote_form_for :user, :update => ‘ userlist ’, :position => :bottom, :url => users_path do … render :partial => :user, :locals => … <div id=“ userlist ”>...</div> <% remote_form_for :user, :url => users_path do … page.insert_html :bottom, ‘ userlist ’ , :partial => :user, :locals => … 액션 뷰 뷰 Ajax Request RJS Ajax Request
  • 7.
  • 8.
  • 9.
  • 10. WHERE do I put my JS? <%= yield :javascript %> layouts/application.rhtml <% content_for :javascript do %> <%= javascript_include_tag :my_own %> <% end %> controllers/index.rhtml var myObject = function() { ... public/javascripts/my_own.js
  • 11. Unobtrusiveness? <%= link_to_remote “ Click Me? ”, user_path(3) %>
  • 12.
  • 13.
  • 14. DEMO