This is the 29th day of my participation in Gwen Challenge

Search “Program Yuan Xiaozhuang” on wechat, and you will get a full set of Python full stack tutorials, as well as the constantly updated e-books and interview materials prepared by Xiaozhuang

preface

The basic web framework and basic web beautification have been briefly introduced, now let’s learn how to use JavaScript to control the behavior of web pages!

JavaScript introduction

JavaScript is a very popular scripting language. It is the programming code that can be inserted into HTML pages. Js is an object-oriented programming language. More about the development history of JavaScript interested partners can understand, small village here do not do too much introduction ~

Basic JavaScript syntax

annotation

// Single-line comments for JavaScript

/* JavaScript multi-line comments multi-line comments are written the same way as CSS comments */
Copy the code

The basic grammar

JavaScript code ends each statement with a semicolon, but this semicolon is not written and will not report an error.

How to run JavaScript code??

You can’t run JavaScript code in PyCharm, so how does it work? Open Google Chrome, then press F12 or right click the web page, choose Check, the following interface appears, then choose Console, here you can not only write JS code but also directly run oh.

How do I use JavaScript in HTML

There are two ways to reference JavaScript code in HTML:

The first is in

<script>Write JS code here</script>
Copy the code

The second way is to introduce external js files:

<script src="myscript.js"></script>
Copy the code

JavaScript variables and constants

variable

The first time you declare a variable, you need to use a keyword, but you don’t need it and you can’t get an error. The let keyword was added in the new VERSION of ES6 and is used in the same way as the var keyword to declare variables.

var name = 'python';
/ / or
let name = 'javascript';
Copy the code

constant

Constants in JavaScript are declared explicitly, and the keyword used to declare them is const:

const pi = 3.14;

Copy the code

Naming conventions

The variable name can contain only digits, letters, underscores (_), and $

(2) Camel name is recommended, such as appleNumber

③ Variable names cannot be named using JavaScript keywords

JavaScript basic data types

Typeof Views the data type

In Python, the type keyword is used to view data types, and in JS, typeof is used to view data types.

let a = 11;
let b = 11.1;
let c = 'js';
Copy the code

Number Number type

JavaScript does not distinguish between integers and floating-point types. There is only one numeric type, such as:

let x = 1;
let y = 1.1;

typeof x;
"number"
typeof y;
"number"
Copy the code

What if you want to convert an integer type to a so-called floating-point type or a number with a decimal to an integer? Don’t worry, js also provides a corresponding method:

// The string is transformed into an integer
let a = '123';
parseInt(a);  / / 123

// Float conversion integer
let a = "123.123";
parseInt(a);  / / 123

If a string with a non-number is converted to an integer, the numeric type is converted to an integer, and NaN is returned if the number is not in the middle
let e = "123asd";
parseInt(e);  / / 123

let f = "sf123";
parseInt(f);  // NaN,NaN is not a number
Copy the code

String character type

JavaScript supports single and double quotes to define strings, but does not support triple quotes to define strings.

let name = ' ''ha ha'' ';  // VM32638:1 Uncaught SyntaxError: Unexpected string
let name = 'ha ha';
let age = "18";
Copy the code

Template string

Template strings are similar to Python formatted output, marked with backquotes, and can be used as regular strings, to define multi-line strings, or to embed variables in strings.

// 'define an ordinary multi-line string'
var s3 = `
python
html
css
javascript
`

${} can automatically look up the value of the variable name in the curly braces. If you can define something, you can return an error
var name = 'js';
car age = 18;
var info = `
	my name is ${name} my age is ${age}
`
Copy the code

Concatenation of strings

+ concatenated strings are not recommended in Python, but are recommended in JS.

let name = 'js';
let good = 'good! '
let name = 'js';

name +  good
"jsgood!"
Copy the code

Common string methods – A combination of Python string methods is recommended

// Returns the length of the string
let a = "hello world";
a.length;

// Remove whitespace on both sides of string -.trim()
let b = " jkajdk ";
b.trim();
// Cannot remove the specified content on both sides of the string
let c = "**fhak**"
c.trim("*");
"**fhak**"

TrimLeft () removes the left whitespace
var name = ' javascript ';
name.trimLeft() // "javascript "

TrimRight () removes the whitespace on the right
var name = 'javascript';
name.charAt(1); // javascript

//.concat(): concatenation, which is equivalent to apending content to the end of a string. It can be a numeric type, and is automatically converted to the same data type for operation
var name = 'javascript';
name.concat('hah') // "javascripthah";

// indexOf(subString): The position of an element in a string
var name = 'chloe';
name.indexOf("d");  // Element does not exist returns -1
-1
name.indexOf("o");  // If the query element is 1, return the index value of the element
3
name.indexOf("oe");  Return the index of the first element of a small string when the query element is consecutive and contained within the string
3

//.substring(from,to): Sliced by index, negative numbers cannot be recognized
var name = 'chloe';
name.substring(0, -1);  // Do not recognize negative numbers

// slice(start,end
var name = 'chloe';
name.slice(0, -1);  // "chlo"

//.tolowerCase () all lowercase letters
var name = '12asDF.@';
name.toLowerCase(); // "12asdf.@"

//.toupperCase () all uppercase letters
var name = '12asDF.@';
name.toUpperCase(); // "12ASDF.@"

//.split(delimiter,limit): Specifies the delimiter and the number of elements to obtain after splitting. No error is reported if the delimiter does not exist
var name = 'python|html|css|javascript';
// The number of elements is less than the total number of elements
name.split('|'.2);  // (2) ["pytohn", "html"]
// If the number of elements after partition is greater than the total number of elements, take all elements after partition
name.split('|'.10);  // (4) ["pytohn", "html", "css", "javascript"]
Copy the code

Boolean Boolean value

Booleans are all lowercase:

true
false
Copy the code

If Boolean is false:

0An empty stringnull undefined NaN
Copy the code

null & udefined

null:

To indicate that a value is empty, usually when specifying or emptying a variable. To indicate that a value is stored, but the value is empty, leaving an empty box.

var name = 'javascript';
var name = 'null';
Copy the code

undefined:

A function that declares a variable but does not initialize it. A function that does not return a value returns undefined.

conclusion

The article was first published on the wechat public account Program Yuan Xiaozhuang, and synchronized with nuggets and Zhihu.

The code word is not easy, reprint please explain the source, pass by the little friends of the lovely little finger point like and then go (╹▽╹)