Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第08回Network講座2019
Search
北海道科学大学 電子計算機研究部
July 23, 2019
Education
0
49
第08回Network講座2019
北海道科学大学 電子計算機研究部
July 23, 2019
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
57
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
110
第03回Network講座2019
densan
0
39
Other Decks in Education
See All in Education
【Discordアカウント作成ガイド】
ainischool
0
220
アントレプレナーシップ教育 ~ 自分で自分の幸せを決めるために ~
yoshizaki
0
210
万博非公式マップとFOSS4G
barsaka2
0
1.3k
今までのやり方でやってみよう!?~今までのやり方でやってみよう!?~
kanamitsu
0
180
EVOLUCIÓN DE LAS NEUROCIENCIAS EN LOS CONTEXTOS ORGANIZACIONALES
jvpcubias
0
180
自分だけの、誰も想像できないキャリアの育て方 〜偶然から始めるキャリアプラン〜 / Career planning starting by luckly v2
vtryo
1
220
生成AIとの付き合い方 / Generative AI and us
kaityo256
PRO
9
1.5k
the difficulty into words
ukky86
0
130
フィードバックの伝え方、受け身のココロ / The Way of Feedback: Words and the Receiving Heart
spring_aki
1
170
2025年度春学期 統計学 第14回 分布についての仮説を検証する ー 仮説検定(1) (2025. 7. 10)
akiraasano
PRO
0
160
20250830_本社にみんなの公園を作ってみた
yoneyan
0
130
”育てる”から”育つ”仕組みへ!スクラムによる新入社員教育
arapon
0
160
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Unsuck your backbone
ammeep
671
58k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Thoughts on Productivity
jonyablonski
70
4.9k
Faster Mobile Websites
deanohume
310
31k
How to Ace a Technical Interview
jacobian
280
24k
For a Future-Friendly Web
brad_frost
180
9.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Transcript
ネットワークチーム 第8回 2019 北海道科学大学 電子計算機研究部
実践編 PW強度測定サービス
実践編 本日の目的 これまでの知識を生かして パスワードの強度を測定するサービスを 作ってみよう! 3
使うもの ⚫ zxcvbn Dropboxが提供している パスワードの強度を測定するための JavaScript ライブラリ ⚫ HTML・CSS・JS の知識
4
構成 5 タイトル フォーム 結果表示 ~~~~ ~~~~ Webページ index.html index.css
zxcvbn.js script.js
構成 6 要件定義 ⚫ 文字を入力する度に リアルタイムで結果を表示する ⚫ 結果は動的に生成する ⚫ ある程度の見栄えを確保する
制作
準備 zxcvbnの入手 1. https://github.com/dropbox/zxcvbn#manual- installation へ飛び、zxcvbn.jsを保存 8
準備 ファイルの作成 2. 以下のような階層でファイルを作成 pw -- index.html css -- index.css
js -- zxcvbn.js -- script.js 9
HTML HTMLを以下のように記述 10
HTMLの解説 22行目 onKeyUp=“check(this)” キーが上がったら つまり 文字が入力される度に 関数check()を呼び出す。 11
https://github.com/dropbox/zxcvbn#usage を読んでみる 12 zxcvbn(password, user_inputs=[]) zxcvbn() takes one required argument,
a password, and returns a result object with several properties:
コンソールでテスト HTMLをブラウザで開いて デベロッパーツールを起動 コンソールに以下を入力 13 let pw = zxcvbn("123456"); console.log(pw);
コンソールでテスト 方針 ⚫ zxcvbn() の引数にパスワードを入れる - フォームへの入力を取得する必要がある ⚫ 上記で得られたオブジェクトを格納する ⚫
オブジェクトのパラメーターを結果として表示する 14
スクリプトを作ろう script.js を以下のように記述 15
スクリプトを作ろう index.html をブラウザで開く 16
スタイルを作ろう index.cssを以下のように記述 17
スタイルを作ろう 完成 18
参考 ⚫ GitHub - dropbox/zxcvbn: Low-Budget Password Strength Estimation https://github.com/dropbox/zxcvbn
19
今回の講座はここまで お疲れ様でした