$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第08回Network講座2019
Search
北海道科学大学 電子計算機研究部
July 23, 2019
Education
0
52
第08回Network講座2019
北海道科学大学 電子計算機研究部
July 23, 2019
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
61
第11回Network講座2019
densan
0
72
第10回Network講座2019
densan
0
48
第09回Network講座2019
densan
1
160
第07回Network講座2019
densan
0
49
第06回Network講座2019
densan
0
74
第05回Network講座2019
densan
0
54
第04回Network講座2019
densan
0
120
第03回Network講座2019
densan
0
42
Other Decks in Education
See All in Education
今の私を形作る4つの要素と偶然の出会い(セレンディピティ)
mamohacy
2
130
Linguaxes de programación
irocho
0
500
CSS3 and Responsive Web Design - Lecture 5 - Web Technologies (1019888BNR)
signer
PRO
1
3k
XML and Related Technologies - Lecture 7 - Web Technologies (1019888BNR)
signer
PRO
0
3.1k
1014
cbtlibrary
0
500
IKIGAI World Fes:program
tsutsumi
1
2.6k
吉岡研究室紹介(2025年度)
kentaroy47
0
790
SJRC 2526
cbtlibrary
0
170
沖ハック~のみぞうさんとハッキングチャレンジ☆~
nomizone
1
530
Node-REDで広がるプログラミング教育の可能性
ueponx
1
220
附属科学技術高等学校の概要|Science Tokyo(東京科学大学)
sciencetokyo
PRO
0
3k
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
2
3.1k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
281
24k
The untapped power of vector embeddings
frankvandijk
1
1.5k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1k
HDC tutorial
michielstock
0
260
The Spectacular Lies of Maps
axbom
PRO
1
400
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
120
エンジニアに許された特別な時間の終わり
watany
105
220k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
0
26
Optimising Largest Contentful Paint
csswizardry
37
3.5k
How to Talk to Developers About Accessibility
jct
1
82
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
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
今回の講座はここまで お疲れ様でした