DOM（Document Object Model）とは？ - JavaScript勉強会
JavaScript学習で、「DOM」という用語がよく出てきます。 DOMについてまとめておきます。（メモ） DOMとは？ APIとは？ DOMツリーとは？ DOMツリーのノード DOMの操作 DOMを操作するためのライブラリー JavaScriptでDOM操作 jQueryでDOM操作 MVCフレームワークでDOM操作 Virtual DOM（仮想DOM）の登場 DOMリファレンス まとめ DOMとは？ DOM - Google 検索 DOM（ドム）は、「Document Object Model」の略です。 JavaScriptを使って、ブラウザーのDOMを操作すると、HTMLを書き換えることができます。 ↑こっちのドムではありませんｗ Document Object Model - Wikipedia Document Object Model (DOM) は、HTML文書やXML文
5.1 カウントダウンタイマー 《時間の計算とタイマー》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第５章を読んでみます。 jsstudy.hatenablog.com 5.1 時間の計算とタイマー Dateオブジェクトの日時を設定する方法 サンプルコード 実行結果 Dateオブジェクトに現在の日時を設定する方法 Dateオブジェクトに未来・過去の日時を設定する方法 Dateオブジェクトの専用メソッドを使って日時を設定する Dateオブジェクトを初期化するときに日時を設定する 書式：日時を設定した状態でDateオブジェクトを初期化する Dateオブジェクトのコンストラクタ関数に引き渡す引数の書式 UNIXタイムを利用した時間の計算 getTime()メソッド UNIXタイムを利用して時間の引き算 タイマー処理（一定時間で繰り返す） サンプルコード 実行結果 setTimeout()メソッドの使い
1.3 ラムダ式とは？ 【関数型プログラミングの基礎】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は「関数型プログラミングの基礎 JavaScriptを使って学ぶ」の第１章を読んでみます。 jsstudy.hatenablog.com 「ラムダ式」という記法（書き方）の発明 数学者、アロンゾ・チャーチ Alonzo Church ラムダ式 無名関数 関数宣言の問題点 関数定義と関数適用を分ける書き方 まとめ 「ラムダ式」という記法（書き方）の発明 (p.15) 数学者、アロンゾ・チャーチ Alonzo Church チューリング機械が発表されたほぼ同時期に、アメリカの数学者であるアロンゾ・チャーチは、全く別のアプローチで「計算」を定義しました。 それは「λ（ラムダ）計算」と呼ばれる数学の理論です。 アロンゾ・チャーチ - Wikipedia アロンゾ・チャーチ（Alonzo Church, 1903年6月14日 - 1995年8月11日）はアメリカ
はてなブログの記事内でJavascriptを書く方法 - Three.jsを使って、作ってみた
以前、はてなブログの記事内でJavascriptを書いてみて、ちゃんと表示されるのかを試しました。 で、改めて、はてなブログの記事内でJavascriptを書く方法をブログにまとめます。 やり方は、このようなソースコードを記事内に書くだけです。 <script type="text/javascript"></script> これだけです（笑） こんな感じにかけば、Javascriptが書けます。 試してみます。 このコードを記事内に書きました。 <script type="text/javascript">document.write("test");</script> 実行例: 「test」と表示されているはずです。 HTML5のcanvasやjqueryなども使えるようです。 これで終わりです。 ご不明な点などがありましたら、遠慮なくご質問ください。 ありがとうございました！
はてなブログでJavaScriptが使えることを知りました - 無題で行こう
■はじめに Googleであれこれ検索していると、下記の「Three.jsを使って、作ってみた」さんのブログにたどり着きました。 その中では、ブログの記事の中にJavaScriptを書き込めるということが紹介されていました。 はてな記法でスクリプトをべたっと書いていけば良いのでしょうか？ まだざっと見たところですが、いろいろ研究してみる価値がありそうな気がします。 ■サンプルを組み込んでみました さっそく自分でもやってみようということで、まずは本当に動作してくれるのか確かめます。 簡単なサンプルを組み込んでみましたので、下記のリンクを一度クリックしてみてください。 お得情報はこちらをクリック！！ …他愛のないサンプルですいません… ひとまず、私のスマホ（xperia so-02f）とdolphinブラウザの組み合わせでも、無事に動作することが分かりました。標準的な記述をしておけば、大抵の環
4.4 小数点第◯位で切り捨てる 《Mathオブジェクト》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第４章を読んでみます。 jsstudy.hatenablog.com 4.4 端数処理 サンプルコード 実行結果 Mathオブジェクト Mathオブジェクトは初期化しないで使う Mathオブジェクトの主なプロパティーとメソッド 小数点第◯位で切り捨てるアルゴリズム 書式：小数点以下を切り捨てる 例：「3.1415」を小数点第2位で切り捨てる計算方法 まとめ 4.4 端数処理 (p.178) 「小数点第○位」で切り捨てるファンクションを作成します。 例では円周率を小数点第2位までで切り捨てて表示します。 足し算、引き算など四則演算は記号を使えばできますが、それ以外の計算には「Mathオブジェクト」というオブジェクトを使用します。 この実習で作成するファンクションでは、このMathオブジェクトのメソッ
4.3 「0」をつけて桁数を合わせる 《数字を文字列に変換》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第４章を読んでみます。 jsstudy.hatenablog.com 4.3 型変換（キャスト） サンプルコード 実行結果 型変換（キャスト） まとめ 4.3 型変換（キャスト） (p.169) 表示させるデータの文字数を合わせたり、ファイルの並び順を揃えたりするのに、1桁の数字の前に0をつけて桁を揃えることがよくあります。 具体的には「1」「2」という数字をそれぞれ「01」「02」にする処理です。 どうすればこの機能を実現できるか、考えながら進めましょう。 サンプルコード 以下の内容を「index.html」というファイル名で保存します。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>4-03_digit</title>
4.2 わかりやすく日時を表示する 《Dateオブジェクト》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第４章を読んでみます。 jsstudy.hatenablog.com 4.2 Dateオブジェクト サンプルコード その１ 実行結果 その１ サンプルコード その２ 実行結果 その２ Dateオブジェクト Dateオブジェクトは初期化する必要がある 初期化とは？ new演算子とは？ コンストラクタ関数とは？ Dateオブジェクトの使い方 オブジェクトには初期化するものとしないものがある まとめ 4.2 Dateオブジェクト (p.160) この実習ではDateオブジェクトという、日時の取得・設定・計算をするオブジェクトを使用します。 今回は取得した日時を加工して、見慣れている12時間表記にしましょう。 Dateオブジェクトの利用方法と、取得したデータの加工がポイントです。 サンプルコード その１
4.1 フォームの入力内容を取得する 《入力内容の取得とイベント》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第４章を読んでみます。 jsstudy.hatenablog.com 4.1 フォームの入力内容を取得する サンプルコード 実行結果 イベントとは？ 書式：要素にイベントを設定する イベントが発生する場所 イベントハンドラーとは？ 基本動作のキャンセル フォームの入力内容を読み取る 書式：入力内容を読み取る まとめ 4.1 フォームの入力内容を取得する (p.150) 入力内容の取得とイベント これまでの実習では、HTMLページが読み込まれた瞬間に、自動的に処理が開始されるプログラムを書いてきました。 今回のサンプルでは、「イベント」を利用してプログラムが動作するタイミングを制御します。 [検索]と書かれたボタンがクリックされたら、テキストフィールドに入力されている内容を読み取って、それをHTML
JavaScript学習のカリキュラム その２ - JavaScript勉強会
以前、JavaScript学習のカリキュラムを考えてみましたが、導入部分を改善できるかも？と思いました。 当初のカリキュラム案 改善点 Visual Studio Code ＋ Node.js 基本事項 プログラミング・パラダイムの説明 プログラムの構成要素 データ構造 制御構造 関数 時間の見積り 環境構築 講義＋演習 シミュレーション 当初のカリキュラム案 jsstudy.hatenablog.com 改善点 改善案を思いつくきっかけになったのが、こちらの記事。 mizchi.hatenablog.com 提案: 初心者にNode.jsから教える 「なるほど」と思ったのは、JavaScriptの実行環境として、「ブラウザー」を使うのではなく「Node.js」を使う点です。 最初のうちは、JavaScriptのコードを書いて、実行結果を確認するのに、わざわざブラウザーを起動しなくてもいい
いかにしてJavaScriptを教えるか - mizchi's blog
経緯 ドワンゴ様から恵贈頂いた。 高校生からはじめる プログラミング 作者: 吉村総一郎出版社/メーカー: KADOKAWA発売日: 2017/04/14メディア: 単行本この商品を含むブログを見る …読んでみたけど、HTML/CSS/JS の初歩的な部分を、初学者にやらせるとこうなる、という素朴な世界観で、CSSフレームワークもJSライブラリも出てこない。いや、出せと言ってるわけじゃない。理解せずにフレームワークを使う習慣がつくと、スクリプトキディ的な振る舞いによっていくし、教える側としても、変数が大きくなってコントロールできないのが問題だろう。 じゃあ基礎を抑えたとして、この先どう教えるといいんだろうな、というのは、たしかに自分も前から考えてはいて、それを書いてみる。 この文章のターゲット JavaScriptを教える人、またはポインタがあれば自学できる中級者以上 追記: すべての初学
Visual Studio CodeでJavaScriptをステップ実行する方法 - JavaScript勉強会
JavaScriptを練習するときブラウザーで実行していました。 JavaScript（JS）のコードは、Visual Studio Code（VSCode）で書いています。 VSCode上でJSを実行して、動作確認する方法がありました。（メモ） 前提（準備） Windowsパソコンの用意 Node.jsの用意 Visual Studio Codeの用意 Visual Studio Codeのデバッガー Node.jsの設定 ステップ実行 用語 まとめ 前提（準備） 今作業している環境は以下のとおりです。 Windows7（32ビット版） Node.js （バージョン 0.12.0） Visual Studio Code （バージョン 1.11.2） を使っています。 Windowsパソコンの用意 予算あり（多） → ThinkPad X1 Carbon 16GBモデルがイイかな？ 予算あ
GAS(google app script)を使うならUnderscoreGSライブラリを使おう！ - エンジニアはこわくない
こんにちは、つじたく（@Tsuji_Taku50）です。 GAS(google app script)を使うなら超便利なUnderscoreGSライブラリを使ったほうがいいよ ということでUnderscoreGSを少し紹介します。 UnderscoreGSとは ライブラリを利用する プロジェクトキー 少しだけ関数を紹介 まとめ UnderscoreGSとは GAS(google app script)で使用できる公式ライブラリの一つです。 公式ドキュメントはこちら sites.google.com Underscore.jsを元にGAS(google app script)ように作られたみたいなのでUnderscore.jsと、とても良く似ています。 Underscore.jsの関数とUnderscore.gsの関数を比べると関数名も処理も一緒なんてことが多々あります。 このUndersc
フロントエンドが嫌い
ウェブフロントエンドの技術の進歩と興亡の速度には目を見張るものがある。 browserifyが生まれ、Gruntが生まれ、Gulpが生まれた。 そしてその全てが死んだ。 Webpack, Babel, Flow, 今栄えている技術だってそのうちに死ぬだろう。Reactだって例外ではない。 一部はもう死につつあるし、少し前にあれだけ持て囃されたTypeScriptも今や消えつつある。Coffeeは全エンジニアから嫌われた。 そんな万華鏡のように目まぐるしく変わる情勢に追い付かんと研鑽を続ける者等がいる。アーリーアダプターを自称し最新技術のケツを追いかけQiitaにクソを垂れ流す彼らこそ我らがイケイケウェブフロントエンジニアである。 最新技術に目を凝らし、やれ新たなこれイケてるだの古臭いあれはイケてないだのと宣いチュートリアル記事を量産する彼らであるが、彼らの存在は決して無駄ではなく、生まれた
3.11 アイテムの価格と在庫を表示する 《オブジェクト》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.11 オブジェクト サンプルコード 実行結果 オブジェクト 連想配列とは？ JavaScriptのオブジェクトは連想配列？ ドット演算子とは？ オブジェクトの作り方 オブジェクトを構成する要素の名称 オブジェクトからデータを読み取る・書き換える オブジェクトのメソッド オブジェクトの繰り返し処理 オブジェクトのイテレーター イテレーターとは？ map()メソッド まとめ 3.11 オブジェクト (p.135) 配列に続いて新しいデータの種類「オブジェクト」を紹介します。 「オブジェクトって、windowとかdocumentとか、いままで見てきたオブジェクトのこと？」 そう、同じです……基本的には。 ただ、ここでは複数のデータ
3.10 項目をリスト表示する 《配列》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.10 配列 サンプルコード 実行結果 配列 JavaScriptの配列 配列の作り方 配列からデータを読み取る 配列のメソッド DOM操作 DOMとは？ document.createElementメソッド textContent プロパティ appendChild()メソッド まとめ 3.10 配列 (p.124) 変数に代入する「データ」として、いままで文字列、数値、ブール値などを使ってきましたが、今回は新しいデータの種類として「配列」を紹介します。 これまで使用してきた各種データは、変数１つにつき１つのデータを保存できるだけでした。 配列を使うと、複数のデータを１つにまとめてグループ化することができます。 サンプルコー
3.9 FizzBuzz 《算術演算子》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.9 算術演算子 FizzBuzzとは？ サンプルコード 実行結果 算術演算子 剰余演算子 % 冪乗演算子 ** まとめ 3.9 算術演算子 (p.119) FizzBuzzというゲームをプログラムで実現してみましょう。 これまでも +、-、*と、計算のための記号をあまり詳しく説明せずに使ってきましたが、この実習でも新たに割り算の余りを算出する%記号を使います。 FizzBuzzとは？ FizzBuzzとは、何人か組になって、「１」「２」と順番に数字を言っていき、３で割り切れる数字のときは「Fizz！」、５で割り切れるときは「Buzz！」、３でも５でも割り切れるときは「FizzBuzz！」と叫ぶゲームです。 Fizz Buzz
3.8 税込価格を計算する 《ファンクション、関数リテラル》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.8 ファンクション functionの意味 構文 関数の宣言 関数式 ファーストクラスファンクション リテラル JavaScriptの関数リテラル（関数の書式） サンプルコード 実行結果 関数の基本的な考え方 ファンクションの呼び出し ファンクションを変数に代入 JavaScriptのプログラミング・パラダイム 無名関数 まとめ 3.8 ファンクション (p.110) この実習では、ファンクション（function）の作成と利用の方法を紹介します。 ファンクションとは、よく使う処理を１つにまとめた小さなサブプログラム（プログラム内のミニプログラム）で、使いたいときに呼び出して利用します。 なお、ファンクションは日本語では「関
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
200行のコードへのブロックチェーンの実装 | プログラミング | POSTD
ブロックチェーン の基本的な概念は非常にシンプルです。分散型データベースで、順序付けられたレコードのリストが連続的に増加していきます。しかしシンプルとは言え、ブロックチェーンやそれを使うことで解決しようとしている問題について話をする際に、頭を悩まされることがよくあります。これは、 ビットコイン や イーサリアム といった、一般にもよく知られているブロックチェーンベースのプロジェクトでよく聞かれる話です。「ブロックチェーン」は、 取引 や スマートコントラクト 、または 暗号通貨 といったコンセプトと強い結びつきがあります。 そのため、本来シンプルであるべきブロックチェーンの理解がより困難になってしまっています。抜け目のないソースコードであれば尚更です。 そこで、 NaiveChain という、200行のJavascripitに実装した、非常にシンプルなブロックチェーンを紹介したいと思います
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
