javaScript基础--概念以及使用

Posted 2022-08-12 yuyu05-28

1、什么javascript？

为什么要学习？

处理网站动态特效

为后期课程打基础

什么是javascript？

是一个客户端的具有安全性的脚本语言。

js和h5 的关系 ：  都是向静态的元素动起来

h5+css3 偏向移动端

js偏向 pc端

 

2、js的历史背景

1995----布莱登.艾奇 liveScript 

改名  javascript 

javascript和java没有任何关系         

 

3、javascript的组成  掌握

ECMAScript  不是语言，是一个组织  欧洲计算机制造商协会 

BOM   浏览器对象模型

DOM  文档对象模型

 

4、js代码的实现  掌握

关闭代码提示 ：  alt + ？

1、js代码在script中实现

2、script标签可以出现在页面的任何位置   除了title内部

3、script 标签可以有多个

4、使用script标签的src属性连接外部的js文件

5、带有src属性的script标签内部的js代码是无效

 

5、js的输出语句  掌握

alert()  弹出警告框  阻塞代码执行  不用于项目中

document.write()   浏览器上打印结果

console.log()   控制台上输出   一般用于项目调试

 

.  前面的叫做对象

.  后面的有括号的单词叫做方法   没有括号的单词叫做属性

 

6、js的字面量（常量）

数值常量

    整数

        十进制整数   

        二进制  0  1

        八进制  0--7   以0开头   

        十六进制 0--9   a--f   以 0x开头   颜色值组成 ：　# 

    小数

字符常量

    用单引号和双引号括起来的一串字符    

        "a"   "ab"  ‘9‘   注意 ： 使用时引号嵌套的问题   "  ‘‘  "   或  ‘  "   " ‘

布尔值常量

    值有两个

    true  真 

    false 假

 

7、变量 

程序运行时  值有可能会发生变化的量

 

8、变量的定义和赋值

var 定义变量 

var 变量名 = 值 定义变量并赋值

var 变量名  定义变量没有赋值

 

9、标识符命名规范  重点

1、只能由字母、数字、下划线 或  $符号组成  （中文不提倡）

2、开头不能是数字

3、不能使用系统指定的关键字命名  

4、标识符尽量语义化   见名识意   

5、不要情绪化命名

6、驼峰式命名：

    小驼峰   qianFengJiaoYu

    大驼峰   QianFengJiaoYu

7、匈牙利命名:

    iScore  表示分数  是一个数值  i表示  int

    fScore  f表示float

    oBtn    o表示object

 

 

10、js输出语句的使用

1、输出变量时，变量一定不能加引号

2、输出字符串时，一定要加 引号

3、同时输出字符串和变量时，中间用+拼接

 

11、数据类型  重点记住

基本数据类型:

    数值类型 number

    字符类型 string

    布尔类型 Boolean

复合数据类型（引用数据类型）：

    对象类型  object

特殊数据类型：

    null   空

    undefined 未定义   一个变量定以后未赋值，结果为undefined

    function 函数

12、确定变量类型  扩展

typeof 

用法 ： 

typeof 变量 或 typeof(变量)

typeof的结果没有null，null本身就是一个对象  当typeof null 得到object 

typeof typeof 变量  结果都是字符串

 

13、运算符和表达式  重要

运算符 ： 运算符号

表达式 ： 常量、变量、一个由运算符连接的式子   

算术  赋值 关系  逻辑  条件

 

运算符有哪些？

表达式？？

表达式的值确定？？

 

14、算术运算符

运算符 ： 

    双目（二元）运算符 ： +   -   *   /  %(模)

    单目（一元）运算符 ：++  --

表达式 ：

    6+8

表达式的值:

            -   *   /  %(模)

            两边都是数值  正常计算

            两边有一侧是数字字符串，另一侧是数值，字符串会自动转成数值 正常计算

            两边都是纯数字字符串，字符串会自动转成数值 正常计算

            有一侧是非数字字符串，不能进行计算，结果是NaN

            不能正常计算的结果都是NaN     NaN：not  a  number 不是一个数

            NaN的typeof值  number ，NaN不等于任何数，包括自己

 

            %运算 ： 

            7%5      7%7      13%5    78%10   123%10    7%1     897%10    76843%10

            扩展 ：　　－７％５　－２　　７％（－５）　２　　－７％（－５）　－２

            任何数%10 结果都是 个位数          

            

＋运算符表达式的值:

            字符串和数字相加表示连接     2+5+"9" -7

            +  加法计算和 连接  ，连接优先

 

 

单目运算符 ： ++ 自增   -- 自减

注意 ： 要求操作数必须是变量

9++   --9  错误的

 

var i = 10;

i++ 或 ++i 写法正确  

 

i++和++i区别 ： 

相同点 ： 自增变量都会加1  或  减 1

不同点 ： 表达式的值不同

    如果++在变量前面， 先将自增变量的值自增1 ， 再将自增变量的值赋值给整个表达式  先自增后赋值

    如果++在后面, 先将自增变量的值赋值给整个表达式，再将自增变量的值自增1   先赋值后自增

    

var i = 1;

计算下面表达式的值    程序运行时，变量一直会发生变化

        i++  +   ++i    +    i

        1             3           3

    i   2             3

 

var i = 1;

    计算表达式的值

    --i  +  i++   +   ++i

    0        0               2

i   0        1              2

15、赋值运算符

运算符 ： =  

表达式 ： =左侧必须是 变量    x+y = 10 错误的      y = 10-x 正确

变量的值就是表达式的值

 

复合赋值运算符 ： 

   +=   -=   *=  /=     %= 

 x += 10;    等价于   x = x + 10;

16、关系运算符

运算符 ：  >  >=  <  <=  == 等于   ===全等   !=不等于   !== 不全等

表达式 ： 2>3     2==3    67 > 90

表达式的值 ： 

    关系表达式的值为布尔值    

    关系表达式成立 结果为true，不成立  结果为false 

    1、两侧都是数字，正常比较

    2、两侧都是字符串，正常比较   利用字符的ASCII码 值比较 ，a--97  A--65   0--48

    3、一侧是数值，另一侧是数字字符串，字符串会自动转成数值，正常比较

    4、不能正常比较的结果就是false

==  比较值是否相等

===  先比较类型，后比较值

 

17、逻辑运算符

运算符 ： 

    &&与   ||或    !非

表达式 ：一般参与逻辑运算的都是布尔值

    true && false  true || true   4>3 || 6 == 8

表达式的值 ： 

    &&与 ： 表示 且 

    &&符号两侧都为真（成立） ，结果才是真   true&&true 结果是true    false && true 结果是false   true && false 结果是false

     

    ||或 :

    ||符号两侧都为假（不成立），结果才是假   false || false 结果是false   false || true 结果是true    true || false 结果是true

 

    ! 非 ：

    非真就是假   !true 结果是false    

    非假就是真   !false 结果就是true

    

    例如：定义一个变量  值 大于等于10并且小于等于20

    var x = 11;

    console.log( x >= 10 && x <= 20 ); true

    定义一个变量，既能被2整除 又能被5整除

    var i = 10;

    console.log( i%2==0 && i%5 == 0 )

18、条件运算符

运算符 : ?  :  三目运算符   

表达式 ：    表达式1 ？  表达式2 :  表达式3      5>6 ? 7:8

表达式的值:

    根据表达式1的值确定整个表达式的值

    如果表达式1的值为真，取表达式2的做作为整个条件表达式的值

        如果表达式1的值为假，取表达式3的做作为整个条件表达式的值

    console.log( 3==9 ? 23:12 )  结果 12

    console.log( 3<=9 ? 23:12 )  结果 23

    console.log( 1 ? 23:12 )  结果 23   console.log( 0 ? 23:12 )  结果 12     console.log( "" ? 23:12 )  结果 12   console.log( null ? 23:12 )  结果 12

 

js中表示真假的几种情况：

1、true为真  false为假

2、所有数字为真，0为假

3、所有字符串为真, 空串 为假 ""

4、所有对象为真

5、所有函数为真

6、null 和 undefined 为假