はじめに
初めまして。
年末まで毎日webサイトを作っている者です。
今日はMDNの初心者ページを見て勉強していました。
入力した文字列を10文字区切りにしてくれるシステムを作っていたのですが、なぜだか改行がうまく行われなかったので、10文字ごとに文字数を表示するという苦肉の策を取りました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は9日目。(2019/10/27)
よろしくお願いします。
サイトURL
やったこと
よく分からないものができたのでまずは見た方が早いかも↓
今日はMDNの文字列操作のところを勉強していました。
そこで、10文字ごとに改行してくれるシステムを作ろうと思ったのですが、なぜだか
も\nもそのまま吐き出されてしまったので文字数を表示するというカオスな状態になりました。。。
コード↓
<script>
let sButton = document.getElementById('submitStyle');
sButton.addEventListener('click', dataArrange);
function dataArrange() {
iText = document.forms.form1.inputText.value;
let deleteBlank = iText.replace(/\s+/g, "");
console.log(deleteBlank);
let textLength = deleteBlank.length;
let word1 = 0;
let word2 = 10;
let textLength2;
let output = document.getElementById('output');
for (var i = 0; textLength >= i; i += 10) {
let word3 = deleteBlank.slice(word1, word2);
output.textContent += '<今' + word1 + '文字>' + word3;
word1 += 10;
word2 += 10;
};
output.textContent += '<計: ' + textLength + '文字>';
}
</script>
コードとしては、sliceメソッド使って文字列操作するところがメインです。
あと実は今日はletを使ったり、イベントリスナーを使ったり、変数名をちょっと意識してみたり、細かいところにこだわってみました。
var と let?
同じじゃないか！
なんて思っていたんですが全然違うんですね。そのほか色々な発見があったので下にメモ載せておきます。
メモ
- 雑記
- イベントリスナー・・・どのイベントと処理を使うかの指定
- イベントハンドラー・・・実際の処理内容
- サーバーサイド・クライアントサイドの違い・・・プログラムが処理される場所
- サーバーサイドの利点・・・データベースの情報を取得できる
- JavaScript は大文字小文字を区別する
- htmlにjsのハンドラーを混ぜない (分離のため、重複するから、jsで要素取得+リスナー使う) *1
- html+cssでサイト構築される →その後 jsが実行される
- スクリプトのブロッキング問題 2つの解決法 → async, defer
- async・・・ダウンロード終了後直ちに実行、複数のスクリプトが特定の順序で実行されるという保証はない、外部jsにのみ機能する
- defer・・・スクリプトとコンテンツのダウンロード後直ちにスクリプトをページ順に実行
- asyncとdeferの使い分け → 順番でスクリプト実行したいならdefer (jqueryとか）、そうでないならasync (ダウンロード後すぐ実行で早いから)
- async登場前の対応 → bodyの一番下にscriptを置く → HTML DOM読み込み完了までjsができないのでパフォーマンス低下する
- 関数・・・再利用可能なコードのかたまりのこと
- オブジェクト・・・1 か所に関連する機能をまとめたもののこと
- style プロパティ → ページ内に存在するすべての要素が持っている (だからJavaScript から変更可能)
- JavaScript → 全てのものはオブジェクト
- ２種類のエラー・・・文法エラーと論理のエラー(文法は正しいが意図しない動作)
- null ・・・宣言されて初期化されているが、型も値もない状態
トグル・・・2つの状態を行き来する操作のこと (スイッチのon／off）
プログラマーのように考える方法
まず概要から簡潔な実行可能な単位に分割すること
変数について
変数の長所・・・なんでも格納できる (複雑なデータ、関数自体)
変数の宣言・・・var, let
letの長所・・・同じ変数名は1度しか宣言できない(値の変更は可能)、だからなるべくletを使う
変数名にjsの予約語を使わないようにしよう (function, var, let)
配列・・・複数の値を格納できるオブジェクト
オブジェクト・・・現実のもの(オブジェクト)をモデルとしたコードの構造
動的型付け・・・変数に格納するデータの型を指定する必要がないこと
定数 const・・・一度宣言した値を決して変更しない
var, let 違い → 再宣言できるか
let, const 違い → 再代入できるか
数値について
js には数値を表すデータ型は一つしかない → Number 型
オペランド・・・演算子に必要なデータのこと
===と==の違い・・・データ型までチェックするか、(だからなるべく===を使う)
文字列について
エスケープとは \・・・文字をコードではなく、文字列だと認識させる書き方
部分文字列 indexOf()・・・文字列中に、ある文字列が存在するか調べる
部分文字列の開始と終了がわかれば抽出できる sliceメソッド
イベント時の実装方法↓
ダメな例
<button onclick="createParagraph()">押してください</button>
いい例
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
感想
最近時間との鬼ごっこ感がすごくて気づいたら深夜かということが多いです。
今日もMDNを読んでふむふむと思っていたら作る時間が無くなっていたので、時間管理はしっかりしたいと思います。
ちなみにMDNは最高のサイトで、チュートリアルに沿って進めていけばみるみる能力が上がっている気分になれます。明日も頑張ろう。
最後までお読みいただきありがとうございます。