JS consolidation part1

Developer
DAWEI DAI
Size
12,648 Kb
Views
28,336
  1. JS consolidation part1 Previews
  2. JS consolidation part1 HTML Codes
  3. JS consolidation part1 CSS Codes

How do I make an js consolidation part1?

What is a js consolidation part1? How do you make a js consolidation part1? This script and codes were developed by DAWEI DAI on 29 September 2022, Thursday.

JS consolidation part1 Previews
IQ Test

JS consolidation part1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS consolidation part1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <h1>Key Points Learned</h1> <h2>By Dawei Dai - Web and Mobile Developer</h2> <p><strong>GitHub profile:</strong> <a href="https://github.com/joelindtisnotarealperson">Dawei Dai</a></p> <h3>My Top 5 Links</h3> <ol> <li> <a href="https://www.html5rocks.com/en/" target="_blank">HTML5 Rocks</a> </li> <li> <a href="http://caniuse.com/" target="_blank">Can I use?</a> </li> <li> <a href="http://www.w3.org/html/wg/drafts/html/master/" target="_blank">HTML5 spec</a> </li> <li> <a href="http://www.w3.org/TR/css3-selectors/" target="_blank">CSS3 selectors</a> </li> <li> <a href="https://developer.mozilla.org/en-US/" target="_blank">Mozilla Developer Network</a> </li> </ol> <header> <h1>Lesson 1</h1> </header> <p>alert("2 plus 2 equals " + 2 + 2 will only show "2 plus 2 equals 22</p> <header> <h1>Lesson 2</h1> </header> <pre>var question = "Your species?";
var defaultAnswer = "human";
var spec = prompt(question, defaultAnswer);</pre> <p>if you enter a number, it will be treated as string still. If the user enters nothing and clicks ok, it will get "". If the user clicks cancel, it will get null</p> <header> <h1>Lesson 3</h1> </header> <pre>var pets = [];
pets.push("dog", "cat");</pre> <header> <h1>Lesson 4</h1> </header> <p>Use the splice method to insert one or more elements anyware in an array, while optionally removing one or more elements that come after it. The first digit inside the parentheses is the index of the position where you want to start adding. The second digit is the number of existing elements to remove, starting with the first element that comes after the elements that you are splicing in. The splice method returns the array of deleted items </p> <pre>pets.shift(); pets.unshift("dog", "cat"); pets.splice(2,2,"dog", "cat", "pig"); - add and remove pets.splice(2,0,"dog", "cat", "pig); - add, no remove pets.splice(2,2) - no add, but remove</pre> <p>Use the slice method to copy one or more consecutive elements in any position and put them into a new array. The first digit insidhe the parenthese is the index of the first element to be copied. The second digit is the index of the eleemnt after the last element to be copied</p> <pre>var noPets = pets.slice(2,4)</pre> <header> <h1>Lesson 5</h1> </header> <pre>var firstChar = cityToCheck.slice(0,1); var someChars = cityToCheck.slice(2);</pre> <p>If no second number is given, then until the last char in the string</p> <pre>var month = prompt("Enter a month"); var charInMonth = month.length; if(charInMonth > 3){ monthAbbrev = month.slice(0,3); }</pre> <pre>var str = prompt("Enter some text"); var numChars = str.length; for (var i = 0; i < numChars; i++) { if (str.slice(i, i + 2) === " ") { alert("double speces!"); break; } }</pre> <header> <h1>Lesson 6</h1> </header> <pre>var firstChar = text.indexOf("World War II"); if (firstChar !== -1) { text = text.slice(0, firstChar) + "the Second World War" + text.slice(firstChar + 12); }</pre> <p>indexOf only return the index of the first matching char</p> <pre>var text = "to be or not to be";
var segIndex = text.lastIndexOf("be");</pre> <p>also remember you have string.charAt(position)</p> <header> <h1>Lesson 7</h1> </header> <pre>var newText = text.replace("World War II", "the Second World War");</pre> <pre>text = text.replace("World War II", "the Second World War");</pre> <pre>var newText = text.replace(/World War II/g, "the Second World War");</pre> <header> <h1>Lesson 8</h1> </header> <p>The function rounds up when the decimal is .5. It rounds 1.5 to 2, 2.5 to 3, etc. It rounds -1.5 to -1, -2.5 to -2, etc. When the result is assigned to a new variable, the unrounded number enclosed in parentheses is preserverd. But you can assign the rounded number to the original variable, and the unrounded number will be replaced by the rounded number</p> <pre>scoreAvg = Math.round(scoreAvg);</pre> <p>To force JavaScrpt to round up to the nearest integer, no matter how small the fraction, use ceil instead of round. Math.ceil always rounds up. Math.floor always rounds down</p> <header> <h1>Lesson 9</h1> </header> <p>Math.random() always generates a pseudo-random number, with 16 decimal places, ranging from 0.0000000000000000 through 0.9999999999999999</p> <pre>var bigDecimal = Math.random();</pre> <pre>var imrpovedNum = (bigDecimal * 6 ) + 1;</pre> <pre>var numerOfDices = Math.floor(imrpovedNum); -- will show 1,2,3,4,5,6 almost evenly</pre> <header> <h1>Lesson 10</h1> </header> <p>var result = "200" + 150. JavaScript see the string "200" and the number 150, resolves the confligt by converting 150 to a string "150". Then concatenates. The result is assigned "200150". If the + in the expression were one of the other arithmetic operators (-, *, or /). JavaScript would convert the string "200" to the number 200 and do the math instead.</p> <p>then var current = prompt("Enter your age."); var qualifingAge = currentAge + 1; has an unintended consquence. The it will do concatenation. so what to do? parseInt("1.99999"); will show 1. Doesn't round, only lops off the decimals. var myFractional = parseFloat("1.99999"); will show 1.99999, hence prserving the decimals </p> <header> <h1>Lesson 11</h1> </header> <p>Number(interString) or Number(floatingNumString) and also know this numberAsNumber.toString() to convert number to string</p> <header> <h1>Lesson 12</h1> </header> <p>number.toFixed(2) will rounds the number represented to 2 places and converts it to a string. The number inside the parentheses tell JS how many places to round the decimal to. If you say num.toFixed(); will shorten a number to no decimal</p> <p>Unfortunately, the toFixed method comes with a surprise inside. If a decimal ends in 5, it usually rounds up, as you would expect. But depending on the browser, sometimes it rounds down! So say 1.555, specifying 2 decimal places, it may give you "1.56" or "1.55". To fix it manually:</p> <pre>var str = num.toString(); if (str.charAt(str.length - 1) === "5") { str = str.slice(0, str.length - 1) + "6"; } num = Number(str); prettyNum = num.toFixed(2);</pre> <header> <h1>Lesson 13</h1> </header> <p>var rightNow = new Date(); only matchs the setting on your computer. If you want a string, you can do var dateString = rightNow.toString(); will show something like Mon Nov 09 2015 22:57:22 GMT-0600 (Mountain Standard Time)</p> <pre>var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var now = new Date();
var theDay = now.getDay(); -- returns a number from 0 for Sun through 6 for Saturday
var nameOfToday = datNames[theDay];</pre> <header> <h1>Lesson 14</h1> </header> <p>extracting method for Date object</p> <ul> <li>getDay() 0 - 6 0 is Sunday</li> <li>getMonth() 0 - 11 0 is January</li> <li>getDate() 1 - 31 1 is 1st of Month</li> <li>getFullYear() 4 digit year example 2015</li> <li>getHours() 0 -23 0 is midnight 12 is noon 23 is 11pm</li> <li>getMinutes() 0 - 59</li> <li>getSeconds() 0 - 59</li> <li>getMilliseconds() 0 - 59</li> <li>getTime() millieseconds since midnight Jan 1st, 1970</li> </ul> <header> <h1>Lesson 15</h1> </header> <p>When JavaScript variables are declared, they have an initial value of undefined. If you do a mathematical operation on an undefined variable your result will be NaN which means "Not a Number". If you concatenate a string with an undefined variable, you will get a literal string of "undefined".</p> <header> <h1>Lesson 16</h1> </header> <pre> var msDiff = new Date("June 30, 2035").getTime() - new Date.getTime(); var daysTillDoom = Math.floor(msDiff / (1000 * 60 * 60 * 24)); </pre> <p>If you want to explicit specify the time new Date("July 21, 1983 13:25:00");</p> <header> <h1>Lesson 17</h1> </header> <ul> <li>setFullYear() d.setFullYear(2006); Year is 2006</li> <li>setMonth() d.setMonth(6); Month is July</li> <li>setDate(6) Day of the month is 6</li> <li>setHours(6) 6 am</li> <li>setMinutes(6) 6 minutes past the hour</li> <li>setSeconds(6) 6 seconds past the minute</li> <li>setMiliseconds(6) 6 milliseconds past the second</li> </ul> <header> <h1>Lesson 18</h1> </header> <pre> function convert(celsius) { // Only change code below this line var fahrenheit = celsius * 9/5 + 32; // Only change code above this line if ( <strong>typeof</strong> fahrenheit !== 'undefined' ) { return fahrenheit; } else { return 'fahrenheit not defined'; }
} </pre> <header> <h1>Lesson 19</h1> </header> <p>String values in JavaScript may be written with single or double quotes, so long as you start and end with the same type of quote. Unlike some languages, single and double quotes are functionally <strong>identical</strong> in Javascript. "This string has \"double quotes\" in it" The value in using one or the other has to do with the need to escape quotes of the same type. If you have a string with many double quotes, this can be difficult to read and write. Instead, use single quotes: 'This string has "double quotes" in it. And "probably" lots of them.'</p> <pre>var myStr = '&lt;a href="http://www.example.com" target="_blank"&gt;Link&lt;/a&gt;';</pre> <p>Quotes are not the only characters that can be escaped inside a string. Here is a table of common escape sequences:</p> <ul> <li>\' single quote</li> <li>\" double quote</li> <li>\\ backslash</li> <li>\n new line</li> <li>\r carriage return</li> <li>\t tab</li> <li>\b backspace</li> <li>\f form feed</li> </ul> <p>you need to understand some are escaping from javascript, some are escaping from HTML</p> <p>for html escaping, use this nifty tool - http://www.freeformatter.com/html-escape.html</p> <header> <h1>Lesson 20</h1> </header> <pre>do { }while(); notice the comma</pre> <header> <h1>Lesson 21</h1> </header> <pre> a href="#" page will go back to top use this solution &lt;a href=&quot;JavaScript:void(0)&quot; onClick=&quot;alert('hi');&quot;&gt;Click&lt;/a&gt; ====================== &lt;a href=&quot;JavaScript:void(0)&quot; onClick=&quot;popup('hi');&quot;&gt;Click&lt;/a&gt;
function popup(message) alert(message);
} ====================== &lt;input type=&quot;button&quot; value=&quot;Click&quot; onClick=&quot;alert('Hello world!');&quot;&gt; ====================== &lt;a href=&quot;summary-page.html&gt;&lt;img src=&quot;button-sum-pg.png&quot; onClick=&quot;alert('Hello world!');&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;summary-page.html&gt;&lt;img src=&quot;button-sum-pg.png&quot; onClick=&quot;greetTheUser();&quot;&gt;&lt;/a&gt;
======================
&lt;img src=&quot;before-pic.jpg&quot; onMouseover=&quot;src='after-pic.jpg'&quot;&gt;
You may be surprised that the response to the event isn't written in javaScript. It's HTML markup.
&lt;h1 onMouseover=&quot;alert('Be sure to get your shopping done today.');&quot;&gt;World Ends Tomorrow&lt;/h1&gt;
&lt;a href=&quot;index.html&quot; onMouseover=&quot;this.style.color='green';&quot;&gt;Hope Page&lt;/a&gt;
&lt;p id=&quot;lorids&quot; onMouseover=&quot;expand();&quot;&gt;Slow Loris; Mouse Over for more info&lt;/p&gt;
&lt;img src=&quot;before-pic.jpg&quot; onMouseover=&quot;src='after-pic.jpg'&quot;
onMouseout=&quot;src='before-pic.jpg'&quot;&gt
===================
&lt;input type=&quot;text&quot; size=&quot;30&quot; onFocus=&quot;this.style.backgroundColor = 'yellow';&quot;&gt;
onBlur is the opposite to onFocus
&lt;input type=&quot;text&quot; size=&quot;30&quot; onFocus=&quot;this.style.backgroundColor = 'yellow';&quot;
onBlur=&quot;this.style.backgroundColor = 'white';&quot;&gt;
============================
&lt;form onSubmit = &quot;checkAddress('email');&quot;&gt;
Email:
&lt;input type=&quot;text&quot; id=&quot;email&quot;&gt;
&lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
&lt;/form&gt;
function checkAddress(fieldId){ if(document.getElementById(fieldId).value === ""){ alert("Email address required."); }
}
============================
&lt;form&gt;
ZIP:&lt;br&gt;
&lt;input type=&quot;text&quot; id=&quot;zip&quot; onBlur=&quot;fillCity();&quot;&gt;&lt;br&gt;
City:&lt;br&gt;
&lt;input type=&quot;text&quot; id=&quot;city&quot;&gt;
&lt;/form&gt;
function fillCity(){ var cityName; var zipEntered = document.getElementById("zip").value; switch (zipEntered){ case "60608": cityName = "Chicage"; break; case "12345": cityName = "Omaha"; break; case "54321": cityName = "Milwaukee"; } document,getElementById("city").value = cityName;
}
=========================
&lt;p id=&quot;slowLoris&quot;&gt;
Slow loriese are a goupr of server species of somthing. &lt;a href=&quot;javascript:void(0);&quot;
onClick=&quot;expandLories();&quot;&gt;&lt;em&gt;Click for more.&lt;/em&gt;&lt;/a&gt;
&lt;/p&gt;
function expandLoris(){ var expandedParagraph = "slow lories are a group a seveal species of tresirrhine primates which make up the genue Nycticebus. They ahve a round head. narrow snout, large eyes, and a varietyof distinctive coloration"; document.getElementById("slowLoris").innerHTML = expandedParagraphl
}
or
function placeAlist(){
var listToPlace = "&lt;ol&gt;&lt;li&gt;Slow loris&lt;/li&gt;&lt;li&gt;Fast Lories&lt;/li&gt;&lt;li&gt;Just-right loris&lt;/i&gt;&lt;/ol&gt;";
document.getElementById('lorisList').innerHTML = listToPlace;
}
=========================
&lt;img src=&quot;blobfish.jpg&quot; id=&quot;ugly&quot; onClick=&quot;makeInvisible();&quot;&gt;
.hidden {display:none}
function makeInvisible(){ document.getElementById("ugly").className = "hidden";
}
if you want to add a class to an element, preserving its existing classes, you can do it:
function makeBig(){
document.getElementById('p1').className += " big"; //notice the space before class name
}
==========================
&lt;img src=&quot;before-pic.jpg&quot; id=&quot;before&quot; onMouseover=&quot;swapPic();&quot;&gt
function swapPic(){ document.getElementById("before").src = "after-pic.jpg";
}
========================
function getAddress(){ var link = document.getElementById("link1"); var address = link.href;
}
=======================
There is another way to specify style properties, other than use .className.
function makeBig(){
document.getEleemntById('p1').style.fontSize = "2em";
}
It will preserve all others, only changing the relvant.
Think of it as changing the inline css
Other examples:
style.cssFloat = "left";
style.visibility = "hidden";
style.margin = "0 10px 0 10px";
If you say:
var m = document.getElementBId('mainPic').style.margin; it will tell you only the margins
specified inline.
The following statement gives you all the style properties, speicified in both css
and inline, but it has browser limitation
var m = window.getComputedStyle("mainPic").margin; </pre> <header> <h1>Lesson 22</h1> </header> <pre>var pars = document.getElementsByTagName('p'); for(var i = 0; i < pars.length; i++){ pars[i].style.fontFamily = "Verdana, Geneva, sans-serif"; } if you want to access the child elements under a parent element, do this: var t = document.getElementById("table9"); var cells = t.getElementsByTagName("td"); for(var i = 0; i < cells.length; i++){ cells[i].style.backgroundColor = "pink"; } </pre> <header> <h1>Lesson 23</h1> </header> <p>DOM - All the things on your web page including styles and texts. Your JavaScrpt code can get its hand on any of these</p> <header> <h1>Lesson 24</h1> </header> <pre>var myGlobal = 10;
function fun1() { // Assign 5 to oopsGlobal Here oopsGlobal = 5;
}
// Only change code above this line
function fun2() { var output = ""; if(typeof myGlobal != "undefined") { output += "myGlobal: " + myGlobal; } if(typeof oopsGlobal != "undefined") { output += " oopsGlobal: " + oopsGlobal; } console.log(output);
}
fun1();
fun2();</pre> <p>shows myGlobal: 10 oopsGlobal: 5</p> <header> <h1>Lesson 24</h1> </header> <p> It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedence over the global variable.</p>
<pre>
In this example:
var someVar = "Hat";
function myFun() { var someVar = "Head"; return someVar;
}
The function myFun will return "Head" because the local version of the variable is present.</pre>
<p>Unlike Java, In JS, variable redeclaration is possible</p>
<header> <h1>Lesson 25</h1> </header> <p>console.log("asd"+[1,2,3]); show asd1,2,3 console.log([1,2,3]); show [1, 2, 3] JSON.stringify([1,2,3]) shows "[1,2,3]" console.log("Before: " + JSON.stringify(myArr)); shows Before: [1,2,3,4,5]</p> <p>var collectionCopy = JSON.parse(JSON.stringify(collection));</p> <header> <h1>Lesson 26</h1> </header> <p>Like the equality operator, greater than operator will convert data types of values while comparing.</p>
<pre>
5 > 3 // true
7 > '3' // true
2 > 3 // false
'1' > 9 // false
2 > true // true
0 > true // false
0 >= false //true
'ab' < 'ac'
true
'a' < 'an'
true
'Ac' > 'ac'
false
<mark><strong>JS, Ruby can compare string, Java cannot, only character, unless you do str1.compareTo(str2);</strong></mark>
</pre>
<p>Like the equality operator, the inequality operator will convert data types of values while comparing.</p>
<pre>1 != 2 // true
1 != "1" // false
1 != '1' // false
1 != true // false
0 != false // false</pre>
<pre>The equality operator will do its best to convert values for comparison, for example:
1 == 1 // true
"1" == 1 // true
1 == '1' // true
0 == false // true
0 == null // false
0 == undefined // false
null == undefined // true</pre>
<p><mark><strong>Notice in Ruby, we don't have such thing. We will always have 1 == true evaluated to false</strong></mark></p>
<header> <h1>Lesson 27</h1> </header>
<pre>switch (num) { case value1: statement1; break; case value2: statement2; break;
... case valueN: statementN; break; default: (optionally) defaultStatement;
}
function myTest(val) { var answer = ""; // Only change code below this line switch(val){ case 1: case 2: case 3: answer = "Low"; break; case 4: case 5: case 6: answer = "Mid"; break; case 7: case 8: case 9: answer = "High"; break; } // Only change code above this line return answer;
}
// Change this value to test
myTest(1);</pre>
<header> <h1>Lesson 28</h1>
</header>
<pre>typeof unddefined //"undefined"</pre>
<header> <h1>Lesson 29</h1>
</header>
<p>
Another use of bracket notation on objects (other than the property name has a space in it) is to use a variable to access a property. This can be very useful for iterating through lists of the object properties or for doing the lookup.
Here is an example of using a variable to access a property:</p>
<pre>
var someProp = "propName";
var myObj = { propName: "Some Value"
}
myObj[someProp]; // "Some Value"
Here is one more:
var myDog = "Hunter";
var dogs = { Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle"
}
var breed = dogs[myDog]; // "Hunter"
console.log(breed)// "Doberman"</pre>
<p>Note that we do not use quotes around the variable name when using it to access the property because we are using the value of the variable, not the name</p>
<pre>var testObj = { 12: "Namath", 16: "Montana", 19: "Unitas"
};
var playerNumber = 16;
var player = testObj[playerNumber]; </pre>
<p>Notice you cannot do testObj.16 directly here</p>
<header> <h1>Lesson 30</h1>
</header>
<p>
We can also delete properties from objects like this:
<pre>delete ourDog.bark;</pre>
Delete the "tails" property from myDog. You may use either dot or bracket notation.
</p> <header> <h1>Lesson 31</h1>
</header> <p>Using Objects for Lookups</p> <p>Sometimes it is useful to check if the property of a given object exists or not. We can use the .hasOwnProperty(propname) method of objects to determine if that object has the given property name. .hasOwnProperty() returns true or false if the property is found or not.
<pre>var myObj = { top: "hat", bottom: "pants"
};
myObj.hasOwnProperty("top"); // true
myObj.hasOwnProperty("middle"); // false</pre></p>
<header> <h1>Lesson 32</h1>
</header>
<p>http://stackoverflow.com/questions/3608246/what-is-the-type-of-keys-in-javascript</p>
<p>In object literal terms, b is a property. Properties are strings in JavaScript, although when defining the property name inside an object literal you may omit the string delimiters.</p>
<pre>var a = { a: "value1", 12: "value2",
};
for (key in a) { console.log(typeof key); //-> "string"
}
console.log(a["12"]);
console.log(a[12]);
show two string
show two value2
but a.12 不可以
var asd = a.hasOwnProperty("12");
or a.hasOwnProperty(12);
都可以</pre>
<p>https://mothereff.in/js-properties#12e34 - A validator tool</p>
<pre>
Property names are automatically coerced into a string. You can try this yourself by using a numeric literal as a property name.
var object = {
.12e3: 'wut'
};
object[.12e3]; // 'wut'
object['.12e3']; // undefined
object['120']; // 'wut'
// Let’s try another numeric literal: object = {
12e34: 'heh'
};
object[12e34]; // 'heh'
object['12e34']; // undefined
object[1.2e35]; // 'heh'
object['1.2e35']; // undefined
object[1.2e+35]; // 'heh'
object['1.2e+35']; // 'heh'
For this reason, I’d recommend using only string literals for property names.
From Unquoted property names / object keys in JavaScript, my write-up on the subject:
Quotes can only be omitted if the property name is a numeric literal or a valid identifier name.
Bracket notation can safely be used for all property names.
Dot notation can only be used when the property name is a valid identifier name.
I also made a tool that will tell you if any given property name can be used without quotes and/or with dot notation. Try it at mothereff.in/js-properties.</pre>
<header> <h1>Lesson 33</h1>
</header>
<p>JavaScript has a Math.random() function that generates a random decimal number between 0 (inclusive) and not quite up to 1 (exclusive). Thus Math.random() can return a 0 but never quite return a 1 </p>
<p>It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers.</p>
<p>Use Math.random() to generate a random decimal.
Multiply that random decimal by 20.
Use another function, Math.floor() to round the number down to its nearest whole number.
Remember that Math.random() can never quite return a 1 and, because we're rounding down, it's impossible to actually get 20. This technique will give us a whole number between 0 and 19.</p>
<p> Putting everything together, this is what our code looks like: Math.floor(Math.random() * 20);</p>
<p>We are calling Math.random(), multiplying the result by 20, then passing the value to Math.floor() function to round the value down to the nearest whole number.</p>
<p>Generate Random Whole Numbers within a Range </p>
<pre>function ourFunction(ourMin, ourMax) { return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;
}
ourFunction(1, 9);
function randomRange(myMin, myMax) { return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;
}
var myRandom = randomRange(5, 15);</pre>
<header> <h1>Lesson 34</h1>
</header>
<pre>var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it. What a great software program";
// Example
var expressionToGetSoftware = /software/gi;
result = testString.match(expressionToGetSoftware)
var softwareCount = testString.match(expressionToGetSoftware).length;
console.log(softwareCount);
console.log(result[0]);
console.log(result[1]);
2
software
software</pre>
<pre>Let's break this down a bit:
/ is the start of the regular expression.
the is the pattern we want to match.
/ is the end of the regular expression.
g means global, which causes the pattern to return all matches in the string, not just the first one.
i means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.</pre>
<p>We can use special selectors in Regular Expressions to select a particular type of value.
One such selector is the digit selector \d which is used to retrieve one digit (e.g. numbers 0 to 9) in a string.
In JavaScript, it is used like this: /\d/g.
Appending a plus sign (+) after the selector, e.g. /\d+/g, allows this regular expression to match one or more digits.
The trailing g is short for 'global', which allows this regular expression to find all matches rather than stop at the first match.</p>
<p>We can also use regular expression selectors like \s to find whitespace in a string.
The whitespace characters are " " (space), \r (the carriage return), \n (newline), \t (tab), and \f (the form feed).
The whitespace regular expression looks like this:
/\s+/g</p>
<pre>var testString = "How many spaces are there in this sentence?";
var expression = /\s+/g;
var spaceCount = testString.match(expression).length; //show 7</pre>
<p>You can invert any match by using the uppercase version of the regular expression selector.
For example, \s will match any whitespace, and \S will match anything that isn't whitespace.
Instructions
Use /\S/g to count the number of non-whitespace characters in testString.</p>
<pre>
var testString = "How many non-space characters are there in this sentence?";
var expression = /\S+/g;
var nonSpaceCount = testString.match(expression).length;
show 9
if I said: var expression = /\S/g
lenghth will be 49
If no match will return null</pre> <!----------------------------------> <header> <h1>That Pixel Design is so Hot Right Now</h1> <p>by <a id="author" href="">Justin Day</a> · <time datetime="2014-11-12">November 12, 2014</time> · <a href="">3 Comments</a></p> </header> <p>There’s a certain comfort, and often inherent cool, in things categorized as “retro.” A ’69 Ford Mustang. A greaser pompadour. Betty White. Pixel design.</p> <p>It’s no secret that pixel art is experiencing a resurgence in the digital form by way of video games like Mojang’s Minecraft and Superbrothers’ Sword & Sworcery. The latter game afforded me some inspiration; from what I was seeing online, the style of pixel art it brought to the masses—and popularized in the tangible realm by artists like Michael Myers from drawsgood—increasingly defined the style, and constraints, pixel art was created under. “Ever wonder what the Star Wars characters would look like pixelized?” Elongated single-pixel limbs, very stylized body shape. “[x designer] shows us what The Avengers would look like in pixel form!” Elongated single-pixel limbs, very stylized body shape.</p> <h2>The lost medium of pixel art</h2> <p>If you’re under 30, you’re likely unaware of, or have very finite exposure to, the origins of pixel-based desktop icon design.</p> <ul> <li>Manually dithering via finite tonal variations to simulate depth</li> <li>Stacking pixel units of a shape’s outline conservatively, to avoid “jaggies” and smooth edges</li> <li>Faux anti-aliasing of harsh edges via the six available non-alpha-transparent grey swatches</li> </ul> <h2>Eight icon examples from the 1990s</h2> <p>1990s desktop icons at scale, and zoomed 400 percent. From left to right, by: Mathew Halpern, Justin Dauer, How Bowers, Brian Brasher, Gedeon Maheux, Ian Harrington, Søren Karstensen, Ilona Melis.</p> <p>And lo, this is how The Dead Pixel Society came into being: a global collection of ’90s-era icon designers, reunited. We agreed on the general idea for what we wanted to accomplish pretty quickly: to create under the same archaic constraints. But what was our theme? A specific movie or TV show? Too limiting for all participants’ tastes. Finally, considering our “retro medium,” we arrived at an ultimate thought: what if we had still been designing icons all these years, and our tools had never evolved? What would those icons look like? This evolved into a mission statement:</p> <blockquote> <p>We as The Dead Pixel Society honor the humble pixel with icon creations we would have done had we continued designing these past 18 years, under the exact same archaic constraints: 256 colors, pixel-by-pixel, on a 32x32 canvas.</p> </blockquote> <p>Today, the first Dead Pixel Society collaborative gallery is complete and live, netting out at 72,704 pixels over 71 icons from 12 icon artists in three countries, created over the span of 90 days.</p> <p>With time, nostalgia and grey hairs increase in tandem. To the former, I had a thought: get the band back together.</p> <figure> <img src="http://alistapart.com/d/misc-images/Blog_images/dead-pixel-society/ALA_old_icons.png" alt="Eight icon examples from the 1990s" /> <figcaption>1990s desktop icons at scale, and zoomed 400 percent. From left to right, by: Mathew Halpern, Justin Dauer, How Bowers, Brian Brasher, Gedeon Maheux, Ian Harrington, Søren Karstensen, Ilona Melis.</figcaption> </figure> <p>Today, the first Dead Pixel Society collaborative gallery is complete and live, netting out at 72,704 pixels over 71 icons from 12 icon artists in three countries, created over the span of 90 days.</p> <figure> <img src="http://alistapart.com/d/misc-images/Blog_images/dead-pixel-society/ALA_new_icons.png" alt="Eight icon examples from 2014" /> <figcaption>2014 Dead Pixel Society icons at scale, and zoomed 400 percent. From left to right, by: Mathew Halpern, Justin Dauer, How Bowers, Brian Brasher, Gedeon Maheux, Ian Harrington, Søren Karstensen, Ilona Melis.</figcaption> </figure> <h2>Eight icon examples from 2014</h2> <p>These icons aren’t just imitations—they’re a designer’s interpretation of the subject matter. Anyone can ⌘-C / ⌘-V a JPG into Photoshop, switch the color mode to Indexed, and call it a day. Free-handing original subject matter—or externally referencing source material—evolves the process from replication into illustration. Take Mathew Halpern’s “Grumpy Cat” icon, for example. His mastery of the medium is best appreciated via this speed art video, and gives a sense of how insanely iterative pixel-icon design is</p>
</main>
</body>
</html>

JS consolidation part1 - Script Codes CSS Codes

a { text-decoration: none; color: #2455C3;
}
a:hover { text-decoration: underline;
}
li { padding-bottom: 10px;
}
h1, h2 { font-family: Helvetica, Arial, sans-serif; font-size: 2em;
}
h2 { font-size: 24px; color: #BA3925;
}
body { font-family: Georgia, sans-serif; font-size: 18px; line-height: 30px;
}
figcaption { font: italic 14px/24px Georgia, serif; text-align: center;
}
header p { font-size: 14px; font-style: italic;
}
header { text-align: center;
}
#author { font-family: Helvetica, Arial, sans-serif; font-style: normal; font-weight: bold; text-transform: uppercase;
}
blockquote { padding-left: 12px; margin-left: 0; font-style: italic; border-left: 1px dotted #bfbfbf;
}
main { width: 690px; margin: 0 auto;
}
JS consolidation part1 - Script Codes
JS consolidation part1 - Script Codes
Home Page Home
Developer DAWEI DAI
Username shachopin
Uploaded September 29, 2022
Rating 3
Size 12,648 Kb
Views 28,336
Do you need developer help for JS consolidation part1?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

DAWEI DAI (shachopin) Script Codes
Name
Angular JS 1.X Experiment 1 - Basic
Rails consolidation part2 - Model
Oracle JET consolidation part3
Sinatra consolidation part1
Rails consolidation part5 - Bootstrap and Asset Pipeline
Rails consolidation part6 - Sample Code Snippets_A
Rails consolidation part1 - Basics
Oracle JET Experiment 6 - Tooltip popup
Mobile Dev Part1 - Basics
Mobile Dev Part2 - More
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!