第01回Web講座2018

ネットワークチーム第１回北海道科学大学電子計算機研究部

INDEX ◦ ブラウザについて ◦ テキストエディタ導入 ◦ パッケージ導入 ◦ エディタについて 2

ブラウザについて Chrome

ブラウザについてコンソールや要素の検証など開発者ツールをよく利用するため本講座では Google Chrome を使用します。 4

テキストエディタ導入 Atom

テキストエディタ導入各自好みのエディターがあればそれを使ってください。特に無ければ Atom をインストールします。 6

テキストエディタ導入 ◦ 「https://atom.io/」にアクセス ◦ ダウンロード、インストール 7

テキストエディタ導入 Atom起動画面 8

パッケージ導入

パッケージ導入パッケージコーディングに役立つ拡張機能のこと。ユーザーが自由に導入できるため自分だけの開発環境を作ることができる。 10

パッケージ導入１． [Ctrl] + [,(カンマ)] でセッティングを開く 11

パッケージ導入２．「Install」タブをクリック３．テキストボックスに「Japanese」と入力してエンター４．「Japanese-menu」のをクリック２３
４ 12

パッケージ導入おすすめのパッケージ ◦ Emmet tabキーで即座にタグにできる。 ※本講座必須です ◦ highlight-selected 関数,変数をダブルクリックすると一致単語を強調する。 ◦
show-ideographic-space バグに繋がる全角スペースを表示する。 ◦ bracket-matcher 対応するカッコ｛｝<>が分かりやすくなる。 ◦ color-picker カラーピッカーを表示する。 13

エディタについて

エディタについて設定を自分好みに変えてみましょう。「エディタ設定」と「システム設定」は全チェック推奨です。 15

エディタについてショートカットキーコマンド内容 Ctrl +↑,↓ | カーソル位置の行を上下移動させる Ctrl
+ N 新規ファイルを開く Ctrl + S 上書き保存 Ctrl + F ファイル内の単語を検索 Ctrl + / 行をコメントアウト Ctrl + W 編集中ファイルを閉じる (無ければ終了) 16

演習１ HTMLを書いてみよう

演習１（HTML） Atomを使ってHTMLを書いてみよう１．任意の場所に「NetTeam」フォルダを新規作成２．「NetTeam」フォルダを右クリックして「Open With Atom」を選択３．「Ctrl +
N」でファイルを新規作成「Ctrl + S」で保存ファイル名は「densan.html」４．「NetTeam」フォルダの中に「densan.html」が作成されていることを確認する 18

演習１（HTML）確認次項１．フォルダは作業用フォルダ３．エンコードがUTF-8 ２．行番号が表示されている４．コーディングがHTML ３２１４
19

演習１（HTML）確認次項１．フォルダは作業用フォルダ３．エンコードがUTF-8 ２．行番号が表示されている４．コーディングがHTML これらを確認したら、半角の「!」を入力して「Tab」を押してください。 20

演習１（HTML） HTMLのテンプレートができました！ 21

演習１（HTML）次に、１０行目へ飛び main と入力した後 [Tabキー] を押してください。自動的に補完されました。 22

演習１（HTML）以下のように書き換えて、「Ctrl + S」で保存それでは、densan.htmlを開いてみましょう 23

演習１（HTML） ✓ 「densan.web」が表示された ✓ タイトルが「Netチーム活動」になった 24

演習２デベロッパーツール

演習２（デベロッパーツール）デベロッパーツールを使ってみよう F12を押すと、以下のような画面が現れる。 26

演習２（デベロッパーツール） ◦で囲ったところを押下する。 Dock side でレイアウトを変更できる。使いやすいように設定しましょう。 27

演習２（デベロッパーツール）「densan.web」を「右クリック」→「検証」とクリックすることで該当するHTML要素を確認できる。 28

演習２（デベロッパーツール） console.log(“hello world!”); ↲Enter コンソールにJavaScriptを書いてみましょう 29 １．デベロッパーツールを開き「Console」タブをクリック２．以下のJavaScriptを入力

演習２（デベロッパーツール） document.getElementsByTagName(‘h1’)[0].innerHTML = (“NetTeam”); ↲Enter 30

本日はここまでお疲れ様でした

第01回Web講座2018

第01回Web講座2018

北海道科学大学　電子計算機研究部

More Decks by 北海道科学大学　電子計算機研究部

Other Decks in Education

Featured

Transcript

ネットワークチーム第１回北海道科学大学電子計算機研究部

INDEX ◦ ブラウザについて ◦ テキストエディタ導入 ◦ パッケージ導入 ◦ エディタについて 2

ブラウザについて Chrome

ブラウザについてコンソールや要素の検証など開発者ツールをよく利用するため本講座では Google Chrome を使用します。 4

テキストエディタ導入 Atom

テキストエディタ導入各自好みのエディターがあればそれを使ってください。特に無ければ Atom をインストールします。 6

テキストエディタ導入 ◦ 「https://atom.io/」にアクセス ◦ ダウンロード、インストール 7

テキストエディタ導入 Atom起動画面 8

パッケージ導入

パッケージ導入パッケージコーディングに役立つ拡張機能のこと。ユーザーが自由に導入できるため自分だけの開発環境を作ることができる。 10

パッケージ導入１． [Ctrl] + [,(カンマ)] でセッティングを開く 11

パッケージ導入２．「Install」タブをクリック３．テキストボックスに「Japanese」と入力してエンター４．「Japanese-menu」のをクリック２３

パッケージ導入おすすめのパッケージ ◦ Emmet tabキーで即座にタグにできる。 ※本講座必須です ◦ highlight-selected 関数,変数をダブルクリックすると一致単語を強調する。 ◦

エディタについて

エディタについて設定を自分好みに変えてみましょう。「エディタ設定」と「システム設定」は全チェック推奨です。 15

エディタについてショートカットキーコマンド内容 Ctrl +↑,↓ | カーソル位置の行を上下移動させる Ctrl

演習１ HTMLを書いてみよう

演習１（HTML） Atomを使ってHTMLを書いてみよう１．任意の場所に「NetTeam」フォルダを新規作成２．「NetTeam」フォルダを右クリックして「Open With Atom」を選択３．「Ctrl +

演習１（HTML）確認次項１．フォルダは作業用フォルダ３．エンコードがUTF-8 ２．行番号が表示されている４．コーディングがHTML ３２１４

演習１（HTML）確認次項１．フォルダは作業用フォルダ３．エンコードがUTF-8 ２．行番号が表示されている４．コーディングがHTML これらを確認したら、半角の「!」を入力して「Tab」を押してください。 20

演習１（HTML） HTMLのテンプレートができました！ 21

演習１（HTML）次に、１０行目へ飛び main と入力した後 [Tabキー] を押してください。自動的に補完されました。 22

演習１（HTML）以下のように書き換えて、「Ctrl + S」で保存それでは、densan.htmlを開いてみましょう 23

演習１（HTML） ✓ 「densan.web」が表示された ✓ タイトルが「Netチーム活動」になった 24

演習２デベロッパーツール

演習２（デベロッパーツール）デベロッパーツールを使ってみよう F12を押すと、以下のような画面が現れる。 26

演習２（デベロッパーツール） ◦で囲ったところを押下する。 Dock side でレイアウトを変更できる。使いやすいように設定しましょう。 27

演習２（デベロッパーツール）「densan.web」を「右クリック」→「検証」とクリックすることで該当するHTML要素を確認できる。 28

演習２（デベロッパーツール） console.log(“hello world!”); ↲Enter コンソールにJavaScriptを書いてみましょう 29 １．デベロッパーツールを開き「Console」タブをクリック２．以下のJavaScriptを入力

演習２（デベロッパーツール） document.getElementsByTagName(‘h1’)[0].innerHTML = (“NetTeam”); ↲Enter 30

本日はここまでお疲れ様でした

第01回Web講座2018

第01回Web講座2018

More Decks by 北海道科学大学 電子計算機研究部

Other Decks in Education

Featured

Transcript

More Decks by 北海道科学大学　電子計算機研究部