ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/03/16
NEW
週刊ドットインストール(2023/03/16号)を更新しました!
PREMIUM
JavaScriptでパスワードジェネレーターを作ろう
パスワードジェネレーターを作りながら、JavaScriptの実践的なアプリ開発のやり方について学んでいきます。
0%
動画レッスン一覧
(17)
質問と回答
(2)
未完了
#01 パスワードジェネレーターを作ってみよう
(02:44)
無料公開中
完成版の確認
作業用フォルダの設定
index.htmlの作成
未完了
#02 HTMLのマークアップをしよう
(02:40)
無料公開中
index.htmlのマークアップ
要素の確認
未完了
#03 CSSでスタイリングをしよう
(01:53)
無料公開中
文字コードの指定
style.cssの作成
mainのスタイリング
未完了
#04 全体のスタイルを整えよう
(01:45)
無料公開中
box-shadow
border-radius
余白の設定
未完了
#05 パスワードのスタイルを整えよう
(02:09)
スタイルのリセット
パスワードのスタイリング
未完了
#06 ボタンのスタイルを整えよう
(02:27)
スタイルのリセット
ボタンのスタイリング
未完了
#07 ボタンを押し込んでみよう
(01:52)
cursor
button:hover
button:active
opacity
未完了
#08 フォームのスタイルを整えよう
(02:24)
fieldset
フレックスボックス
justify-content
未完了
#09 JavaScriptの実装をはじめよう
(02:32)
main.jsの作成
idの付与
未完了
#10 スライダーを動作させよう
(02:57)
getElementById()
addEventListener()
inputイベント
スライダーの範囲指定
スタイルの調整
未完了
#11 ボタンを動作させよう
(02:18)
clickイベント
idの付与
textContent
未完了
#12 ランダムな1文字を取り出そう
(01:56)
アルファベットの準備
文字列へのアクセス
Math.random()
Math.floor()
未完了
#13 パスワードを生成しよう
(02:57)
パスワードの生成
パスワードの長さ変更
未完了
#14 パスワードに数字を含めよう
(02:52)
数字の準備
checkedプロパティ
lengthプロパティ
未完了
#15 パスワードに記号を含めよう
(02:40)
仕様の解説
記号の準備
未完了
#16 関数にまとめてみよう
(01:50)
showPassword()
動作確認
未完了
#17 完成したアプリを振り返ろう
(01:59)
これまでのまとめ
アプリ開発の振り返り
開発のコツ
#10 スライダーを動作させよう
const passwordLength = document.getElementById('password-length'); を外側と内側のどちらに書くべきですか?
2023年3月21日
#11 ボタンを動作させよう
const は addEventListener() の外よりも中で定義したほうが良いのですか?
2023年2月5日
ギャラリー
このレッスンについて
最終更新日
2022年11月9日
バージョン情報
Chrome 106 / Visual Studio Code 1.72.0
関連キーワード
(6)
基礎講座
(363)
初心者向け
(362)
HTML
(113)
CSS
(114)
JavaScript
(143)
ミニプログラム
(142)
このレッスンを共有する