提交 94aadf76 编写于 作者: C Carlos Antonio da Silva

Add syntax highlight to code blocks in javascript guide [ci skip]

上级 f47026e7
...@@ -39,7 +39,7 @@ to vanilla JavaScript as well. ...@@ -39,7 +39,7 @@ to vanilla JavaScript as well.
As an example, here's some CoffeeScript code that makes an Ajax request using As an example, here's some CoffeeScript code that makes an Ajax request using
the jQuery library: the jQuery library:
``` ```coffeescript
$.ajax(url: "/test").done (html) -> $.ajax(url: "/test").done (html) ->
$("#results").append html $("#results").append html
``` ```
...@@ -63,35 +63,35 @@ demonstrate other ways. ...@@ -63,35 +63,35 @@ demonstrate other ways.
Here's the simplest way to write JavaScript. You may see it referred to as Here's the simplest way to write JavaScript. You may see it referred to as
'inline JavaScript': 'inline JavaScript':
``` ```html
<a href="#" onclick="alert('Hello, world.')">Here</a> <a href="#" onclick="alert('Hello, world.')">Here</a>
``` ```
When clicked, the alert will trigger. Here's the problem: what happens when When clicked, the alert will trigger. Here's the problem: what happens when
we have lots of JavaScript we want to execute on a click? we have lots of JavaScript we want to execute on a click?
``` ```html
<a href="#" onclick="function fib(n){return n<2?n:fib(n-1)+fib(n-2);};alert('fib of 15 is: ' + fib(15) + '.');">Calculate</a> <a href="#" onclick="function fib(n){return n<2?n:fib(n-1)+fib(n-2);};alert('fib of 15 is: ' + fib(15) + '.');">Calculate</a>
``` ```
Awkward, right? We could pull the function definition out of the click handler, Awkward, right? We could pull the function definition out of the click handler,
and turn it into CoffeeScript: and turn it into CoffeeScript:
``` ```coffeescript
fib = (n) -> fib = (n) ->
(if n < 2 then n else fib(n - 1) + fib(n - 2)) (if n < 2 then n else fib(n - 1) + fib(n - 2))
``` ```
And then on our page: And then on our page:
``` ```html
<a href="#" onclick="alert('fib of 15 is: ' + fib(15) + '.');">Calculate</a> <a href="#" onclick="alert('fib of 15 is: ' + fib(15) + '.');">Calculate</a>
``` ```
That's a little bit better, but what about multiple links that have the same That's a little bit better, but what about multiple links that have the same
effect? effect?
``` ```html
<a href="#" onclick="alert('fib of 16 is: ' + fib(16) + '.');">Calculate</a> <a href="#" onclick="alert('fib of 16 is: ' + fib(16) + '.');">Calculate</a>
<a href="#" onclick="alert('fib of 17 is: ' + fib(17) + '.');">Calculate</a> <a href="#" onclick="alert('fib of 17 is: ' + fib(17) + '.');">Calculate</a>
<a href="#" onclick="alert('fib of 18 is: ' + fib(18) + '.');">Calculate</a> <a href="#" onclick="alert('fib of 18 is: ' + fib(18) + '.');">Calculate</a>
...@@ -101,7 +101,7 @@ Not very DRY, eh? We can fix this by using events instead. We'll add a `data-*` ...@@ -101,7 +101,7 @@ Not very DRY, eh? We can fix this by using events instead. We'll add a `data-*`
attribute to our link, and then bind a handler to the click event of every link attribute to our link, and then bind a handler to the click event of every link
that has that attribute: that has that attribute:
``` ```coffeescript
fib = (n) -> fib = (n) ->
(if n < 2 then n else fib(n - 1) + fib(n - 2)) (if n < 2 then n else fib(n - 1) + fib(n - 2))
...@@ -149,7 +149,7 @@ attributes, and attaches appropriate handlers. ...@@ -149,7 +149,7 @@ attributes, and attaches appropriate handlers.
is a helper that assists with writing forms. `form_for` takes a `:remote` is a helper that assists with writing forms. `form_for` takes a `:remote`
option. It works like this: option. It works like this:
``` ```erb
<%= form_for(@post, remote: true) do |f| %> <%= form_for(@post, remote: true) do |f| %>
... ...
<% end %> <% end %>
...@@ -157,7 +157,7 @@ option. It works like this: ...@@ -157,7 +157,7 @@ option. It works like this:
This will generate the following HTML: This will generate the following HTML:
``` ```html
<form accept-charset="UTF-8" action="/posts" class="new_post" data-remote="true" id="new_post" method="post"> <form accept-charset="UTF-8" action="/posts" class="new_post" data-remote="true" id="new_post" method="post">
... ...
</form> </form>
...@@ -170,14 +170,12 @@ You probably don't want to just sit there with a filled out `<form>`, though. ...@@ -170,14 +170,12 @@ You probably don't want to just sit there with a filled out `<form>`, though.
You probably want to do something upon a successful submission. To do that, You probably want to do something upon a successful submission. To do that,
bind to the `ajax:success` event. On failure, use `ajax:error`. Check it out: bind to the `ajax:success` event. On failure, use `ajax:error`. Check it out:
``` ```coffeescript
<script>
$(document).ready -> $(document).ready ->
$("#new_post").on("ajax:success", (e, data, status, xhr) -> $("#new_post").on("ajax:success", (e, data, status, xhr) ->
$("#new_post").append xhr.responseText $("#new_post").append xhr.responseText
).bind "ajax:error", (e, xhr, status, error) -> ).bind "ajax:error", (e, xhr, status, error) ->
$("#new_post").append "<p>ERROR</p>" $("#new_post").append "<p>ERROR</p>"
</script>
``` ```
Obviously, you'll want to be a bit more sophisticated than that, but it's a Obviously, you'll want to be a bit more sophisticated than that, but it's a
...@@ -189,7 +187,7 @@ start. ...@@ -189,7 +187,7 @@ start.
is very similar to `form_for`. It has a `:remote` option that you can use like is very similar to `form_for`. It has a `:remote` option that you can use like
this: this:
``` ```erb
<%= form_tag('/posts', remote: true) %> <%= form_tag('/posts', remote: true) %>
``` ```
...@@ -202,13 +200,13 @@ details. ...@@ -202,13 +200,13 @@ details.
is a helper that assists with generating links. It has a `:remote` option you is a helper that assists with generating links. It has a `:remote` option you
can use like this: can use like this:
``` ```erb
<%= link_to "first post", @post, remote: true %> <%= link_to "first post", @post, remote: true %>
``` ```
which generates which generates
``` ```html
<a href="/posts/1" data-remote="true">a post</a> <a href="/posts/1" data-remote="true">a post</a>
``` ```
...@@ -216,13 +214,13 @@ You can bind to the same Ajax events as `form_for`. Here's an example. Let's ...@@ -216,13 +214,13 @@ You can bind to the same Ajax events as `form_for`. Here's an example. Let's
assume that we have a resource `/fib/:n` that calculates the `n`th Fibonacci assume that we have a resource `/fib/:n` that calculates the `n`th Fibonacci
number. We would generate some HTML like this: number. We would generate some HTML like this:
``` ```erb
<%= link_to "Calculate", "/fib/15", remote: true, data: { fib: 15 } %> <%= link_to "Calculate", "/fib/15", remote: true, data: { fib: 15 } %>
``` ```
and write some CoffeeScript like this: and write some CoffeeScript like this:
``` ```coffeescript
$(document).ready -> $(document).ready ->
$("a[data-fib]").on "ajax:success", (e, data, status, xhr) -> $("a[data-fib]").on "ajax:success", (e, data, status, xhr) ->
count = $(this).data("fib") count = $(this).data("fib")
...@@ -233,13 +231,13 @@ $(document).ready -> ...@@ -233,13 +231,13 @@ $(document).ready ->
[`button_to`](http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to) is a helper that helps you create buttons. It has a `:remote` option that you can call like this: [`button_to`](http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to) is a helper that helps you create buttons. It has a `:remote` option that you can call like this:
``` ```erb
<%= button_to "A post", @post, remote: true %> <%= button_to "A post", @post, remote: true %>
``` ```
this generates this generates
``` ```html
<form action="/posts/1" class="button_to" data-remote="true" method="post"> <form action="/posts/1" class="button_to" data-remote="true" method="post">
<div><input type="submit" value="A post"></div> <div><input type="submit" value="A post"></div>
</form> </form>
...@@ -260,7 +258,7 @@ Imagine you have a series of users that you would like to display and provide a ...@@ -260,7 +258,7 @@ Imagine you have a series of users that you would like to display and provide a
form on that same page to create a new user. The index action of your form on that same page to create a new user. The index action of your
controller looks like this: controller looks like this:
``` ```ruby
class UsersController < ApplicationController class UsersController < ApplicationController
def index def index
@users = User.all @users = User.all
...@@ -271,7 +269,7 @@ class UsersController < ApplicationController ...@@ -271,7 +269,7 @@ class UsersController < ApplicationController
The index view (`app/views/users/index.html.erb`) contains: The index view (`app/views/users/index.html.erb`) contains:
``` ```erb
<b>Users</b> <b>Users</b>
<ul id="users"> <ul id="users">
...@@ -291,7 +289,7 @@ The index view (`app/views/users/index.html.erb`) contains: ...@@ -291,7 +289,7 @@ The index view (`app/views/users/index.html.erb`) contains:
The `app/views/users/_user.html.erb` partial contains the following: The `app/views/users/_user.html.erb` partial contains the following:
``` ```erb
<li><%= user.name %></li> <li><%= user.name %></li>
``` ```
...@@ -304,7 +302,7 @@ users controller as an Ajax request, looking for JavaScript. In order to ...@@ -304,7 +302,7 @@ users controller as an Ajax request, looking for JavaScript. In order to
service that request, the create action of your controller would look like service that request, the create action of your controller would look like
this: this:
``` ```ruby
# app/controllers/users_controller.rb # app/controllers/users_controller.rb
# ...... # ......
def create def create
...@@ -328,7 +326,7 @@ respond to your Ajax request. You then have a corresponding ...@@ -328,7 +326,7 @@ respond to your Ajax request. You then have a corresponding
`app/views/users/create.js.erb` view file that generates the actual JavaScript `app/views/users/create.js.erb` view file that generates the actual JavaScript
code that will be sent and executed on the client side. code that will be sent and executed on the client side.
``` ```erb
$("<%= escape_javascript(render @user) %>").appendTo("#users"); $("<%= escape_javascript(render @user) %>").appendTo("#users");
``` ```
...@@ -355,7 +353,7 @@ and put `//= require turbolinks` in your CoffeeScript manifest, which is usually ...@@ -355,7 +353,7 @@ and put `//= require turbolinks` in your CoffeeScript manifest, which is usually
If you want to disable Turbolinks for certain links, add a `data-no-turbolink` If you want to disable Turbolinks for certain links, add a `data-no-turbolink`
attribute to the tag: attribute to the tag:
``` ```html
<a href="..." data-no-turbolink>No turbolinks here</a>. <a href="..." data-no-turbolink>No turbolinks here</a>.
``` ```
...@@ -364,7 +362,7 @@ attribute to the tag: ...@@ -364,7 +362,7 @@ attribute to the tag:
When writing CoffeeScript, you'll often want to do some sort of processing upon When writing CoffeeScript, you'll often want to do some sort of processing upon
page load. With jQuery, you'd write something like this: page load. With jQuery, you'd write something like this:
``` ```coffeescript
$(document).ready -> $(document).ready ->
alert "page has loaded!" alert "page has loaded!"
``` ```
...@@ -373,7 +371,7 @@ However, because Turbolinks overrides the normal page loading process, the ...@@ -373,7 +371,7 @@ However, because Turbolinks overrides the normal page loading process, the
event that this relies on will not be fired. If you have code that looks like event that this relies on will not be fired. If you have code that looks like
this, you must change your code to do this instead: this, you must change your code to do this instead:
``` ```coffeescript
$(document).on "page:change", -> $(document).on "page:change", ->
alert "page has loaded!" alert "page has loaded!"
``` ```
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册