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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
北海道科学大学 電子計算機研究部
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
63
第11回Network講座2019
densan
0
73
第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
Cifrado asimétrico
irocho
0
380
学習指導要領と解説に基づく学習内容の構造化の試み / Course of study Commentary LOD JAET 2025
masao
0
120
【洋書和訳:さよならを待つふたりのために】第2章 ガン特典と実存的フリースロー
yaginumatti
0
210
1111
cbtlibrary
0
270
外国籍エンジニアの挑戦・新卒半年後、気づきと成長の物語
hypebeans
0
720
Web Search and SEO - Lecture 10 - Web Technologies (1019888BNR)
signer
PRO
2
3.1k
Security, Privacy and Trust - Lecture 11 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
1008
cbtlibrary
0
130
160人の中高生にAI・技術体験の講師をしてみた話
shuntatoda
0
280
Surviving the surfaceless web
jonoalderson
0
340
JAPAN AI CUP Prediction Tutorial
upura
1
520
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
54
8k
Building an army of robots
kneath
306
46k
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
430
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Darren the Foodie - Storyboard
khoart
PRO
2
2.3k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
54
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
30 Presentation Tips
portentint
PRO
1
210
Designing Powerful Visuals for Engaging Learning
tmiket
0
210
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
130
Everyday Curiosity
cassininazir
0
130
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
今回の講座はここまで お疲れ様でした