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
56
第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
100
第03回Network講座2019
densan
0
39
Other Decks in Education
See All in Education
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
580
CHARMS-HP-Banner
weltraumreisende
0
290
SkimaTalk Teacher Guidelines
skimatalk
0
800k
令和政経義塾第2期説明会
nxji
0
110
JPCERTから始まる草の根活動~セキュリティ文化醸成のためのアクション~
masakiokuda
0
200
第1回大学院理工学系説明会|東京科学大学(Science Tokyo)
sciencetokyo
PRO
0
3.9k
諸外国の理科カリキュラムにおけるビッグアイデアの構造比較
arumakan
0
350
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
570
SkimaTalk Tutorial for Students
skimatalk
0
1.8k
アントレプレナーシップ教育 ~ 自分で自分の幸せを決めるために ~
yoshizaki
0
130
OJTに夢を見すぎていませんか? ロールプレイ研修の試行錯誤/tryanderror-in-roleplaying-training
takipone
1
170
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Producing Creativity
orderedlist
PRO
346
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Review Best Practice
trishagee
69
19k
Visualization
eitanlees
146
16k
Music & Morning Musume
bryan
46
6.7k
How GitHub (no longer) Works
holman
314
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Bash Introduction
62gerente
613
210k
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
今回の講座はここまで お疲れ様でした