4. JS foundation (1)

JS: Client-side scripting language, running in the client browser, it can be parsed without compiling. It can
enhance the interaction process between users and html pages, can control html elements, and give the page some dynamic effects.
1. Basic usage
syntax: 1. Combine with html:
internal JS: either in the head or the body (which will be executed earlier in the head), <script type=""text/javascript>, alert ("xxxxxx") is a reminder function
External JS: set a For external JS files, instead of using line, use <script src="xx.JS" type=""text/javascript (introduced file format) charset="utf-8">
JS // is a single-line comment, /**/ is a multi-line comment, do not use nested
data type (such as alert (++b) displayed in the web prompt):
original data type:
1, number: number
2, string: string
3, boolean: boolean Type
4, null: the representation of the object being empty
5. undefined: undefined (variable without assignment, evolved from null)
reference data type (object)
object
definition variable: use var or let
method 1. var variable = initialized value (Data type)
2. var variable; variable = initialization value (step-by-step execution)
alert (typeof num) can view the data type
unary operator: operator with only one operand, ++ (increment, ++a=a +1)-+ (positive sign)-(negative sign)
++ is different before and after the variable, var b=4
var c=++b
and var c=b++; 4 is the same, from right to left.
If the operand is not the type required by the operator, JS will automatically convert the
string to number, according to the literal value conversion, NaN is a value that is not a number.
Arithmetic operator: ±*/
assignment operator: = += -=
comparison operator: >< === (three equal signs means all equals)
by comparison Shows that ture or flase
are of different types, first perform type conversion and then compare
Logical operator: && ||! (And or not)
If true&&true is true
! 5 first convert 5 to boolean type! true, 0 or NaN in the Boolean conversion type is false, non-zero is true, the string is converted to Boolean, except the empty string is false, everything else is true, null and under fined are false, and the object is true when converted to Boolean
! ! 5Non-twice
ternary operator:
conditional expression? Expression 1: Expression 2
If the expression result is true, then execute expression 1, if it is false, execute expression 2
var a=1
var b=2
var c=a>b? 100: 200
is false at the end, and the execution display is 200

Flow control statement:
1. Judgment structure if statement
Single: if(){}
two: if(){}else{}, if the content of the parentheses is true, execute the first {}
multiple: if() {}else if(){}else if(){}else if(){}else if(){}else{} (An additional else is added here to prevent situations outside the scope)

2、选择结构  switch
switch(){case:。。case:。。case:。。}
如var  a=2
switch(a){case1:alert(1)case2:alert(2)case3:alert(3)}这种情况会显示所有选项
switch(a){case1:alert(1) break  case2:alert(2) break case3:alert(3) break  default:alert(‘111’)  break }
这种情况有 break 跳出,选到了就跳出,后面的default是为了防止出现范围外的情况,default不管放在哪都是最后一个执行

3、循环结构  for循环  while循环  do  while循环
while(条件表达式){循环体},循环体里加变量递增式子可以到一定数就结束循环
do {循环体} while(条件表达式)不管while是否满足,do至少执行一次,循环体里加变量递增式子可以到一定数就结束循环
for(初始化表达式;循环条件表达式;循环后的操作表达式){循环体}
如for(var c=0;c<3;c++){alert(‘aaa’)}
for循环嵌套
for(){for(){}}不断满足不断层层进入执行,这里会把里面的for全执行完再执行第二次的外面的for,
和python的for嵌套for一样结果执行次数会是两个for执行次数相乘
可以用来做九九乘法表,外层for控制’行‘,内层for控制’列‘,如:有时,内层for的循环条件表达式设b<=a,小于外层变量,受外层限制
document.write(a+“ * ”+b+“=”+(a*b)+“&nbsp”)写在循环体中,
document.write可以将小括号内容打印出来,alert是提示,这里的是另一种函数,这里的“&nbsp”作字符串但是有特殊字符会被JS解析成空格
小括号的在这属于字符串的拼接,为了打印九九乘法表,为了换行可以在外层for的{加一个document.write(“<br>”)}达到让内层for换行的效果

box.onmouseenter mouse-in event (the event that changes when the mouse is moved into the box)
box.οnmοuseenter=function(){box.innerText=“xxxx”}
box.onmouseleave mouse-out event
box.οnmοuseleave=function(){ box.innerText="xxxx"}
btn.onclick mouse setting event (whatever the user sets will be displayed on the user's page)
btn.οnclick=function(){var a=input1[0].value;
var b= input1[1].value;
box.setAttribute("style", a+":"+b (here is the attribute in style: attribute value))} where 0 and 1 are the index
var box for extracting attributes and attribute values =document.getElementsByTagName("div")[0] followed by 0 means starting from the first one, and the mouse cursor draws in and draws out what to display

Alert is to print data through the pop-up box
console.log is to print data through the console

Guess you like

Origin blog.csdn.net/qwe863226687/article/details/114015760