day25-js基础一

js语言简介

• 1.js是javaScript的缩写，是一个脚本语言。专门用来负责网页上的行为(可以直接写到网页中)。
• 2.在哪儿写js代码
  a.可以写在script标签中(理论上script标签可以放到html文件中的任何位置，实际开发的时候一般放在head或者body中)
  b.写到标签的事件属性中(例如：onclick)
  c.写到外部的js文件中(.js)
• 3.js在网页中能做什么事情
  a.在网页的不同位置插入html代码
  b.修改某个标签的内容
  c.修改标签的样式

01-js基础语法

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

• 2.语句
  一条语句结束需要加分号(现在的js版本也可以不用写)
  一行写多条语句必须使用分号隔开

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

• 4.基本数据类型
  Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)---列表、Object(对象)、字典、null\undefined

在控制台中打印括号中的内容，功能和python中的print一样

console.log('hello python');
console.log('hello python');

• 5.字面量
  a.数字字面量

89;
100;
10.34;
3e8;

b.字符串字面量

'abc';
"abc";

c.布尔字面量

true;
false;

d.数组字面量

[1,2,'xzq',true];
[];

e.对象的字面量(对象的key值又是属性，可以不用加引号)

var dict={a:'xzq', b:'cj'};

• 6.标识符
  使用标识符来命名
  a.由字母、数字、_和$组成、数字不能开头
  var xzq;
  b.不能是关键字
  c.大小写敏感，y和Y不一样
  d.规范：1.见名知意

02-变量的声明

在js中可以通过声明变量来保存数据

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

var userName;
userName = 'xzq';
console.log(userName);

同时声明多个变量

var name,age,sex;
var name1='abc',age1=18,sex;

一个变量可以存储任意类型 的值：声明变量的时候，变量没有赋值，默认是undefined

03-运算符

• 1.数学运算符：+ - * / % ++ --
  a.+ - *和数学中的求和、求差、求积以及取余是一样的

var a = 10+20;
var b = 20-10;
var c = 10*20;
var d = 7%2;

b./和数学中的除一样

var e = 5/2
console.log(e)

c.++ 和 --(单目运算符)
语法：变量++/变量-- ； ++变量/--变量

++：自加1
 --：自减1


var a1 = 10
var b1 = 10
a1++
++b1
console.log(a1,b1)

a1--
--b1

var c1 = a1++  //++/--写到后面的时候，先赋值，再自加/自减
var c2 = ++b1   //++/--写到前面的时候，先自加/自减，再赋值
console.log(c1,c2)

• 2.比较运算符：>,<,==(相等),!=,>=,<=,===,!==(完全相等),<==,>==
  结果都是布尔值

console.log(10>20)
console.log(10<20)

==:判断值是否相等

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

===：判断值和类型是否相等

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

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

• 3.逻辑运算符：&&(与)，||(或)，！(非)

console.log('与',true && true,true && false)
console.log('或',true || false,false && false)
console.log('非',!true,!false)

• 4.赋值运算符： = ，+= ， -= ，*=，/=，%=
  赋值运算符的左边必须是变量,和python的语法是一样的

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

var b = 10>20 ? 10:20;
console.log(b)

• 6.运算符的优先级和python基本一样，可以通过括号来改变运算顺序
  优先级从低到高：赋值运算符<逻辑运算符<比较运算符<算术运算符

04-分支结构

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

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

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

b.if(条件){语句块1}else{语句块2}

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

c.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 score = 10;
switch (score){
    case 1:
        console.log('F');
        break;
    case 4:
        console.log('D');
        break;
    case 10:
        console.log('A+');
        break;
    default:
        console.log('其他');
        break;
}
 score = 8;
switch(score){
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
    console.log('不及格');
    break;
    case 6:
    case 7:
    console.log('及格');
    break;
    case 8:
    case 9:
    console.log('良好');//switch中的break，可以让switch直接结束
    break;
    case 10:
    console.log('优秀');
    default:
    console.log('其他');
    break;
}

05-循环结构

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

• 1.for循环
  a.for - in(和python中的for循环一样)
  for(变量 in 数组/对象){函数体}

var arr1 = [1,2,'abc']
***x取的是下标
for(var x in arr1){
    console.log(arr1[x])
}

var obj1 = {name:'张三',age:30}
***key拿到的是属性名
 for (var key in obj1) {
    console.log(key,obj1[key])  
 }

b.for(表达式1；表达式2；表达式3){循环体}
执行过程：先执行表达式1，然后再判断表达式2的结果是否是true，如果是true就执行循环体，执行完循环体再执行表达式3；执行完表达式3，再判断表达式的结果是否是true，如果是true又执行循环体，执行完循环体再执行表达式3，以此类推直到表达式2的结果为false，循环结束

计算1+2+3+...+100
var sum = 0
for (var i = 1;i < 101;i++) {
    sum += i
}
console.log(sum)

• 2.while循环
  a.while(条件语句){循环体} ---和python一样

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

do-while循环：do{循环体}while(条件语句)；
执行过程:先执行循环体，然后判断条件是否成立，如果成立，再执行循环体，依次类推，直到条件不不成立，循环结束

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

• 3.break和continue(和python一样)
  break是跳出整个循环
  continue是跳出当前循环

06-函数

• 1.函数的声明
  <> function 函数名(参数列表){函数体}
  <>function - 关键字
  <>函数名 - 驼峰式；见名知意
  <>参数：参数可以有默认值，有默认值的参数要写在后面，调用函数传参的时候，是按实参的位置来传参。
  <>保证每个参数都有值
  <>函数体：实现函数体的功能，只有在调用的时候才执行

function sum(num1,num2){
    console.log('求两个数的和')
    return num1+num2
}
console.log(sum(10,20))

***函数没有返回值的时候，函数的返回值是undefined
function func1(){
    console.log('我是函数1')
}
console.log(func1())

• 2.函数的调用
  函数名(实参列表)
  调用过程和python一样

• 3.作用域
  <>全局变量:声明在函数外面的变量(从变量声明到文件结束)
  <>局部变量:声明在函数里面的变量(从变量声明到函数结束；函数的参数也是局部变量)

***aaa就是全局变量
var aaa = 10
function func2(){
    ***bb就是局部变量
    var bbb = 100
    console.log(bbb)
    
    ***函数中可以修改全局变量的值
    aaa = 200
}

func2()
console.log(aaa)

***可以将函数作为变量
var a = func2
a()

• 个数不定参数，js不支持

07-数据类型

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

• 1.数字：包含整数和小数(支持科学计数)

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

2.字符串
a.''和“”括起来的字符集
b.转义字符(和python一样)
c.字符编码是Unicode编码

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

e.获取字符串长度：字符串.length

console.log(str1.length)

f.获取单个字符：字符串[下标]
下标：1.范围是0~~长度-1 2.如果越界，不报错，但是结果是undefined
js中的字符串不能切片
console.log(str1[1])

g.运算符
//js中字符串只支持+操作，不支持*
//字符串1 + 字符串2 --拼接两个字符串
//js中字符串可以和其他任何数据进行+操作，其效果都是字符串拼接(会将其他数据转换成字符串)
console.log('123'+'abc','abc'+100)

• 3.对象，构造方法(类)

var obj1 = {name:'xzq',age:18}
console.log(obj1.name)

***声明构造方法
function Person(){
    this.name = 'abc'
    this.age = 18
}
var p1 = new Person()
p1.name = 'ggg'
p1.age = 20
console.log(p1)