2017-09-01から1ヶ月間の記事一覧
sinatraではルーティングを.rbに、ビューを.erbに記述するのでした。 html上で、フォームの取得値等のインスタンス変数を利用するときなど、rubyを使用する際のtipsです。 ex.erb____________________________ <% price = 125500 * 1.08 %><p>パソコンの値段は<</p>…
説明にsinatraを使用したコードを利用しています。 GETメソッド サーバー側にリクエストを送信します。 URLの末尾に情報が付与されているため、簡単に送信内容が確認できますが、セキュリティー的な問題があります。 .rb__________________________ require …
(On the terminal) gem install sinatra-reloader (On the .rb file)require 'sinatra/reloader'
<html><head> <meta charset="UTF-8"></head> <body> <h1>お問い合!せ</h1> <form type = '/a'> <div> お名前：<input type = "text"> </div> <div > メール：<input type = "text" name = "email"> </div> お問い合わせ内容： <br> </form></body></html>
Sinatraは最小の労力でRubyによるWebアプリケーションを手早く作るためのDSLです。 DSL: 独自言語 Sienta自体は外部ライブラリのGemなので、gem inastall & require で使用できるようになります。 同様のフレームワークとしてはRubyOnRailsが有名ですが、こ…
テキストを見ていて唐突に出てきた構文です。ググり方が下手なのか調べても出てこないんです。。 たぶんこういうこと・・・ def function() return <条件式がtrueの場合の出力> if <条件式> <条件式がfalseの場合の出力> end p function ソースコード例・・…
number = gets.to_i 数字をinteger型で取得しています。
ソースコード string = "OOIUssdkj" list = string.split("") p list 実行結果 ["O", "O", "I", "U", "s", "s", "d", "k", "j"]
attr_accessor を用いずにインスタンス変数を操作（アクセスメソッド） class School # nameというインスタンスメソッドを定義する def name=(value) @name = value end def name # インスタンス変数のため、メソッド間で使用できる @name end end school = …
組み込みライブラリ そのまま使える 標準ライブラリ require で使える 外部ライブラリ gem install の後 require で使える
エイリアスを設定することでコマンドを省略して実行できます。 覚えやすくしたり、操作が簡単になります。 (ex) alias ls='ls -F' Googleで調べるとたくさん省略例がでてきますので、使えそうなコマンドはどんどん使っていきましょう。 aliasを使うことで、…
pwd カレントディレクトリを表示 mkdir カレントディレクトリの直下に新たなディレクトリを作成 ls カレントディレクトリの配下にあるフォルダやファイルを表示 cd (ディレクトリ名) カレントディレクトリの移動 ！ディレクトリ名を指定しない場合（cdのみ）…
def division(n,y) if y == 0 return "割れないよ" end n / y end 以上のコードでy=0だった場合、n/yは実行されずに、割れないよと表示されます。 すなわち、return にはメソッドを終了させる働きもあります。
配列,範囲オブジェクト.each do |変数名| 処理 end コード例 fab = ["hance","maizer","yukino"] fab.each do |chara| puts charaend 出力 hancemaizeryukino 以上、リストに対してeach文を適用しましたが、ハッシュにも適用可能です。 コード例 fab = {rokk…
{: yuigahama => "yui", : yukinosshita => "yukino", :kawasaki => "saki"} {"yuigahama" => "yui", "yukinoshita" => "yukino", "kawasaki" => "saki"} {yuigahama: "yui", yukinoshita: "yukino", kawasaki: "saki"} #頻度高め
ターミナルで irb
テキスト内に変数を埋め込む場合に使用します。 console.log( `あなたの成績は${achivement}です。${pass_or_failure}です！`) //バックオート``変数をテキストと一緒に表示
$('h1').on('event', () => { //処理 }) イベントを設定したい要素を取得する その要素にイベントを設定する イベントが発生した時の処理を実行する TIPs ・このfunctionをイベントハンドラと呼ぶ。
javascriptにおけるDOMでは、以下のようにスタイルプロパティを設定します。 node.style.prop [= value] // node: 対象のノード prop: スタイルプロパティ value:設定値 .cssファイルで、次のようなスタイルを設定するとします。 { text-decoration: line-th…
addEventListenerの、イベントを記述するfunction()のかっこでは、イベントオブジェクトを設定できます。 node.addEventListener('click', function(e) { // eがイベントオブジェクトです},false); console.log(e.target) TIPs ・イベントオブジェクトには情…
これまで私が触れてきたCSSは.cssファイルにコードを記述し、<head>にてCSSファイルを読み込むものでした。 javascriptにおけるDOMでCSSを操作する場合、htmlファイル中のタグに直接スタイルの書き込みを行います。このやり方は「インラインスタイル」と呼ばれます</head>…
繰り返し処理のwhileです。条件式がtrueの場合に処理を行います。while (条件式)｛ 実行する文; ｝ （適用例） while (lists.firstChild) { lists.removeChild(lists.firstChild); } ~TIPs~ ・listsの小ノードが無くなるまで、上の小ノードから順番に消去す…
・ノードの削除 parent.removeChild(node)// parent: 親ノード node:削除対象のノード ~TIPs~ :nodeはparentの子ノードでないといけない :nodeは単体ノードでないといけない(基本的にノードの集合は推薦されていない)。従って頭の子ノードを繰り返し文を用い…
タグ指定による子ノードの取得は、他の親ノードにまで範囲を持つから、以下の方法を用いると良いでしょう。 子ノードを取得 parent.childNodes // 子ノードをすべて取得parent.firstChild // 一番最初の子ノードを取得parent.lastChild // 一番末尾の子ノー…
appendChildメソッドを用いて特定の親ノードの最後の子ノードとしてノードを追加する parent.appendChild(node); parent: 親ノード node: 追加するノード 適用例 <script> const lists = document.getElementById("lists") //ulの取得。あとのリスト追加用 const tar…
・新しいノードの生成document.createElement(name);// name: 要素名→単に生成するだけです。配置はされません 例) <script> const list = document.createElement("li") </script>
Document Object Model Javascriptでは、htmlを編集することでウェブページに動的変化を与えます。その編集をやりやすくするための仕組みがDOMです。 DOMはHTMLをドキュメントツリーとして扱います。 このツリー状になったオブジェクトをノードと呼びます。
