WGU C777 Final includes some I missed

0.0(0)
learnLearn
examPractice Test
spaced repetitionSpaced Repetition
heart puzzleMatch
flashcardsFlashcards
Card Sorting

1/72

encourage image

There's no tags or description

Looks like no tags are added yet.

Study Analytics
Name
Mastery
Learn
Test
Matching
Spaced

No study sessions yet.

73 Terms

1
New cards

What video files are supported

MP4 (mpeg4) WebM and OGG

codec H.264

remember this

2
New cards

What music files are supported

MP3 WAV and OGG

remember this

3
New cards

What image files are supported

jpeg, gif, svg, png, apng, png_ico, bmp, bmp_ico,

Apig gifts a savefile to 3 pinguins and is bumped twice

4
New cards

a

.a

#a

anchor tag

class ="a"

id="a"

remember this

5
New cards

how to track visitors IP address

Geolocation API

remember this

6
New cards

code to implement appCache for offline viewing

<html manifest="my-webpage.appcache">

remember the html tag with the manifest

remember this

7
New cards

Does js run client or server side

client

8
New cards

html comment

< ! ╌ text ╌>

9
New cards

css comment

/* text */

10
New cards

js comment

// text until the end of the line

11
New cards

Unassign a variable without deleting it

= undefined

a var can never truly be unset anymore

= delete is removing it completely

12
New cards

DOM is a representation of what code?

HTML

13
New cards

DOM is the concept of a web browser ...

API

14
New cards

DOM is made up from objects made in ... and modified with ...

HTML / JavaScript

15
New cards

Is DOM accessed by other tools like search engines or screen readers

yes

16
New cards

Is DOM the same as my HTML code

Yes and no, the browser can fix your html when things are missing during the DOM creation

17
New cards

document.querySelector(".cta a").style

is an example of:

css inline style application reviewed with a js call

remember this

if you want to change thru js, use the same code and add the color (or margin, padding, background collor etc)

document.querySelector(".cta a").style color = "green"

18
New cards

JavaScript uses what script standard

ECMAScript

Just remember the YMCA song and flip some letters

19
New cards

Geolocation API

location and ip

20
New cards

Pointer Events API

mouse movement tracking (hover or click)

21
New cards

Canvas API

var ctx = canvas.getContext('2d');

Draw graphics outside of the HTML code and the user can interact with.

Animation, game graphics, data visualization, photo manipulation, and real-time video processing

22
New cards

Drag and Drop API

A typical drag operation begins when a user selects a draggable element, drags the element to a droppable element, and then releases the dragged element.

It must have the attribute draggable set to true in the HTML

23
New cards

Drag/drop HTML code

Needs true or false does not work

remember this

24
New cards

get an element that has been marked as draggable

const draggableElement = document.getElementById('draggable-element');

25
New cards

add dragstart listener to the element

draggableElement.addEventListener('dragstart', onElementDragStart);

26
New cards

add drag data to the event

function onElementDragStart(event) {

event.dataTransfer.setData('text/plain', 'draggable-element');

}

27
New cards

History API

Controls the URL and lets navigational changes appear without reloading the page and bookmark the specific state without a individual url

aka use the browser back/forward buttons as navigation elements

history.pushState({page: 1}, 'Page One', '?page=1')

28
New cards

File System API

access to the local users file system even without uploading it. It can only read it, not update it.

29
New cards

input field email

looks like a text field but has validation properties

30
New cards

input field image

click on the picture to submit the form

31
New cards

input field search

like text but line breaks are removed when submitted

32
New cards

input field url

looks like text but has some validation

33
New cards

client side form validation vs server side

its a good practice to implement both. On the client side it helps to make the form more user friendly and faster, since a typo can be detected prior the form submission

34
New cards

built in form validation pros/cons

uses html form validation. best performance but less configuration

remember this

35
New cards

javaScript form validation pros/cons

slower than built in but more customizable

remember this

36
New cards

Form Validation

a

matches one character that is a (nothing else)

37
New cards

Form Validation

abc

matches abc. Not ab or abcd

38
New cards

Form Validation

ab?c

Matches ac or abc. The character in front of ? is optional

39
New cards

Form Validation

ab*c

matches a followed by any number of b and one c

abbbbbbbc

40
New cards

Form Validation

a|b

matches one character a or b but not ab

41
New cards

Form Validation

[Aa]pple

matches Apple or apple

remember this

42
New cards

Form input validation to follow a string (code line example) that has 4 valid inputs:

Banana, banana, Cherry, or cherry. Make sure you understand why only those four are valid.

<input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />

43
New cards

<input ????="number"/>

type

44
New cards

what is <fieldset>

group several controls and labels within a web form. Regroup in semantic ways

<form>
<fieldset>
<legend></legend>
<input type="radio" id="S1" name="S1" value="S1">
<label for="S1">S1</label><br>
<input type="radio" id="S2" name="S2" value="S2">
<label for="S2">S2</label><br>
</fieldset>
</form>

45
New cards

what is <datalist>

Input form to give the user different options (dropdown list)

remember this

46
New cards

what is <keygen>

Create hidden keys for encryption within HTML using RSA. Not used anymore but still:

remember this

47
New cards

what is <output>

makes use of the FOR attribute in forms. Shows the value calculated by entries

remember this

48
New cards

How to set a string or node as the children of a element

Element.after()

i.e. a.after(span);

js code. () are after the element

remember this

49
New cards

Input validation

Phone number

pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"

50
New cards

Input validation ipv4

pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"

do you see the difference between the phone example with [ ] and this example with \ to group the segments? Here I also used \d for any digits instead of [0-9]

remember this

51
New cards

Input validation country code (3 letter code like USA CAN GER)

pattern="[A-Za-z]{3}

52
New cards

pattern understanding

(?=^.{8,}$)

there are at least 8 characters. See the , after 8? That means 8 or infinity

?=look, ^=start with, .=any character, 8,= 8 or more, $=end

remember this

53
New cards

pattern understanding

(?=.*\d)

there is at least a digit

remember this

54
New cards

pattern understanding

(?=.*\W+)

there is one or more "non word" characters (\W is equivalent to [^a-zA-Z0-9_])

capitalization flips it to non. Like /D would be non digit

55
New cards

pattern understanding

(?![.\n])

there is no space or newline

!=no

remember this

56
New cards

pattern understanding

(?=.*[A-Z])

there is at least an upper case letter

remember this

57
New cards

pattern understanding

(?=.*[a-z])

there is at least a lower case letter

remember this

58
New cards

pattern understanding

.*$

in a string of any characters

comes at the end

59
New cards

pattern understanding bonus round

.

^

\d

\D

\s

x(?=y)

!

. matches any single character from class

^ negated [^ 0-8] looks for a 9

^ can also match the beginning of an input

\d any digit **

\D any character **

\s space

x(?=y) lookahead xy is valid but xz not **

! negative/not i.e x(?!y) xz is valid xy is not **

remember this **

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet

60
New cards

confused with ^?

^[^A]

/^A/

^[^A] looks for something that does not start with A

/^A/ looks for something that starts with A

61
New cards

+ vs *

+once or more

*0 or more

62
New cards

Event Handler section

What are event handlers

onClick, onFocus, onBlur etc. Describes the event happening when the user interacts with forms or input elements

remember this

63
New cards

form validation code example

<form name="myForm" action="/action_page.php" ***name and action (goes to new page)
onsubmit="return validateForm()" ***Event handler. remember the ()
method="post"> ***Post or get (how is is submitted) know the difference
Name: <input type="text" name="fname"> ***what is the input type, her its text
<input type="submit" value="Submit"></form> ***this is the submit type and the form close bracket

64
New cards

What is the event handler part of the code:
<INPUT TYPE="button" VALUE="Calculate" onClick="compute()">

onClick="compute()"

remember this

65
New cards

When the browser's width is 600px wide or less, hide the div element

@media screen and (max-width: 600px) {

div.example {

display: none;

It disapears when under the max width

remember this

66
New cards

What is AJAX?

Read webserver after its loaded

Update a web page without reloading

Send data to the server in the background

AsynchronusJavascriptAndXml

For example you click/hover over a button and new info appears without the page having to load. Think of a nav bar that drops down.

67
New cards

jQuery Syntax

.what(where)

$('#page-title').html('Page One');
$("ol").prepend("<li>Zero</li>");

68
New cards

append(element)

inserts the parameter element inside the element at the last index

69
New cards

prepend(element)

inserts the parameter element inside the element at the first index

70
New cards

before(element)

inserts the parameter element before the element

71
New cards

after(element)

inserts the parameter element after the element

remember this

72
New cards

Most important with cross browser compatibility

Function comes before style. Different browsers render things differently and may impact the usability.

73
New cards

GET vs POST

GET adds a string to the url (i.e search)

Post sends the form input data hidden