11.15 JavaScript总结

昨日回顾：

1.只有块级标签才能设置长宽

2.文字属性：font-family字体\font-size字体大小\font-weight字体粗细

3.文本属性：text-decoration:可以去掉a标签下划线

4.颜色：rgb(三参数)、rgba(四参数，最后一个是颜色透明度)

5.背景属性：

background-color、background-image背景图片

简写：background：颜色、图片地址、是否平铺、图片位置

固定图片：background-attachment：fixed

6.边框border

boder-style 边框样式：solid dotted dashed...
border-width 边框粗细
border-color 四种颜色参数
border-top\border-bottom\border-left\border-right：只调节一个边框
border-radius：画圆 50%

7.display**：

display:none \ visibility:hidden

8.盒子模型：margin（外边距）：标签与标签之间的距离 margin ：0 auto;左右居中，上下由前面参数调。

9.float：脱离正常文档流

10.溢出 overflow 圆形头像示例

11.定位：所有标签默认是静态的，没有定位

relative：相对标签原来的位置
absolute：相对于已经定位过的父标签做绝对定位
fixed：固定在浏览器窗口一个位置始终不动

12.z-index：z轴值越大，越在屏幕最上面

作业：布局博客
- 搭建页面顺序：先写html骨架，然后CSS
- 去掉ul默认的点：list-style-type:none;
- 盒子阴影：box-shadow：5px,5px,5px,10px,rgba(四参数)

JavaScript（前端编程语言，有逻辑）

node.js支持前端js代码，跑在后端服务器上

js java半毛钱关系都没有

1.注释：

//单行注释
/*

多行注释1

多行注释2

*/

2.语法：

script（脚本）标签内部直接书写，推荐写body最下面
通过script标签src，引入外部js文件

3.变量

js中声明变量需要使用关键字：

var 声明的是全局有效（在哪声明都是全局）

var i=5;
undefined
i
5
for(var i=0;i<10;i++){
    console.log(i)}
VM238:2 0
VM238:2 1
VM238:2 2
VM238:2 3
VM238:2 4
VM238:2 5
VM238:2 6
VM238:2 7
VM238:2 8
VM238:2 9
undefined
#var 局部影响全局

let 可以只在局部有效（只在函数内部有效）

let n=5;
undefined
for(let n=0;n<10;n++){
    console.log(n)}
VM391:2 0
VM391:2 1
VM391:2 2
VM391:2 3
VM391:2 4
VM391:2 5
VM391:2 6
VM391:2 7
VM391:2 8
VM391:2 9
undefined
#let 局部声明那么只在局部有效，不会影响全局

例如：var name='jdsjs' let name='jdsjs'

js中变量的命名规范：
- 数字字母下划线 $
- 不能用关键字
- 推荐使用驼峰体命名
Python、c++推荐使用下划线，js、Java推荐使用驼峰体
js代码默认以分号作为结束符，不写也不会报错。
var let 区别：var在局部定义会影响全局，let 在哪定义就只影响哪，互不影响
关键字const定义真正的常量，定义后不能修改

4.js数据类型：

数值类型
- （动态类型）Number(int float，不区分整型和浮点型)
- 判断数据类型 typeof，它是一个一元运算符；NaN 也是数值类型，表示的意思是不是一个数字(not a number)。
- parseInt/parseFloat转成整型/浮点型，只要里面有数字就能转，如果字符串里什么数字都没有只要字符，会报NaN。
```
var x1='123'
undefined
parseInt(x1)
123
var x2='123abc'
undefined
parseInt(x2)
123
#只要字符串里面有数字 就可以转成整型
var x3='sjakdhdd'
undefined
parseInt(x3)
NaN
#当字符串里什么数字都没有，只有字符，那么不会报错，报NaN
var x1='123.23.23.4.545'
undefined
parseFloat(x1)
123.23
parseInt(x1)
123
```
字符类型 string：
- 字符串的拼接：推荐使用+号
```
var name='engjd'
undefined
var indo='skdhh'
undefined
name + indo
"engjdskdhh"
```
- 字符串.ength（长度）
- .trim() 移除首位空白。.trimLeft()移除左边空白,.trimRight()移除右边空白，不能移除特殊字符。
```
var name1='eejnd ksj'
undefined
name1.length
9
var name2='   jddd  ksjdjd  '
undefined
name2.trim()
"jddd  ksjdjd"
```
- .charAt(数字)：返回第几个字符，按照索引取字符。
- .indexof('字符')：没有就是-1，有就返回在第几位，按照字符取索引。
- .concat(value,value1)：拼接
- substring(1,4)：索引切片，不识别负数；slice(1,4)，识别负数，slice(2)，默认从当前往后取
- .split切割
```
name1.charAt(0)
"e"
name1.indexOf('j')
2
name.concat('ajshsh ssjs')
"engjdajshsh ssjs"
name1.substring(1,4)
"ejn"
name1.slice(0,-2)
"eejnd k"
name1.slice(2)   #不要该索引前面的值
"jnd ksj"
```

自定义对象 object ：

数组[]--->索引取值、length、尾部追加数据.push()、删除尾部元素.pop、.shift()删除头部元素、.splice(1,2,[11,22,33])起始位删个数删完要加的数组/.forEach()将数组的每个元素传递给回调函数

var l1=[1,2,3,4,5,6]
undefined
typeof l1
"object"
l1[0]
1
l1.length
6
l1.push(666)
7
l1
(6) [1, 2, 3, 4, 5, 6]
l2
(6) [11, 22, 33, 44, 55, 66]
l2.splice(1,2)  #第一个参数是起始索引位，第二个参数是删除的个数
(2) [22, 33]
l2
(4) [11, 44, 55, 66]
l2.splice(1,1,[111,222,333])
[44]
l2
(4) [11, Array(3), 55, 66]
l2.splice(1,2,88,99,77)
(2) [Array(3), 55]
l2
(5) [11, 88, 99, 77, 66]  #删后再加

自定义对象{}--->js中所有事物都是对象，也是面向对象编程，定义对象的时候关键字是new

var l2=[11,22,33,44,55,66]
undefined
l2.forEach(function(index){
    console.log(index)})
VM2302:2 11
VM2302:2 22
VM2302:2 33
VM2302:2 44
VM2302:2 55
VM2302:2 66
undefined
#for循环取出每一个元素交给函数处理
l2.forEach(function(index,obj){
    console.log(index,obj)})
VM2334:2 11 0
VM2334:2 22 1
VM2334:2 33 2
VM2334:2 44 3
VM2334:2 55 4
VM2334:2 66 5
undefined
#两个参数 一个是元素 一个是索引

模板字符串：${value} value被定义过，使用方法如同Python中的占位符

var name4='ksjsk';
var age=19
undefined
var res6=`
my name is ${name4} my age is ${age}
`
undefined
res6
"
my name is ksjsk my age is 19
"
#需要提前定义出变量，否则找不到会报错

布尔值 boolean：true false（小写）

underfined：没有被定义

null 手动赋值为null，对象类型
undefined 只声明变量没有赋值

var x=10;
var res1=x++;   #先赋值后自增
var res2=++x;   #先自增后赋值
undefined
res1
10
res2
12
var x1=5;
var x2='5';
undefined
x1==x2    #弱等于 内部自动转换成相同数据类型
true
x1===x2    #不想转用三个=号 强等于
false

5.条件判断

if(条件)

var age=18
undefined
if(age>18){
    console.log('小姐姐你好')
}else{
console.log('小妹妹吃糖不')
}
VM3183:4 小妹妹吃糖不
undefined

var age=28
undefined
if(age>30){
    console.log('你是个好人')
}else if(age>24){
console.log('考虑一下')
}else{
    console.log('哈哈哈')}
VM3320:4 考虑一下

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句

var today=2
undefined
switch (today){
    case 0:
    console.log('养生迪');
    break
    case 1:
    console.log('泡妞');
    break
    case 2:
    console.log('炸街');
    break
    case 3:
    console.log('老实人上线：学习');
    break
}
VM3658:9 炸街
undefined

var l=[11,22,33,44,55,66]
undefined
for(let i=0;i<l.length;i++){
console.log(l[i])}
 11
 22
 33
 44
 55
 66
undefined

while循环

var i=0;
undefined
while(i<10){
    console.log(i);
    i++;}

三元运算符

x=1
y=2
res=x>y ? 10:20
20

6.函数

function f2(a,b){
    if(arguments.length==2){    #内置的arguments对象接收用户传入的所有参数
        console.log(a,b)
    }else if(arguments.length>2)
    {console.log('参数传多了')
    }else{
        console.log('参数传少了')
    }}
undefined
f2(1,2)
VM4785:3 1 2
undefined
f2(1)
VM4785:7 参数传少了
undefined
f2(1,2,4)
VM4785:5 参数传多了
undefined

函数的全局和局部变量
- 局部：在js函数内部声明的变量（使用var)是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
- 全局：在函数外部声明的变量是全局变量，网页上所有的脚本和函数都能访问它。
- 创建对象：

var myObject=new Object();
undefined
myObject.username='jason'
"jason"
myObject.password=123
123
myObject.age=18
18
myObject
{username: "jason", password: 123, age: 18}

var d1=new Date();
console.log(d1.toLocaleString());
VM5531:1 2019/11/15 下午10:17:15
undefined
d1
Fri Nov 15 2019 22:17:15 GMT+0800 (中国标准时间)

json对象：

var o1={'username':'jason','password':'123'}
undefined
JSON.stringify(o1)    #json.dumps
"{"username":"jason","password":"123"}"
var res=JSON.stringify(o1)
undefined
res
"{"username":"jason","password":"123"}" 
var res7=JSON.parse(res)   #json.loads
undefined
res7
{username: "jason", password: "123"}

7.Reg正则

#定义正则表达式两种方式：
var reg1=new Reg("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2=/^[a-zA-Z][a-zA-Z0-9]{5,11}$/;   #建议使用
reg2.test()
true
reg2.test('undefined')
true


var reg2=/^[a-zA-Z][a-zA-Z0-9]{5,11}$/g;   #全局匹配，有一个lastIndex属性
var name10='iewnondsb'
reg2.lastIndex
0
reg2.test(name10)
true
reg2.lastIndex
9
reg2.test(name10)
false

var reg3=/undefined/
undefined
reg3.test()
true

posted on 2019-11-15 22:58 wtfss 阅读(153) 评论(0) 收藏举报