Soft Day10 - JavaScript Foundation (Variables, Data Types, Operators, Expressions and Statements, Process Control)

Medium soft Day10

  1. JavaScript Foundation

    • Web pages, websites and Applications

      • Page: A separate page
      • Website: Some columns of related pages are grouped together
      • Application: It can interact with users and implement some functions.

  2. Introduction to JavaScript

    • What is JavaScript

      • JavaScript is a *** scripting language running on *** client ****
        JavaScript interpreter is called JavaScript engine. It is a part of browser. It is widely used in client scripting language. It was first used in HTML (an application under standard General Markup language) web pages to add dynamic functions to HTML web pages.
      • JavaScript was originally inspired by Java and was designed to "look like Java", so there are similarities in grammar, and some names and naming conventions are borrowed from Java.
      • A Relation Like Leifeng and Leifeng Pagoda

    • The original purpose of JavaScript

      • Verification operations for forms

    • What JavaScript Means Now (Application Scenarios)

      JavaScript has evolved to almost omnipotent.

      1. Web page effects
      2. Server-side development (Node.js)
      3. Command Line Tools (Node.js)
      4. Control Hardware-Internet of Things (Ruff)
      5. Game development (cocos2d-js)
      6. Mobile App (Cordova)
      7. Desktop Application (Electorn)

    • Differences between JavaScript and HTML,CSS

      • html: Provide web page structure and content
      • css: beautifying the interface
      • js: Controlling the Content of Web Page to Increase Dynamic Effect of Web Page

  3. Composition of Javascript

    • ECMAscript

      • ECMAScript-The Core of JavaScript (Syntax)

        ECMA European Computer Manufacturing Federation

        Netscape: JavaScript

        Microsoft: Jscript

        • Define the grammar specification of JavaScript
        • The core of JavaScript, which describes the basic grammar and data types of language, ECMAScript is a set of standards, which defines a language standard, and has nothing to do with the specific implementation.
        • html does not become js because of the logical structure

    • BOM-Browser Object Model

      • An API for Operating Browser Functions
      • Browser windows can be manipulated through BOM, such as pop-up box, browser jump control, resolution acquisition, etc.

    • DOM - Document Object Model

      • A set of API s for manipulating page elements
      • DOM can think of HTML as a document tree, and the nodes on the tree can be manipulated through the API provided by DOM.

  4. Javascript Primary

    CSS: In-line Style, Embedded Style, External Style

    • Writing position

      • Written in line

        <input type="button" value="Button" onclick="alert('Hello World')" />

      • Write it in the script tag

        <head>
  <script>
    alert('Hello World!');
  </script>
</head>

      • Write in an external js file and introduce it on the page

        <script src="main.js"></script>

      • Notes

        JavaScript code cannot be written in script tags that refer to external js files

  5. variable

    • What is a variable?

      • Variable is the identifier of data stored in computer memory. According to the name of variable, the data stored in memory can be obtained.

    • Why use variables

      • Variables are easily accessible or
      • Storage of variables in memory
      • Naming rules and specifications for variables

    • How to use variables

      • var declares variables

        var age;

      • Assignment of variables

        var age;
age = 18;

      • Declare multiple variables at the same time

        var age, name, sex;
age = 10;
name = 'zs';

      • Declare multiple variables and assign values at the same time

        var age = 10, name = 'zs';

    • Storage of variables in memory

      var age = 18;

    • Naming and specification of variables

      • Rules - Must be obeyed. Failure to comply will result in errors.

        • It consists of letters, numbers, underscores, $symbols and cannot begin with numbers.
        • Can't be keywords and reserved words
        • Case-sensitive

      • Specification: Non-compliance with non-reporting errors

        • Variable names must be meaningful

      • Naming hump: useName, lowercase, capitalization of the following words (small hump)

  6. data type

    • Simple data types

      • Number,String,Boolean,Undefined,Null

    • Number type

      • Digital Literals: Representation of Fixed Values of Numbers

        110 1024 60.5

      • Binary system

        Decimal default
 Hexadecimal
	var num = 0xA;
Octal number system
	07 
	012
	2*1 + 1*8
	112
	2*1 + 1*10 + 1*10*10
 Note that if the literal value exceeds the range, the leading value will be ignored, and the following value will be treated as decimal parsing.

        Example:

        <script type="text/javascript">
		var age = 16;
	var name = "HuaLi";
		// Java int age = 18; String name ='zs'Java type
		// js weak type, no specified data type when declaring variables, automatically determine the type of variables when executing
		// var num = 0xA;
		var ei = 019;
		//console.log(ei);
		var fl = 7e-10;
	//console.log(fl);

	var a = Infinity, b = 0.2;
		console.log(a + b);
</script>

    • Floating point number

      • Accuracy of Floating Points

        17-digit decimal at maximum accuracy
 Don't judge whether two floating-point numbers are equal

      • Numerical range

        Minimum value: Number.MIN_VALUE, which is: 5e-324
 Maximum: Number.MAX_VALUE, which is 1.7976931348623157e+308
 Infinity
 Infinity

      • Numerical judgement

        NaN not a number, not a number of numbers

         	NaN is not equal to anything.

    • String type

      'abc' "abc"

      • string literal

        'It's a lovely day today'

      • Escape character

        • + "" Gets single quotation marks

      • String length

        The length attribute is used to get the length of the string

      • String splicing

        String splicing using + connection

        1. As long as there is one = string on both sides, +realizes the splicing function.

        2. Both are numbers, that is, arithmetic function.

      Example:

      <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		var str = "\'What a nice day today\'";
		console.log(str);
		/*
			'   \'
			"   \"
			\	\\
			Line wrap \n
			Tabulation \t
			Space \b
			Carriage return \r			
		*/
		console.log(str.length);

		//String Stitching
		console.log(11 + 11);
		console.log('11' + 11);
		console.log('male' + true);
		var un;
		console.log(un);
		var nn = null;
		console.log(nn);
		console.log(typeof str);
		var boolean = true;
		console.log(boolean);

	</script>
</head>
<body>
	
</body>
</html>

    • Boolean type

      • Boolean literals: true and false, case-sensitive
      • Computer internal storage: true 1, false 0

    • Undefined and Null

      1. Undefined denotes a variable that declares no assignment. When a variable is declared only, the default value is undefined.
      2. Null represents an empty variable whose value must be set manually if it is to be null

    • Get the variable type

      typeof

  7. Notes

    • Single-Line Comments

      Used to describe the purpose of one or more lines of code

      // This is a variable.
var name = 'him';

    • multiline comment

      Used to annotate multiple codes

      /*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

  8. Data Type Conversion

    • Convert to string type

      • toString()

      • String()

        The significance of String() functions is that some values do not have toString(), at which point String() can be used. For example, undefined and null

        Example:

        <script type="text/javascript">
		var num = 5;
		//console.log(num + '');
		//num.toString();
		console.log(String(num));
		var a = null;
		console.log(String(a));

	</script>

    • Stitching String Mode

      num + ", when one operator on both sides of + is a string type and one operator is another type, the other types will be converted into strings first, then string splicing will be performed, and the string will be returned.

  9. Convert to numerical type

    • Number()

      Any value can be converted to a numerical value. If the string to be converted and if there is a character that is not a numerical value in the string to be converted, NaN is returned.

      Example:

      <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		var num = '111 Hello';
		console.log(Number(num));

		var num1 = "11.8";
		console.log(parseInt(num1));

		var num2 = true;
		console.log(parseInt(num2));

		var num3 = "11abc.8";
		//If a number is encountered, the number is returned, and if a non-number is encountered, the NAN is returned.
		console.log(parseInt(num3));

		var f1 = "11";
		console.log(parseFloat(f1));

		var f2 = "abc11.11";
		console.log(parseFloat(f2));
	</script>
</head>
<body>
	
</body>
</html>

    • parseInt()

      The function parses a string and returns an integer.

    • parseFloat()

      The function parses a string and returns a decimal.

    • + Operations such as, -0, etc.

      var str='500';
console.log(+str);//Rectification
console.log(-str);//Take negative

    • Convert to Boolean type

      • Boolean()

        0 empty string null undefined NaN converts to false and other converts to true

        Example:

        <script type="text/javascript">
		var str = null;
		// Returns false value, empty string, null,undefined,0,NAN
		console.log(Boolean(str));
    </script>

  10. Operator

    Operator operator

    5 + 6

    Expressions make up operands and operators, and there's a result

    • Arithmetic operator

      ± * / %

    • Unary operator

      Univariate Operator: Operator with only one operand

      • Prefix + +

        • Increase before use

          var num1 = 5;
++ num1; 

var num2 = 6;
console.log(num1 + ++ num2);

      • Post + +

        • Use first, then increase

          var num1 = 5;
num1 ++;    
var num2 = 6 
console.log(num1 + num2 ++);

      • Guess what?

        var a = 1; var b = ++a + ++a; console.log(b);    
	b = 2 + 3= 5
var a = 1; var b = a++ + ++a; console.log(b);   
	b = 1 + 3 = 4
var a = 1; var b = a++ + a++; console.log(b);
  b = 1 + 2 =3
var a = 1; var b = ++a + a++; console.log(b); 
    b = 2 +2 =4

    • Logical Operator (Boolean Operator)

      && If both operands are true, the result is true, otherwise both are false.
|| One of the two operands is true, the result is true, otherwise false.
It's not a rebellion.

    • Relational operators (comparison operators)

      <  >  >=  <= == != === !==

      ==And===The difference is:==Comparing values only,===If type and value are equal at the same time, they are equal.

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false values are equal and types are not equal
var result = 55 === 55; 	// true

    • Assignment Operators

      = += -= *= /= %=

      For example:
var num = 0;
num += 5; // equivalent to num = num + 5;

    • Operator precedence

      • Priority ranges from high to low
        1. ()
        2. Univariate Operator ++ -!
        3. The arithmetic operator first */. % + +
        4. Relational Operator ><>=...
        5. Equality operator ==!=========!=
        6. Logical Operator First & Second||
        7. Assignment Operators
// Exercise 1:
4 >= 6 || 'people' != 'Avatar' && !(12 * 2 == 144) && true
			true
// Exercise 2:
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'
       true                     true

  1. Expressions and Statements

    • Expression
      • An expression can produce a value, possibly an operation, a function call, or a literal quantity. Expressions can be placed anywhere they need values.
    • Sentence
      • Statements can be understood as an action, and loop statements and judgment statements are typical statements. A program consists of many statements, in general; it divides statements one by one.

  2. Process control

    • Three Basic Structures of Programs

      • Sequential structure

        • The top-down code is the sequential structure.

        (Programs are executed from top to bottom by default)

      • Branch structure

        • Execute the corresponding code, depending on the situation

      • Cyclic structure

        • Cyclic structure: doing one thing over and over again

  3. Branch structure

    • if statement

      Grammatical structure:

      if (/* Conditional expression */) {
  // Execution statement
}

if (/* Conditional expression */){
  // Establishment of Execution Statement
} else {
  // Otherwise, execute the statement
}

if (/* Condition 1 */){
  // Establishment of Execution Statement
} else if (/* Condition 2 */){
  // Establishment of Execution Statement
} else if (/* Condition 3 */){
  // Establishment of Execution Statement
} else {
  // Final Default Execution Statement
}

      • Find the maximum of three numbers

        function showMes(){
				var txt1,txt2,txt3;//Random name of variable
				txt1=document.getElementById("num1");
			txt2=document.getElementById("num2");
				txt3=document.getElementById("num3");
			var max;
				var n1,n2,n3;
			n1=parseInt(txt1.value);//Convert the value of txt1 to shaping
				n2=parseInt(txt2.value);
				n3=parseInt(txt3.value);				
				max=max3(n1,n2,n3);
				var txt4;
				txt4=document.getElementById("num4");
				txt4.value=max.toString();
			}
			function max3(n1,n2,n3){
				var max;
				max=n1;
				if(max<n2)
				    max=n2;
				if(max<n3)
				   max=n3;
				return max;
			}
		</script>
	</head>
	<body>
		//First number:<input type="text" id="num1" /><br />
	//The second number:<input type="text" id="num2" /><br />
		//The third number:<input type="text" id="num3" /><br />
	<input type="button" value="Maximum value" onclick="showMes()"/><br/>
		//Maximum:<input type="text" id="num4" />
</body>

    • Ternary operator

        Expressions 1? Expressions 2: Expressions 3
 It's about if... A Simplified Writing Method of else Statement

      • Are you over 18 years old?
        Finding the Maximum from Two Numbers

          <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<title>Document</title>
  	<script type="text/javascript">
  		var age = 19;
		console.log(age >= 18 ? 'adult' : 'Under age');
  		var msg = age >= 18 ? '1' : '2';
		console.log(msg);
  	</script>
</head>
  <body>
	
  </body>
  </html>

    • switch Statements

      Grammatical Format:

      switch (expression) {
  case Constant 1:
  Sentence;
    break;
  case Constant 2:
    Sentence;
    break;
  case Constant 3:
    Sentence;
  break;
  ...
case constant n:
    Sentence;
  break;
  default:
    Sentence;
    break;
}

      • Show what day of the week

        <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		var day = 5;
		switch (day) {
			case 1: 
			console.log('Monday');
			break;

			case 2: 
			console.log('Tuesday');
			break;

			case 3: 
			console.log('Wednesday');
			break;

			case 4: 
			console.log('Thursday');
			break;

			case 5: 
			console.log('Friday');
			

			case 6: 
			console.log('Saturday');
			break;

			case 7: 
			console.log('Sunday');
			break;

		}
	</script>
</head>
<body>
	
</body>
</html>

    • Implicit Conversion of Boolean Types

      Process control statements implicitly convert subsequent values to Boolean types

      Convert to true non-empty string non-zero digital true any object
 Convert to false empty string 0 false null undefined

      Example:

      <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		var msg;
		if (!msg) {
			alert(1);
		}
		var a = !!'123';
		console.log(a);
	</script>
</head>
<body>
	
</body>
</html>

  4. Cyclic structure

    In javascript, there are three kinds of loop statements, while, do... While and for loops.

    • while

      Basic grammar:

      // When the loop condition is true, the loop body is executed.
// When the loop condition is false, the loop ends.
while (Cyclic Conditions){
  / / circulatory body
}

      Example:

      <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		var i = 1;
		var sum = 0;
		while (i <=100) {
			sum += i;
			i++;
		}
		alert(sum);
	</script>
</head>
<body>
	
</body>
</html>

    • do...while

      Do... The while loop and the while loop are very similar, and they can often be substituted for each other, but do... The characteristic of while is that it will be executed once regardless of the conditions.

      Basic grammar:

      do {
  // Circulatory body;
} while (Cycle condition);

      Example:

      <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		//Find the sum of all triples within 100
		var i = 0;
		var sum = 0;
		do {
			if(i % 3 == 0){
				sum += i;

			}
			i++;
		}while (i <= 100);
		alert(sum);
	</script>
</head>
<body>
	
</body>
</html>

    • for statement

      while and do... while is generally used to solve the cycle of undetermined times. for loops are usually more convenient when the number of loops is determined.

      for loop grammar:

      // The expressions of for loops are used; sign-separated expressions should never be written.
for (Initialization expression 1; Judgment expression 2; Self-increasing expression 3){
  // Circulatory body 4
}

    • continue and break

      break: Jump out of the whole loop immediately, that is, the end of the loop, and start executing what follows the loop (jump directly to braces)

      Continue: Jump out of the current loop immediately and continue to the next one (jump to i++)

Keywords: Javascript Java ECMAScript Mobile

Added by wrongmove18 on Mon, 23 Sep 2019 09:15:40 +0300

Popular Keywords

©2024 Programming VIP