欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js随堂初体验(一)

程序员文章站 2022-04-12 13:00:22
Js初体验(-) 1 js的基础知识 A web三大标准:1 html:结构标准 2 css:表现标准 3 javascript:行为标准 B js三种书写方式:1 行内js:onclick = “alert=(‘AAAAA’)” 2 内嵌js:在html页面中通过一对script标签,js代码写在 ......

js初体验(-)

1 js的基础知识

 

a web三大标准:1 html:结构标准    2 css:表现标准  3 javascript:行为标准

 

b js三种书写方式:1 行内js:onclick = “alert=(‘aaaaa’)”

                              2 内嵌js:在html页面中通过一对script标签,js代码写在script标签中

                              3 外联js:在script标签中用src属性来引入外部的js文件,但是在这堆script标签中不能写js代码,他的作用只是只是引入外联的js代码

 

c js初接触的简单五句话:1 alert(“”)  弹出一个警示框

                                           2 console.log(“”) 在浏览器console面板显示内容(多用来检查或者找bug)

                                           3 document.write(“” ) 在页面中显示内容,在js中只要是用双引号或者是单引号引起来的内容都是字符串

                                           4 prompt(“”)  弹出一个文本框,提示用户输入信息

                                           5 confirm(“”)  弹出一个选择框

 

d js的变量:

1直接变量:直接拿过来使用的数据值,  直接量有:字符串,数字

 

                      2 变量  

1 变量的声明:关键词:var 在内存开辟一片空间 如 var name = ‘jack’

                                     2 变量的赋值:name = ‘’  在空间存入数据

                                     3 变量的定义:包含变量的声明和赋值,推荐使用变量的定义  注意: = 号在js中是赋值符

 

                       3 变量的命名规则:

                                       1.变量名必须以字母、下划线_、$开头

2.变量的名字中包含数字,字母(a-z  a-z) ,_ ,$

3.js中变量的名字严格区分大小写

4.变量的名称不能使用js中的关键字和保留字

5.不能以数字开头

建议:变量的命名尽可能有意义,命名使用驼峰命名法

 

                      4 +的作用:

                                          1.连接符的作用  只要加号的一边是字符串,那么加号就是连接符的作用

2.数学运算符的作用  加号两边都是数字,那么加号就是运算符的作用

 

e 转义符的使用:

                                          转义符:用来表示一些特殊符号,反斜杠\

                                          常用的转义:

                                                        常用:

\n:换行

\t:缩进

\b:退格

 

f js’中的数据类型:

                                          js中的数据类型:js是动态弱类型的脚本语言

 

                                          简单的数据类型:

                                                                      字符串:string

数字类型;number

空:null

空:undefined   表示未定义

boolean:布尔类型  true flase

                                  复杂数据类型:数组,函数,对象,object。。。。。

                                                       

 

g js中数据类型的检测:typeof  console.log(typeof 要检测的数据)

                                     注意:只要用户输入的内容都是字符串类型的数据

 

h js中的算术运算符:

1 二元运算符  需要两个操作数参与的运算,+ - * / %(取余)

                                          2 一元运算符  

1 ++:分为前++和后++     前++:先在原来的操作数上先+1,然后再参与运算

                                             后++:先拿原来的操作数,参与运算,然后再+1

2 --:分为前--和后--         前--:现在原来的操作数上先-1,然后再参与运算

                                             后--:先拿原来的操作数,参与运算,然后再-1

                                          3 复合运算符:+= -= *=  /= %=

 

i js中的关系表达式以及逻辑运算符:1关系表达式  用关系运算符链接的表达式就是关系表达式

                                                               注意:关系表达式的结果都是一个布尔类型的值

                                                       

                                                          2 逻辑运算符: 逻辑与:&&  逻辑或:||  逻辑非:!

 

 

 

2 js数据类型的转换

 

a 数据类型的转换:

                     1 数据类型转换成number类型

1 隐式转换:通过 + - * / %    将undefined转换成成number类型得到的结果是nan,nan表示:not a number

不是一个数字。nan也是number类型中的一个值。他是用来表示数字的一种非正常状

态   在js中对不能转换成number类型的值  都是nan 用来表示数字的一种非正常

状态,为了不让程序报错、

                                                                                                                   注意:+号要写在前面

                                                                      2 显式转换(强制类型转换)number();parseint();parsefloat()

 

                                                                                                                       number()转换的特点:

1.如果是数字类型的字符串都能转换成number类型

2.对于true、false、null都能正常转换成数字类型

3.undefined转换成number类型都不能正常转换成数字类型,得到结果是nan

4.对不能转换成number类型都得结果都是nan。

 

                                                                                                                       对于parseint()转number类型的特点:

1.对于数字类型的字符串都能转换成number类型

2.对于null、true、false、undefined不能正常转换成number类型,最后得到的都是nan

3.对于带有数字的字符串,如果前面是数字,使用parseint转换的时候只转换前面的数字部分,对于后面不能转换的部分直接丢弃;如果是字母在前面  直接全部不能转换,的到的是nan

4.对于是小数的,只取前面的整数部分,后面的都丢弃  

注意:取整数部分不是四舍五入,而是直接取整数部分

parsefloat()转换成number类型的时候和parseint是一样的,只不过对于小数,parsefloat能取到小数部分

     

           2 将数据转换成string类型

                                  1 隐式转换 var num = 20;

var str = num + "";

 

                                  2 显式转换 tostring(); string();

                                                                   var num = 100;

var res = num.tostring() ;可以在tostring()在小括号中加入一个参数值。可以将其转成对应的进制的值

注意:null和undefined不能使用tostring()方法,转成数据类型

string()可以直接将null和undefined转成string     console.log(string(null/undefine))

 

           3 数据转换成boolean类型

                     

                                  1 隐式转换   !!  var num = 100;

var res = !!num;

注意:能转换成false的有 :0,null,undefined, "" ,nan;

                                  2 显式转换   boolean()    

                                                   非0的数转换成布尔类型都是true

 

 

b 程序的结构:

                 1 顺序结构:程序从上外下按顺序执行

 

                 2 选择结构:1 if结构     if(判断条件){    判断条件一般都是关系表达式或者逻辑表达式

执行代码}

执行过程:当程序运行到if的时候,先判断小括号中的判断条件,如果判断条件成立(返回true),那么执行后面大括号中的执行代码,如果条件不成立(返回false),那么直接跳过大括号,执行下面的代码;

                                      

                                   2 if-else结构        if(判断条件){

执行代码1}else{执行代码2

}

执行过程:当程序执行到if的时候,先判断小括号中的判断条件,如果判断条件成立(返回一个true),这个时候,执行后面大括号中的执行条件1,如果判断条件不成立(返回false),这个时候执行else后面的大括号中的执行代码2

 

                 3 分支结构:    1    if-else if          if(判断语句){

执行语句1}else if(判断语句2){

执行语句2}else{执行语句3

}

 

                                                        执行过程:当程序运行if的时候,先判断判断语句

1,如果成立,则执行语句1,如果不成立,那么继续判断判断条件

2,如果成立,则执行执行语句2,如果不成立继续判断判断条件

3,以此类推

                                  2 switch    switch(变量或者固定的值){

case 条件1:

执行语句1

break;

case 条件2:

执行语句2

break;

.....

default

   执行语句。。。

   break;

}

执行过程:当程序运行到switch的时候,先和switch后面小括号的值,和case中的条件去匹配,匹配上哪一个case就执行哪一个case下面的执行语句。如果都没有匹配上,那么久执行default中的语句

 

                                  注意:if-else if和switch-case 区别      if-else if 一般使用来区间判断

                                                                              switch-case 一般使用定值判断

                 4 循环结构

                                  1 while

                                       while(循环条件){循环条件一般都是关系表达式或者是循环表达式或者是布尔类型的值

      循环体;(重复中的这件事件)

      改变循环的条件

}

 

执行过程:当程序运行到while的时候,先判断循环条件,如果循环条件返回一个true,则执行大括号中的循环体,如果循环条件是false,直接跳过大括号,循环体不会被执行

 

                                  2 do while

                                       do{

      循环体;

      改变循环的条件;

}while(循环条件)

 

                                  3 for

                                       for(表达式1;表达式2;表达式3){

      循环体

}

表达式1:一般都是用来给变量赋初值

表达式2:循环判断条件   一般都是关系表达式

表达式3:改变循环条件

 

 

      c 三元表达式:

表达式1? 表达式2: 表达式3;表达式1:一般都是关系表达式或者是逻辑表达式或者是boolean类型的值

                      gender == '男' ? console.log(1):console.log(0);

      d 短路运算:     短路运算符:&&  ||

                                   &&:短路运算:找假    &&两边的值,先判断第一个,如果第一个值是true(会默认有一个隐式转换)则直接返回第二个

值,不管第二个值是什么。如果第一个值转换后是flase。直接返回第一个值,不需要再去理第二个值是什么

                                   ||短路运算符:找真 如果第一个值转换成布尔类型之后,如果是true,直接返回第一个值,不需要理第二个值是什么。

如果第一个值转换之后是false,那么直接返回第二个值。

                      注意:

                                  1.如果两边都是关系表达式或者逻辑表达式或者是布尔类型的值得时候,&&和||就是起到逻辑运算符的作用

                                 2.如果&&和||两边是固定的值或者是变量或者是对象,这个时候&&就是起到短路运算的作用

 

e 关于breakcontinue的使用:

                                             1 break的使用 终止当前整个循环,循环不再继续执行,并且break后面的代码不执行

                                             2 continue      用来终止当次循环,进入下一次循环,如果循环中遇到continue跳出当次循环,

continue后面的代码都不在执行

                                            

                                             3 continue和break区别:

continue和break的相同点:都可以终止代码,这两个后面的代码都不执行

(对于当前的循环)

                                                                         continue和break的区别

1 continue终止当次循环,循环还在继续,进入下一次循环

2 break直接终止整个循环,循环结束不再继续进行