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
附属科学技術高等学校の概要|Science Tokyo(東京科学大学)
sciencetokyo
PRO
0
1.4k
アントレプレナーシップ教育 ~ 自分で自分の幸せを決めるために ~
yoshizaki
0
210
言葉の文化祭2025:IKIGAI World Fes:program
tsutsumi
1
190
Test-NUTMEG紹介スライド
mugiiicha
0
230
Avoin jakaminen ja Creative Commons -lisenssit
matleenalaakso
0
2k
Padlet opetuksessa
matleenalaakso
4
14k
今までのやり方でやってみよう!?~今までのやり方でやってみよう!?~
kanamitsu
0
190
自分だけの、誰も想像できないキャリアの育て方 〜偶然から始めるキャリアプラン〜 / Career planning starting by luckly v2
vtryo
1
230
株式会社アイエスエイ 会社概要
recruit_isa
0
110
20250830_本社にみんなの公園を作ってみた
yoneyan
0
130
吉岡研究室紹介(2025年度)
kentaroy47
0
410
データで見る赤ちゃんの成長
syuchimu
0
320
Featured
See All Featured
Docker and Python
trallard
46
3.6k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Code Review Best Practice
trishagee
72
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
4 Signs Your Business is Dying
shpigford
185
22k
Writing Fast Ruby
sferik
629
62k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Into the Great Unknown - MozCon
thekraken
40
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
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
今回の講座はここまで お疲れ様でした