Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

Intro To HTML, CSS, JavaScript

The document provides a comprehensive guide on HTML and CSS, detailing various tags, attributes, and styling techniques. It covers the structure of HTML documents, including the use of headings, lists, images, tables, and the integration of CSS for styling. Additionally, it discusses advanced topics such as responsive design, semantic elements, and techniques for improving web accessibility and SEO.

Uploaded by

mejd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Intro To HTML, CSS, JavaScript

The document provides a comprehensive guide on HTML and CSS, detailing various tags, attributes, and styling techniques. It covers the structure of HTML documents, including the use of headings, lists, images, tables, and the integration of CSS for styling. Additionally, it discusses advanced topics such as responsive design, semantic elements, and techniques for improving web accessibility and SEO.

Uploaded by

mejd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 64

-HTML

1- <head></head> ------ head is where you put information about your HTML file, like its title.

2- <body></body> -------- body is where you put is where you put your content, such as text,
images, and links. The content in the body is what will be visible on the actual page.

3- <html></html> ------ the second and end of the page.

4- <!DOCTYPE html> ----- the first line to show that is HTML5.

5- Headings …..From <h1> to <h6> Six different sizes of the font.

6- Links – or Anchor tag------- <a href=”Address of the aimed website”>the highlighted word to
click on it </a> and href is an acronym for hyper reference. Embedded links make me can move
inside the page up or down or any specific place in it.
7- Adding images ------- <img src=”source link of the image location” />.

8- Setting link on the image----- <a href==”Address of the aimed website”> <img src=” source link
of the image location” /> </a>.

9- Include link word inside the paragraph------- <p>write here <a href=”link address”>highlighted
word in the paragraph </a> </p>. If you want to get fonts from Google use this link for example:
https://fonts.googleapis.com/css?family=Tangerine

First Level is finished

a- Making ordered and unordered lists


b- Changing font size, color and type
c- Changing the background color
d- Aligning the text
***************Nice Note*********************Any house needs a frame*********

- For mathematical equations we use <sub> to put the number or char down and we use <sup> to
put the number or char up((subscript))((superscript))

Indentation is your friend------ you should let spaces to make your code awesome and readable.

10- Ordered list--<ol> <li>your first list here</li> <li>second here</li> </ol> all will be numbered.

11- Unordered lists-----<ul> <li>first bullet</li> <Li>other bullet</li> <li>and so on </li> </ul>.

****************Wisdom***************
****HTML is the skeleton of the web page****

CSS gives the skeleton the skin and the makeup 

12- Making Comments--- <! -- Comment -->

13- Font size ---- <p style="font-size: 12px">

14- Font color -- <h2 style="color:red"> in the heading of the body.

15- Combination of Font size and color -- <h2 style="color: green; font-size:12px"> By putting
Semi-colon.

16- Font family--- like Arial or Calibri or anything like that <h1 style="font-family: Arial">Big
title</h1>

17- Background color --<body style="background-color:brown"> <ol style="background-


color:yellow">
18- Aligning the text----<h3 style="text-align:center">Favorite Football Teams</h3>

19- Strong words ---- To make words bold <p><strong>Do you hear the people
sing?</strong></p>

20- Emphasize words---- <p>Hey, don't say <em>that</em!</p>

21- Adding tables----- <table></table>------------\to add rows use <tr></tr><tr></tr> after write
table.

22- Adding Rows------- <table> <tr>anything</tr> </table>

23- Adding data or columns------ <table> <tr> <td>anything</td></tr> </table> first row first
column.

- Adding random texts to your webpage by using (this)

24- Head of the table------- The <head> HTML tag contains information about a web page (e.g. its
title) and the <body> tag contains the contents of the web page. In the same way, the <thead> tag
can be thought of as containing information about a table and the <tbody> tag containing the actual
tabular data.

25- Adding head to the table.


26- Adding span between columns ----<th colspan=”3”>data</th> ‫عرض العمود‬

27- Style that head-------Table form from ((<thead> for the heading of the table & <tbody> for the
table’s data.

28- 'Div'ide and conquer---- One of the most versatile structure ((‫))متعدد االستعماالت والجوانب‬

<div style="width: 50px; height: 50px; background-color: red"></div>

29- Spantastic-------While <div> allows you to divide your webpage up into pieces you can style
individually, <span> allows you to control styling for smaller parts of your page, such as text. For
example, if you always want the first word of your paragraphs to be red, you can wrap each first
word in <span></span> tags and make them red using CSS!

**Span is the man** <p>My favorite font is <span style="font-family:Impact">Impact</span>!</p>

Span changes the properties of a word “style changing”

30- How to link CSS by HTML?


31-Some photos in your table &CSS: -------- What is CSS?

CSS (which stands for Cascading StyleSheets) is a language used to describe the appearance and
formatting of your HTML. A style sheet is a file that describes how an HTML file should look. That's
it!

We say these style sheets are cascading because the sheets can apply formatting when more than
one style applies. For instance, if you say all paragraphs should have blue font, but you specifically
single out one paragraph to have red font, CSS can do that! (We'll talk more about cascading in
section four.)

32- There are two ways to put CSS in one place. This first is to put your CSS
between <style></style> tags, right in the same file as your HTML. These<style> tags
go inside the <head></head> of your webpage; check out the example in the editor to
the right.
33- How to design a Button------By <div></div> and you can add link in between and more you
can do after that form your sheet as you like to make 

34- Multiple Selector------in the HTML--- <div> <div> <p>I like tacos! </p> /*in the CSS div
div p { /*CSS stuff!*/}*\

35- One selector to rule them all-------By using the “*” star symbol in CSS. It can be considered
as universal selector which put the texts in boxes.

36- Branching----------You can think of an HTML document as a tree: elements "branch out"
from the main trunk (the <html></html> tags). The first two big branches are <head> and <body>,
and branches multiply and become finer as you get to elements like <div>s, <table>s, and text
(headers and paragraphs).
37- Parents, children, and siblings--------- <HTML></HTML> is the parents and <head></head> &
<body></body> are the children.

38- Can you swing it-----?


39- Classes & IDs-----

40- Classes for a bunch of elements which have the same styling but IDs for only one element.

Details tag in html

41- Even finer control------Pseudo class ((in CSS))selector selector: pseudo-class_selector {


property: value;} Making a hover.
42- First-Child-- and if there are a lot of number we use nth-child (write the number here).

43- You can Class and IDs at the same time <div class=”class name” ID=”id name”></div>

44- The arrangement of the these elements are ((margin-border-padding-content));


45- Taking up spacedisplay property. We'll learn about four possible values.

block: This makes the element a block box. It won't let anything sit next to it on the page! It takes
up the full width.
inline-block: This makes the element a block box, but will allow other elements to sit next to it on
the same line.
inline: This makes the element sit on the same line as another element, but without formatting it
like a block. It only takes up as much width as it needs (not the whole line).
none: This makes the element and its content disappear from the page entirely!

46- Accesskey attribute  shortcut key to activate an element.

47- Tabindex  the order elements will come into focus using the tab key and the highest priority
is tabindex=”1”.

48- Special Entities 


49- How to make the image adjust with the size of the browser and if we minimize the browser’s
size it will change with it and vice versa. Alt is like keyword to optimize the SEO and make it first
when someone search about it.

<img src="http://vignette2.wikia.nocookie.net/fcoc-vs-battles/images/9/96/Ninja-
Shadow.png/revision/latest?cb=20150914211216" width="50%" alt="My image" >

50- How to make favorite icon next to the title of your web page
51- Margin  if it is equal “auto” it will put the Div block in center of the page. Adjusting our
margins not only moves our element relative to other elements on the page, but also relative to the
"walls" of the HTML document. For instance, if we take an HTML element with a specific width
(such as our <div> in the editor) and set its margin to auto, this tells the document to automatically
put equal left and right margins on our element, centering it on the page. Padding  padding is
the space between your border and your innermost layer: the actual content. Padding can be
set in two ways, just like your margins. You can either select them individually.

52- Float this for making the page as sea and the elements on it like the boats and the boats are
seeing each other correctly so they will not interfere with each other.

53- How to clear the interference between floating elements and non-floating elements?
54- Position  if position: fixed; /*that means if you scroll down or up the element will still in its
place and don’t move*/ z-index is used only with position for select which element in the front
and which element in the backward. If z-index: 1; then the element will be the first and so on.

55- Meter attribute  <meter min="200" max="500" value="350">350

degrees</meter> to

56- Hosting and some of notes and galleries

The difference between www and public_html: One is usually set up as an alias for the other
meaning that it doesn't matter which of the two you use because they both point to the same folder.
That they suggest uploading to public_html means that the folder is public_html and www is just an
alias set up to point to that folder.
How to Upload a File Using File Manager
To upload a file through cPanel's File Manager, please do the following:

1. Login to cPanel.
2. Under Files, click File Manager.
3. Select Web Root and Show Hidden Files, then click Go.
4. Click to open the folder to which you'd like to upload files.
5. Click Upload from the top toolbar.
6. Click Browse (some web browsers will have Choose File instead).
7. Select the file on your computer that you wish to upload.
8. Once the file has been selected, it will automatically upload. You may select additional files while uploads
are in progress.
File Manager meaning: is a web interface that allows you to manage all the files associated with
your accounts. See this link http://support.hostgator.com/articles/cpanel/how-to-upload-a-file-
using-the-file-manager.

Validation: https://www.cs.tut.fi/~jkorpela/html/validation.html.

You should have persistence to can code your page.

57- How to put the CSS in your code that was done by two ways:

1- Internal styling sheet


<html>
<head>
<mate charset="UTF-8">
<title>Styling</title>
<style>
………………………….Write your CSS code here………………………
</style>
</head>
</html>
2- External styling sheet
that by using link to contact html file with CSS file as mentioned before.
For colors Hexadecimal codes are preferred than names like blue, red, etc. You can use rgb
(0, 1, 1) and so for colors.

58- How to inspect elements in your browser?


59- Elements which should be included under Footer tag.

60- In Html4 the common tag used to make articles is <div> tag and in HTML5 <article> with
<section>
61- Display property in CSS
62- Overflow property:

63- The difference between Margin and Padding.


64- Centering an Element & Measurements.

65- Different states for links. Flow of states (a: link/a: hover/a: visited/a: active)
66- Styling lists.

67- CSS Selector and operators.

68- Very important.


69- The difference between Child selector and Descendant selector.

Div span {background: red}


Div>span {background: green}

<Div><span>ABC</span><span>def<span>ghi</span></span></div>
Background color of ABC and def will be green, but ghi will have red background color.
IMPORTANT: If you change order of the rules to:
Div>span {background: green}
Div span {background: red}
All letters will have red background, because descendant selector selects child's too.
ABC and def are siblings.

70- Browser compatibility checking and prefixes (http://caniuse.com/).


71- How arrange the files of HTML & CSS together and the images
72- SEO technique in this link (http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-
tags-in-the-html5-era--webdesign-16824).

73- How to add background-image in CSS?

Body {
background-image: url ("paper.gif");
background-color: #cccccc;
}

74- Check opacity of colors from this link


(http://www.w3schools.com/css/css_image_transparency.asp).

75- Pseudo Elements and classes

76- Transitions and the steps transition: background .2s linear, border-radius 1s ease-in 1s;
77- Transforms

78- Examples: 1- http://www.w3schools.com/css/css3_transitions.asp


2- http://learn.shayhowe.com/advanced-html-css/transitions-animations/
3- http://www.the-art-of-web.com/css/css-animation/
4- http://www.creativebloq.com/css3/animation-with-css3-712437

79- Using the transitions in links

80- Gradients in CSS3. The Syntax is  background: linear-gradient (direction, color-


stop1, color-stop2 ...); it is for mixing colors together. The direction of mixing can be from
top down if we write it "top" and so on for "down", "right", "and left". Direction can be more than
that (top bottom, left right, right left, and bottom top). We can mix more than two colors and we
can repeat mixing by this command background: repeating-linear-gradient (); we can mix colors
in radial shape not linear by using  background: radial-gradient (); and we can repeat radial like
linear. Also we can mix colors in percentage using this command (red 10%, blue 20%) and so on.

81- Some of CSS techniques.


82- Deal with your page as rows and columns

Grid mockup
How to change the style of grid exactly the column which is appearing on the page?
We will use display property in class"rwo" to show column properly arranged
.row {display: flex; flex-wrap: wrap;}

83- Creating Submenus by hover and change display and some of useful tags

The difference between sematic and generic: Use


the ARTICLE element when the content is an
independent part of the site that can stand
alone and be syndicated like an article or blog
post. Use the ASIDE element when the content
is tangentially related to either the content of
the page or the site itself, such as sidebars,
annotations, footnotes, or associated site information. Use the NAV element for content
that is navigation. The SECTION element is a generic semantic element. You use it when
none of the other semantic container elements are appropriate. You use it to combine
portions of your document together into discrete units that you can describe as related
in some way. If you can't describe the elements in the section in one or two sentences,
then you probably shouldn't use the element. Instead, you should use the DIV element.
The DIV element in HTML5 is a non-semantic container element. If the content you are
trying to combine doesn't have a semantic meaning, but you still need to combine it for
styling, then the DIV element is the appropriate element to use. A section of your
document can appear as the outer container for articles
and ASIDE elements. A SECTION element can also be found inside an ARTICLE, NAV,
or ASIDE. Section must have a title or use div inside. If the only reason you're putting an
element in that place is to attach CSS style properties, you should not use
a SECTION element. Find a semantic element or use the DIV element instead. The
span element alone has no effect on text at all.
84- Overflow property is to make sure that the text is still inside the scroll.
Without overflow

With overflow

85- Media queries to make the text appropriate to all screen readers. We have to use
this function
@media only screen and (max width: 500px) {P {Display: none ;}}

86- How to test your code to work on mobile phones and check that on your computer’s
browser check this link please (here)(Ctrl-Shift-M) will toggle the browser default to control in
browser size from 0px to more than 2000px
87- Bootstrap
To add Bootstrap framework in your code as an online link, you have to insert this line at the
head of your HTML code.
<link rel="stylesheet"
href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css/>
What happens when a viewport is not specified? It will inherit the value of smaller screen sizes!

To use bootstrap in your code

Google fonts list


https://www.typewolf.com/google-fonts
Udacity Guidance here
Important Documentation http://getbootstrap.com/javascript/#modals
The Bootstrap JavaScript file is dependent on JQuery version 1.9 or higher. JQuery can be
downloaded here: http://jquery.com/download. Once downloaded, place the JQuery file in
the 'js' directory in the Bootstrap file structure Then link the JQuery and Bootstrap files to
the head element in the HTML document in this order, replacing [JQuery file
name]with the file name of the JQuery file you downloaded:

You will need several modals, one for each project for which you want to provide more
information. You have to change the id (as well as the title, image and description) for each
modal to be unique. Then, you need to add a couple of data attributes to the element that
will launch the modal. In this case, that element is the image of the portfolio project. You
have to add the following attributes:
Do you know that BootStrap is FrameWork.
***Good designs and styles for Navigation bars***

There are also these classes like” nav-stacked/nav-justified “

88- To have small picture repeated to full the size you want and if you this picture animate
background-image:url('http://4.bp.blogspot.com/-
IRhP4sZjcAQ/V8G2RmN6vMI/AAAAAAAABhc/AWEq0WZhRkYb…6PvfS1gCK4B/s1600/%25D8%25AE%25D9%2584%25D9%2
581%25D9%258A%25D8%25A91.gif');
background-repeat: repeat;}
89- Bootstrap Grid

90- JavaScript Course

91- What is JavaScript means?  It is a scripting language which is dealing with variables and a lot
of functions to make some of conditions and loops. Do you know you will have the ability to interact
with your page and make actions when you do something like clicking by your mouse on that thing?
We use the DOM for our webpage and by JS you can play with its structure as you wish.

92- One of the reasons you want to learn about JavaScript is that it works so well with the structure
used to create HTML documents. Every webpage can be broken down into a mathematical tree
structure called the Document Object Model (DOM). Each HTML tag is a node in the tree and these
nodes have all types of different attributes, such as text, background color, width, etc. With
JavaScript it is easy to write code that basically says "I want to grab that part of the webpage and
change it." In this lecture I review the DOM and talk about how it is related to JavaScript. There is
no code associated with this lecture, but if you check under the resources I do include a link to site
where you can find specifics on the DOM.
93- PenCode projects from here.

94- API is an acronym for (Application Programming Interface) and JavaScript is considered API. You
will use JS to change the element’s properties which structures in the DOM. You should know that
the elements have attributes. Elements like (img, p, a …) and if we take an element like img we can
see that img contains attributes like (source, alt, width, style and so on).

Hint: a lot of people want to climb the top of the mountain but after that they are being afraid from
dropping down. (Why??) I can be the mountain and firstly I will build the base correctly, next layer,
next layer and so on to reach the top so When I be the top then I will never think in dropping from
it.

95- Specific APIs and how we can use them with DOM. First example (Get an element from the
document by its id or name) document.getElementById(id name) ,
document.getElementByClassName(class name), element.innerHTML, element.style,
element.setAttribute(attribute, name)

96- The History of "Debugging"


If you want to learn more about the history of debugging, here is an article that talks about the fact
that two different people are credited with the term, Grace Hopper and Thomas Edison
http://theinstitute.ieee.org/tech-history/technology-history/did-you-know-edison-coined-the-term-
bug

97- Use this link to access JQuery framework directly by this line
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.j
s"></script>

98- JavaScript is a programming language used to add interactivity to a web page. JQuery simplifies

JavaScript syntax and makes it easier to build interactive web pages that work across multiple

browsers. JQuery enables us to do three main things on a web page:


1. Events. Respond to user interactions.
2. DOM Manipulation. Modify HTML elements on the page.
3. Effects. Add animations.
99- In JQuery we use $(" ") to tell the computer we are using JQuery. And inside quotes we put css
style to select it. That will be put in a function. For example let’s select $('.icon-map')

100- Respond to a click we have just used JQuery to select the 'icon-menu' class using $('.icon-
menu') Now we want to respond to user action. Specifically we want to respond to a user clicking
on this '.icon-menu' HTML element. $('.icon-menu').click ();

101- Open the menu. We now have code that says something will happen when the user clicks on
the icon-menu HTML element. But what will happen?!Clicking on the menu icon should open the
menu.

102- Close the menu. Once the menu is open, we need a way to close it. Let's adapt the three steps
we used to open the menu in order to close the menu.

103- Do you need to know the strings length? Var tweet = "Hiking trip on Saturday";
Var tweetLength = tweet.length; .length is considered a method.

104- Events User interactions with a web page are called events. We can write a function that
specifies what to do when an event occurs. This function is called an event handler.

Nav here is (this) and we used this to operate on the already-selected HTML element.

105- A keypress event occurs when a user types a key on the keyboard. $(document) selects the
whole web page. The .keypress () method attaches an event handler to document . You should

know that the keypress event is triggered by the browser.


106- If you need to make it more controllable like using only one button to do some action. You
should know more about key codes from here.
107- Let’s discuss some information about JQuery library for JavaScript. All the power of JQuery is
accessed via JavaScript, so having a strong grasp of JavaScript is essential for understanding,
structuring, and debugging your code. To start with JQuery you should have a good knowledge about
JavaScript basics. $ This dollar sign is a function for calling JQuery library and it’s written like
$(“CSS selector”) after it we will link it with html DOM to be able to manipulate at it as I like. Let’s
have this example.

This is to change first by second when using onclick object in the HTML. So, all of the html
code that's contained in the elements is being changed. Now, at the moment that is just some
text, it's just first, but it could have further tags in it including other tags.
108- We want to have actually a lot of space to write really sort of really quite complex JavaScript code that
has many, many lines and that does many things. And we want to be able to lay it out nicely so we can read it

well and it's all very clear. And putting it inside an attribute just doesn't allow us to do that very well. So I'm

gonna show you something else. So if we need to write a lot of lines of code we have to use script tag and

add a function as shown in next example.


Note: For helping you in mapping how link and engage between the states you use and the ideas in your
mind. State management is consisting of three states (session state- application state- persistent state)
when logging into an app you are now starting a session and when closing or logging out of the app you
are now ending the session. When a browser sends a request for a webpage to a web server and it ends
when a user closes the browser that is in the application state. And persistent state information is data that
remains for use by an application after a session ends; this allows an app to continue its state when user
returns to a site.

109- JavaScript is very effective and strong language from it I can change the functionality of any
function. In this example we will showcase this feature and by using JQuery.

Anonymous function that you pass directly into another function without giving it a name to change the
functionality of original function.

110- In the previous example we have selected an element to manipulate in it by selecting it and
after that we will change it. „This‟ is for selecting any element I want to do a function after
clicking on it. This is another for changing the image preview by choosing the image which I
want to enlarge it in this code.

111- Creating a counter in empty h1 tag using JavaScript. When mouse leave the h1 tag space
the counter will be increased by one.

112- Example code for controlling in how to show images and set time for autoplay and study if
statement and Boolean variables as well as some of events.
113- If I wrote a text in div in HTML and left a line without writing when I show that text in
the browser that line break space will be ignored so I will put this in CSS. White-space: pre;
preserve the original line breaks and spacing (I need this because the content of the chapter is
just text not HTML, so normally the line breaks would be ignored).
114- Important note about “this” in JavaScript

115- What are Events? All the different visitor's actions that a web page can respond to are called events.
An event represents the precise moment when something happens. Examples: 1- moving a mouse over
an element. 2- Selecting a radio button. 3- Clicking on an element.
116- Important information in JavaScript

- A function can return the value of a function back to the main program. In this example, it sends the number “8” back to the total.
117- Important JavaScript code for previewing some of pictures on the Gallery window

118- Arrays in JavaScript


Array is not a single value, but it is a collection of values 

In JavaScript, Array can have a different values like numbers and strings at the time
119- Important notes about The Array

Add this for your information “If statement without curly brackets executes only one line after it”

120- Important notes(( we have a lot of data types in javaScript like*Boolean, Object, Number, String,
Array* , When I don’t define any variable by one of these types, the browser won’t get any type and
will consider this variable as “undefined”, You can determine the type of any variable by using the
console, write on it “typeof”. When you define a variable as a container for concatenation like this
example: var define= "My name is: "+"Muhammad"; //if I want to add two numbers I have to start
the adding operation before concatenating with strings to guarantee the operation will be done as
adding operation not concatenating for numbers.

if you wanna avoid this, put the adding operation inside parenthesis like this: var define= "My name
is: "+"Muhammad" +(5+10); the answer will be: My name is: Muhammad15 and if you wanna write in
different lines use: “<br/>”
121- Quotes explanation. To put quotes inside other quotes you have change them. If the outside
quotes is single then the inside quotes must be double quotes.

styling with javaScript 

Another way for styling

document.write used only for testing not for real works 


122- Cashing in any type of programming languages specifically web development manage the browser
to save the pages and that help increasing the accessibility and the speed of downloading.

123- JavaScript has both strict and type-converting equality comparison. For strict equality the objects
being compared must have the same type and:
- Two strings are strictly equal when they have the same sequence of characters, same length, and same
characters in corresponding positions.
- Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is
not equal to anything, including NaN(Not a Number). Positive and negative zeros are equal to one
another.
- Two Boolean operands are strictly equal if both are true or both are false.
- Two objects are strictly equal if they refer to the same Object.
- Null and Undefined types are == (but not ===). [I.e. (Null==Undefined) is true but (Null===Undefined) is
false]. Briefly, we have to check about the “Data type” & “Value”, in case of (===) or (!==).

124- Scoping in functions:

some definitions:
A lexical scope isn't really an object that can be stored in a variable.
It's the set of variable names that are meaningful at a particular point
in our program's code.
An execution context isn't an object. It's the set of variables and values
that are available to our program at a particular point in execution.
If we wrote function() { ... }() with parentheses at the end, we would be
calling the anonymous function object. But we're not doing that here.
The function() { ... } syntax returns a function object, which is pushed
onto the end of the sagas array.
125- self invoke>>
(function sayWelcome(){ })();

this condition to
get numbers only(If I need only numbers)
126- Some of styling notes:

If you want to figure out the relation between these units, you can know
from (Here).
127- How to add media Queries to your code.

128- User experience

129- Dropdown-menu
130- Notes: In addition to creating external links, anchor elements can
also be used to create internal links, which are links that jump to
different sections within a webpage.
The format is similar to an external link except instead of a URL, you'll
use the #and a word to describe the section you want to jump to.
Here's an example:
<a href="#contact">Go to contact section</a>
Next, you'll want to create a corresponding anchor link in the HTML where
you want the internal link to take users. Instead of using the
hrefattribute, you'll use the name attribute. Here's an example:
<h1>Contact</h1>
<a name="contact"></a>
Now when users click the "Go to contact section" link, they'll be taken to
the section of the webpage with the anchor that has the name attribute
"contact".

131- I am going to learn more about JavaScript Object> as we know HTML


represents structure and CSS represents style. If we define a variable it
will represent a content which we put inside the HTML structure. Content
can have a lot of properties so if the variable contains more than one
thing it will be called object. Like for example” Var image1Data= {title:
“image1”, author:”Tuxyso”};
132- To know more about Canvas visit (this).
beginPath()>>to change the path and start new one.
moveTo(x,y)>>to jump from point to another point. lineTo(x,y)>>to draw
line from point coordinates to another point and you have fill or stroke
to put the ink after drawing by using pencil lines.
Playing a video in a canvas using requestAnimationFrame is just one of the many interactive
things you can do.
To create more complex applications, we have to think more about not only the things we are
displaying to the user on-screen but also any input (keyboard, mouse, audio) the user might generate
that we need to process.

The game loop is a sequence of events that run continuously while an app or game is being
used.requestAnimationFrame handles most of the heavy lifting in that it ensures that your app
runs as close to 60 frames per second as possible while the app is being actively viewed.
Assuming we have already created the functions we plan to call, a fleshed out game loop could look
something like this.

function draw() {

// request to execute this function at the next earliest convenience

requestAnimationFrame(draw);

processInput();

moveObjectsAndEnemies();

drawAllTheThings();

Processing Keyboard Input


While it isn't too difficult to process keyboard presses by hand, I rather stand on the shoulders of
giants and use open source projects that have perfected a library serving the thing I want to do. One
such library is Kibo.
Kibo allows you to reference keys by their common names('a', '3', 'up') instead of their keycodes
greatly simplifying your code. You can also attach events to pressing or releasing a key as well as
modifier keys or wildcards.

var k = new Kibo();

k.down(['up', 'w'], function() {

// Do something cool on the canvas

});
k.up(['enter', 'q'], function() {

// Do other stuff.

});

Processing Mouse Input


Like many other DOM elements, the canvas can accept click and mousedown events. We do
however have to do a little work to figure out where exactly in the canvas the user has clicked.
Mouse click events return clientX and clientYpositions that are global to the browser window.
Every element knows where it is positioned relative to the browsers (0,0) position
(offsetLeft and offsetTop).
To get the canvas-relative of a click, you need to subtract the offsetLeft and offsetTop values
from clientX andclientY. Check out the example code below.

var c = document.querySelector("canvas");

function handleMouseClick(evt) {

x = evt.clientX - c.offsetLeft;

y = evt.clientY - c.offsetTop;

console.log("x,y:"+x+","+y);

c.addEventListener("click", handleMouseClick, false);

Kibo.js - a JavaScript library for processing keyboard input


133- Global and local scope
Anything is outside a function is called global scope but which inside it
is called local scope and all should be inside <script><script>.
in the following example we will see only the global scope and all of the lines in it are the same.
134- Indentation(spacing in the left side of the code). It has no effect in JavaScript.
135- indexOf is for getting the index of the some text like for example:

136- Arrays in JavaScript. IF you want to replace comma by some text like you can use join().
Like for example:

But if you want to still using “,” comma you should do this:
137- Adding and changing array’s elements:

138- Getting Array size


139- If you want to add something to the end of the array or to the front just do like this:

---------------------------------------------------------------------------------------------------------------------

140- Removing element from both end and front:


Combining two arrays together:

141- Generating random number:


To get integer value for the random number use this Math.floor();
142- Guessing number Game

143- Guessing color Game:


144- Guessing color Game with different method
145- for in loop : it deals with index for arrays and the left hand side for objects.

146- Objects
147- for of loop: it deals with value for arrays and the left hand side for objects.

infinte loops for( ; ; )


ways for writing loops
148- break/continue:
break is to get out totally from the loop but continue is to get out only from the current
iteration.
149- splice() method used to add/insert elements to the containing array like for example:

Where 2 is the starting index and 0 is the quantity of the shifted elements outside pets array
and they will be saved into results array.
150- Some ways to access DOM in javasctipt

151- The difference between original function and the assigned function to a variable is that
the last one is anonymous and doesn’t have a name. And the difference between Parse time
and Runtime is that.

Increase your knowledge through this website (Here)


152- Passing a function to another function look to the example:
Return a function from another function example 2:

153- If you want to refresh the page each one second use this line
154- addEventListener >> the function will be excuted after clicking or pressing a button
or doing any possible event.
155- color shapes (circles or squars to randomly colored )
156- Matching Game

You might also like