オンラインでJavaScriptやPHPを実行する環境 - JavaScript勉強会ちょっとしたプログラムを書いて動作チェックをしたい場合、最近はオンラインの実行環境が用意されていました。＼(便利)／ qiita.com paiza.ioが提供しているWebサービスを使ってみました。 Web-based online coding environment | paiza.IO 左上のプルダウンメニューからプログラミング言語を選ぶ。（例：PHP） コードを書く。 真ん中にある「実行」ボタンを押す。 シンプルで便利でした！ ちょっとしたテストなら、これで十分ですね。
オブジェクト指向って便利なの？ - JavaScript勉強会
プログラミングのやり方って、いろんな方法が考えられてきました。 何かを作るとき、ゼロから作るのは大変だけど、先人の努力や工夫を拝借して作ると、その分だけ楽ができますね！ プログラミングのやり方はまだまだ発展途上＝改善の余地があるんだろうけど、現状はどうなっているのでしょうか？ shokuren.hateblo.jp オブジェクト指向のやってることはわかるけど、説明してる人の何が言いたいのかはわからん 疑問が２つ。 一人で作ってて、小規模な案件なら、むしろ書く量が増えて面倒だったりしません？ なので、そうしないほうがいいこともある？というのが一つ。 腕が上がるとor効率化を図るといつの間にかオブジェクト指向になってるとか？が2つ目。 オブジェクト指向ってどうなのさ？ (1) オブジェクト指向プログラミングを使わない方が良い場合もあるの？ (2) オブジェクト指向プログラミングは効率化に役立っ
3.3 動作のバリエーションを増やす 《条件分岐(else if)》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.3 動作のバリエーションを増やす else if サンプルコード 3.3 動作のバリエーションを増やす 構造化プログラミングの基本動作は、 順次 選択（条件分岐） 反復（繰り返し） の３つです。 （参考）JavaScript学習 準備編 - JavaScript勉強会 選択（条件分岐）は「if」で書きますが、場合分けを増やしたいとき「else if」という書き方が用意されています。 else if (p.81) if文の条件式がfalseになると、else以降が実行されます。 elseの後ろにまた別のif文をつけ加えることができます。 サンプルコード <html> <head> <meta charset="UTF-8">
3.2 入力内容に応じて動作を変更する 《変数》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 変数とは 1) 変数を「定義する」 変数名のつけ方 予約語とは アルファベットの大文字・小文字を区別する 変数の使用例 代入演算子（=） 変数に保存された内容で動作を切り替える 比較演算子 型とは まとめ 今日はJavaScriptの変数について学びます。 「変数」（variable）は、データを入れておく「箱」「容器」みたいなものです。 変数 (プログラミング) - Wikipedia プログラミングにおいて、変数（へんすう、variable）とは、プログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものである。 変数とは (p.71) ある行で得ら
3.1 確認ダイアログボックスを表示する 《条件分岐 (if) 》 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 条件分岐 if 3.1 確認ダイアログボックスを表示する 戻り値・返り値 trueとfalse if文 else以降は省略することもできる クリックされたボタンでメッセージを変える まとめ 条件分岐 if (p.62) 「もし～なら」 「もし～でないなら」 というように、ある条件が成り立つかどうかで動作を変えるのがif文です。 今回のサンプルでは、クリックされたのが[OK]なのか、それとも[キャンセル]なのかを判断して、その後の動作を変えるのにif文を使います。 正しいif文を書くためには「条件」を設定する必要があります。 この条件の設定に必要なブール値（true / false）について理解してから、実際にif文を書くことにし
オブジェクト指向の用語「プロパティ」「メソッド」 - JavaScript勉強会
JavaScriptの勉強をしていて、説明の順番を変えた方がいいかも？と思われる箇所がありました。 →「オブジェクト」という仕組みと、その用語についてです。 jsstudy.hatenablog.com windowやdocumentなど、すべてのオブジェクトは、メソッド以外に「プロパティ」を持っています。 オブジェクトのプロパティとは、そのオブジェクトの状態を表すものです。 「オブジェクト」「プロパティー」「メソッド」…英語の専門用語がいきなりたくさん出てくると、訳が分からなくなるかも！？ JavaScriptの教材を作る場合、 先に、データ構造（変数、定数、配列など）の話を出す。 次に、オブジェクトの話を出す。 という順番が分かりやすいのではないか？と思いました。 （まあ、人それぞれだと思いますが…。） オブジェクト指向プログラミングの仕組みと用語 「プロパティ」や「メソッド」という仕
2.4 HTMLを書き換える 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第2章を読んでみます。 jsstudy.hatenablog.com 2.4 HTMLを書き換える documentオブジェクトのgetElementByIdメソッド 要素のコンテンツのプロパティ textContent textContentは「プロパティ」～オブジェクトの状態を表す Elementオブジェクト オブジェクトのまとめ まとめ 2.4 HTMLを書き換える (p.50) 要素を取得する・コンテンツを書き換える JavaScriptでできるアウトプットの３つ目は、表示されているHTMLの書き換えです。 コンソールやダイアログボックスは、公開するWebサイトやWebアプリケーションで使用することはまれです。 JavaScriptではほとんどの場合、今回紹介するHTMLの書き換えを行いま
2.3 ダイアログボックスを表示する 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第2章を読んでみます。 jsstudy.hatenablog.com 2.3 ダイアログボックスを表示する アラートダイアログボックス ダイアログボックスとは？ 2.3 ダイアログボックスを表示する (p.50) コンソールに続いて紹介する２つ目のアウトプットは、ダイアログボックスへのアウトプットです。 使い方はconsole.logとほとんど変わらず、簡単です。 <body> <script> window.alert('出力したい文字や計算式など'); </script> </body> 上記のHTMLファイルをChromeで開くと、以下のようなアラートダイアログボックスが表示されました。 「OK」ボタンか、右上の「×」ボタンをクリックすると、消えます。 アラートダイアログボックス windo
JavaScriptでmacOSを自動操作できるJXA - JavaScript勉強会
JavaScriptに、ちょっと便利な用途がありました！ Macには、操作を自動化できるAppleScriptという道具が用意されています。 このAppleScriptの代わりに、JavaScriptも使えるようになっていました。 JavaScript for Automation (JXA)とは？ qiita.com AppleScriptの代わりにJavaScriptを使えるようになってました。 Yosemiteからの新機能だそうです。 JXAとも呼ばれています。 そもそも、AppleScriptって何？ AppleScript - Wikipedia AppleScript（アップルスクリプト）は、アップルが開発したClassic Mac OS/macOS用のオブジェクト指向のスクリプト言語。 AppleScriptはMac OSのスクリプティング機構Open Scripting A
2.2 JavaScriptはどこに書く？ 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第2章を読んでみます。 jsstudy.hatenablog.com 2.2 JavaScriptはどこに書く？ HTMLドキュメントに直接JavaScriptを書く方法 <script>にtype属性を含める必要はない HTML5の<script>タグ HTML4以前の<script>タグ JavaScriptファイルを読み込む 外部JavaScriptファイルの読み込み JavaScriptが実行される順序 JavaScriptは外部ファイルに書くのが一般的 ファイルの文字コード形式は「UTF-8」に コメント文 まとめ 2.2 JavaScriptはどこに書く？ (p.44) <script>タグとJavaScriptの記述場所 HTMLにJavaScriptを直接記述する方法 JavaSc
2.1 コンソールにアウトプット 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第2章を読んでみます。 jsstudy.hatenablog.com 2.1 コンソールにアウトプット Chromeのコンソール 3種類のアウトプット console.log() JavaScript構文の名称 行末のセミコロン まとめ 2.1 コンソールにアウトプット (p.32) JavaScriptからテキストなどをアウトプットできる場所の１つに「コンソール」があります。 コンソールはJavaScriptのプログラムがうまく動いているかどうかを確かめるための道具です。 コンソール（console）は、手動でデータを入力したり出力したりできる画面です。 コンソールは、プログラムの動作確認などで使われる便利な機能です。 （参考） JavaScriptプログラミング講座【開発に便利な JavaSc
Microsoft 「Visual Studio Code」でJavaScript学習 - JavaScript勉強会
JavaScriptの学習で使うテキストエディターとして、MicrosoftのVisual Studio Codeを使ってみることにしました。 code.visualstudio.com Visual Studio Code - Visual Studio Visual Studio Code - Wikipedia Visual Studio Code はオープンソースのソースコードエディタである。 マイクロソフトにより開発され、Windows, Linux, macOS 上で動作する。 Visual Studio Code は Electron フレームワークを使用しており、Node.jsを使ったBlinkで描画されるデスクトップアプリケーションである。 編集したいファイルを、右クリック一発で開けるので、地味に便利です！ コードのハイライト表示も、見やすいです。 確かな力が身につくJa
1.6 JavaScript サンプルデータのダウンロード 【JavaScript超入門】 - JavaScript勉強会
JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第1章を読んでみます。 jsstudy.hatenablog.com 1.6 サンプルデータのダウンロード 1.6 サンプルデータのダウンロード (p.23) 本書のサポートページ SBクリエイティブ:確かな力が身につくJavaScript「超」入門 SBクリエイティブ:『確かな力が身につくJavaScript「超」入門』サンプルファイル SBクリエイティブ:『確かな力が身につくJavaScript｢超｣入門』正誤情報 【サンプル5-03について】 サンプル5-03はcookieの読み書きの実習です。 こちらのサンプルをローカル環境で実行する場合は、誠にお手数ですが、Chrome以外のブラウザでお試しください。 [理由] Chromeのデフォルトの設定では、ローカルファイルのcookieの読み書き
1.3 JavaScriptの「プログラミング」と動作の仕組み 【JavaScript超入門】 - JavaScript勉強会
005 JavaScriptのプログラミングと動作の仕組み - YouTube （3分5秒） JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第1章を読んでみます。 jsstudy.hatenablog.com 1.3 JavaScriptの「プログラミング」と動作の仕組み イメージしてみよう ～ インプット→加工→アウトプット いつそれをする？ ～ イベント 1.3 JavaScriptの「プログラミング」と動作の仕組み (p.13) JavaScriptの特徴 ブラウザで実行され、ブラウザを操作することができる HTMLやCSSにはできないことをするために使う HTMLやCSSをリアルタイムに書き換えることができる［最重要］ イメージしてみよう ～ インプット→加工→アウトプット (p.13) ショッピングサイトのお会計ページで、商品の数量
1.2 JavaScriptってどういうもの? 【JavaScript超入門】 - JavaScript勉強会
003 JavaScriptってどういうもの？ - YouTube （3分40秒） JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第1章を読んでみます。 jsstudy.hatenablog.com 1.2 JavaScriptってどういうもの? 「ブラウザを操作する」ってどういうこと？ 具体的な「書き換え」の例 パターン１： タグに囲まれたテキストを書き換える パターン２： 要素を追加・削除する パターン３： タグの属性の値を変更する パターン４： CSSの値を変更する 「HTMLやCSSだけではできないことをする」ってどういうこと？ 1.2 JavaScriptってどういうもの? (p.5) JavaScriptは ブラウザを操作するためのプログラミング言語 で、 HTMLやCSSだけではできないことをする ために使います。 確かに、Ja
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
005 JavaScriptのプログラミングと動作の仕組み
004 HTMLの基礎知識
003 JavaScriptってどういうもの？
002 これからJavaScriptを始める皆さんへ
001 JavaScript学習の準備