day33-总结（css部分+js）

css其他属性

文字相关

p {
    /*1.文字大小*/
    font-size: 50px;
    
    /*2.字体颜色*/
    color: blueviolet;
    
    /*3.设置字体名*/
    font-family: "book antiqua";
    
    /*4.设置字体粗细*/
    /*取值100-900，normal，bold，bolder*/
    font-weight: 900;
    
    /*5.文字倾斜*/
    font-style: italic;
    
    /*6.内容的对齐方式*/
    /*center，left，right*/
    text-align: center;
    background-color: yellow;
    
    /*7.设置行高*/
    /*文字一行的高度
     * （当文字只有一行的时候设置行高和标签的高度一样，可以让文字垂直居中）*/
    height: 500px;
    line-height: 200px;
    
    /*8.文字修饰*/
    /*none：去掉文字修饰
      underline：添加下划线
      line-through：添加删除线
      overline：添加上划线*/
     text-decoration: underline;
     
    /*9.首行缩进
      注意单位是em -- 空格*/
    text-indent: 4em;
    
    /*10.字间距*/
    letter-spacing: 1px;
}

列表相关

li {
    background-color: saddlebrown;  
}
ul {
    background-color: royalblue;
    
    /*1.设置符号样式*/
    /*disc实心圆/circle（空心圆）/square（实心方块）/none（去掉列表符号）*/
    list-style-type: disc;
    
    /*2.设置图片的符号*/
    list-style-image: url(img/icon.ico);
    
    /*3.设置符号的位置*/
    /*inside内  outside外*/
    list-style-position: outside;
}

背景相关

#d1 {
    height: 300px;
    /*1.背景图
     如果背景图大于盒子的大小，背景图能显示多少就显示多少
     如果背景图小于盒子的大小，就会平铺（重复显示）
     */
    background-image: url(img/bg.png);
    
    /*2.设置是否平铺*/
    background-repeat: no-repeat;
    
    /*3.设置背景图位置*/
    /*background-position: x y
      x：left/center/right/坐标值
      y: top/center/bottom/坐标值*/
    background-position: 100px bottom;
    
    /*4.同时设值
     background：图片地址  是否重复  x y
     background：图片地址  是否重复  x y 背景颜色*/
}

JavaScript

js基础语法

• 1. js中的注释
     // 这是单行注释
     /**/ 这是多行注释

• 2.语句
  现版本js语句结束不用分号
  但是一行写多条语句需要使用分号隔开
  在控制台中打印括号中的内容，功能和python中的print

console.log('hello world')

• 3.js没有缩进问题，用{}表示一个块

• 4.基本数据类型
  Number(所有的数字)
  String(字符串)
  Boolean(布尔)
  Array(数组)
  Object(对象)
  Function(函数)

• 5.字面量

• 6.标识符
  使用标识符来命名
  a.由字母，数字，下划线和$组成，数字不能开头
  b.不能是关键字
  c.大小写敏感
  建议规范：顾名思义

var huu9_$

变量的声明

• 1.语法
  var 变量名；
  var 变量名 = 初值；
  说明:var是关键字；
  变量名：标识符，不能随意使用_或者$开头；驼峰式命名规则(第一个单词首字母小写，后面每个单词的首字母大写)

var userName;
//给变量赋值
userName = 'Wang';
console.log(userName)

//同时声明多个变量
var name, age, sex;
var name1 = 'sss', age1 = 18, sex1 = 'm';

一个变量可以存储任意类型的值；声明变量没有赋值默认值为undefined

js中的运算符

• 1.数学运算符都和数学运算相同
  ++，--(单目运算符)

var a1 = 10
var b1 = 10
var c1 = a1++ // c1=10 a1=11 
var c2 = --b1 // c2=9 c2=9

注意：++/--写到后面的时候，先赋值，再自加/自减
++/--写到前面的时候，先自加/自减，再赋值

• 2.比较运算符:
  a. > < ==(相等) != >= <=
  b. ===(完全等于) !== >== <==
  结果都是布尔值
  ==：判断值是否相等 / ===：判断是否完全相等

console.log(5=='5') // true
console.log(5==='5') // false

• 3.逻辑运算符(&&与 ||或 !非)

• 4.赋值运算符：=，+=，-=，*=，/=，%=
  赋值运算符左变量，右表达式

• 5.三目运算符 ？:
  a.格式:
  条件语句 ? 值1 : 值2
  b.结果:
  判断条件语句的结果是否是true,如果是true,那么表达式的结果就是值1,否则值2

var b = 10 < 20 ? 10 : 20  // 10

• 6.优先级同python，()优先级最高

js的分支结构

js中的分支结构有两种：if语句，switch语句

• 1.if语句
  a.if(条件语句){满足条件要执行的代码块}else{语句块}

var age = 18
if(age>=18){
    console.log('成年')
}else{
    console.log('未成年')
}

b.if-else if-else(相对于python的if-elif-else)

if(age<18){
    console.log('未成年')
}else if(age<40){
    console.log('成年')
}else{
    console.log('老年')
}

• 2.switch语句
  switch(变量){
  case 值1:
  语句1;
  break;
  case 值2:
  语句2;
  break;
  ...
  default:
  语句3;
  break;
  }
  执行过程：使用变量的值依次和后边每个case后面的值进行判断，看是否相等
  如果相等就执行那个case后面对应的语句。如果前面每个case后面的值都和变量的值不相等，就执行default后面的语句

var number = 10;
switch (number){
    case 1:
        console.log('F');
        break;
    case 4:
        console.log('D');
        break;
    case 10:
        console.log('A+');
        break;
    default:
        break;
}

js的循环结构

js中的循环分为for循环和while循环

• 1.for循环
  a.for-in(同python的for)

var arr1 = [1,2,'abc']
for(x in arr1){
    console.log(arr1[x]) // x为下标
}

var obj1 = {name:'正则',age:20}
for(y in obj1){
    console.log(y) // y为属性名
    console.log(obj1[y])
}

var str1 = 'asdfgh'
for(z in str1){
    console.log(z) // z为下标
    console.log(str1[z])
}

b.for(表达式1;表达式2;表达式3){循环体}
执行过程：表达式1为一开始的执行，
表达式2为循环继续的条件，
表达式3为循环体执行后执行的语句

var sum=0
for(var x=1;x<=100;x++){
    sum += x;
}
console.log(sum);

• 2.while循环
  a.while(条件语句){循环体}

var sum1 = 0
var i = 1
while(i <= 100){
    sum1 += i;
    i++;
}
console.log(sum1)

b.do-while：do{循环体}while(条件语句);
执行过程：执行循环体后，判断条件语句，成立继续不成立结束

var sum2 = 0
var p = 1
do{
    sum2 += p;
    p++;
}while(p<=100);
console.log(sum2)

js中的函数

• 1.函数的声明
  function 函数名(参数列表){
  函数体
  }
  a.function-关键字
  b.函数名-驼峰式：顾名思义
  c.参数：参数可以有默认值，有默认值的参数写后面。调用函数传参，按实参位置传参。保证每个参数有值(默认值的直接设置ES6支持)
  d.函数体：实现函数的功能，只有在调用的时候才执行

function sum1(num1, num2=1){
    return num1 + num2
}
console.log(sum1(10, 3))
console.log(sum1(10))

注：函数没有return时，返回值是undefined

• 2.函数的调用(同python)
• 3.作用域
  全局变量：函数外声明 (声明到文件结束)
  局部变量：函数内声明 (声明到函数结束)

js的数据类型

数字，字符串，布尔，列表，对象

• 1.数字：包含整数和小数

var num1 = 10
var num2 = new Number()
console.log(num2+10)

• 2.字符串：''或者""括起来的字符集
  a.转义字符和python一样
  b.字符编码是unicode编码

var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\'

c.字符串长度：字符串.length

console.log(str1.length)

d.获取单个字符：字符串[下标]
下标：1.范围是0~长度-1 2.越界返回undefined 3.不能切片

console.log(str1[1])

e.运算可+不能*
字符串可以和其他任何数据进行+操作，效果自动转化为字符串

console.log('abc'+100)
console.log('abc'*3)
console.log('213'+'345')
console.log('23'+354)

• 3.对象，构造方法

function Person(name,age,sex){
    this.name = name
    this.age = age
    this.sex = sex
}
var p1 = new Person()
p1.name = 'asd'
p1.age = 23
p1.sex = 'm'
console.log(p1)