2018-11-02 第二阶段 day5js基础语法

1.认识js

1.什么是js
js是javascript的缩写，是一门专门用来处理网页中的行为的脚本语言，也是web标准中的行为标准
javascript和java没有关系
2.在什么地方写js代码
（window.alert()）--网页上面弹出一个对话框
内联的：写在标签事件相关的属性中，例如onclick属性，属性值是js代码
内部的js:写在script标签的内容中,script标签理论上是可以放在整个html文件的任意位置，
但是一般放在head或body中
外部的js:写在外部的一个js文件中（后缀是.js的文件）中，然后再通过script标签设置src设置的值为js文件地址来导入

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!-- 内部js -->
        <script type="text/javascript">
            window.alert('script标签中的js')
        </script>
        <script type="text/javascript" scr="js/index.js">
            
        </script>
    </head>
    <body>
        <!-- 内联js -->
        <button onclick="window.alert">点一下</button>
    </body>
</html>

3.js能做什么事情
a.js可以去修改标签中的内容
b.修改标签中的样式
c.插入html代码

<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <!-- 插入html代码 -->
        <script type="text/javascript">
            document.write('<p>插入段落</p>')
        </script>
        <p id="p1">python基础</p>
        <!-- 修改标签中内容 -->
        <button onclick="document.getElementById('p1').innerHTML =' js基础'">修改</button>
        <!-- 修改标签的样式 -->
        <button onclick="document.getElementById('p1').style.color = 'red'">修改样式</button>
    </body>
</html>

2.js基础语法

2.标识符

标识符就是用来命名的是由字母，数字，下划线和 $赋组成,数字不能开头 js中大小写敏感 */ /* var abc, eir34, df_24, ss$
console.log()-->在控制台打印括号中的内容
console.log(abc)
3.常用数据类型
数字类型(Number),布尔(Boolean),字符串(String),数组(Array),对象(Object),函数(functipn)等
数字类型(Number):包含所有的数字(整数和小数)支持科学奇数法,不支持虚数
*/

100
12.3
-100
-23.3
console.log(2e2)
//布尔(Boolean):true和false
true
false
//字符串(String):用双引号或者单引号括起来的
'abc'
"abc"
//数组(Array):相当于Python中列表
[12,22,34,'abc',[1,2]]
//对象(Object):python中对象和字典的结合
var p1= {
name:'王秋容',
age:20,
sex:'女'
}
//函数(function):相当于Python中的函数
function function_name(){
console.log('函数体')
}
function_name()
//b. typeof(数据)-获取数据类型
console.log(typeof(100))
console.log(typeof([1,2,3]))
//c.new 类型名(数据)-将数据转换成指定的类型
var a = new Boolean(100)
console.log(a)
//d.常用的特殊值:undefined(相当于Python，None),null(一般用来清空变量)
//4.格式:js没有缩进的要求
</script>

3.变量

/*
语法：
var 变量名
变量名 = 值
说明：
var-是js关键字，声明变量的时候用,var可以省略，省略的时候变量名必须赋值，
不省略的时候变量名后可以赋值，也可以不赋值，不赋值的时候默认值是underfined
变量名-标识符，不能是关键字，驼峰式命名规范
*/
//声明一个变量

<script type="text/javascript">
var name1
console.log(name1)
var name2 = '小明'
console.log(name1)
name3 = 'abc'
console.log(name1)
//同时声明多个变量
var age=18, sex,score=100
console.log(age,sex,score)
age1 =10, sex1='男'
console.log(sex1,age1)
//变量中的值
age = '少年'
console.log(age)
</script>

4.运算符

    var number = 10
    number++   //让number的值加1,  number += 1
    //++number  让number的值加1    number +=1
    console.log(number)
    number--
    //--number
    console.log(number)
    
    
    var number1 = 1, number2
    number2 = number1++   //相当于:number2=number1, number+=1
    console.log(number1,number2)   //2,1
    
    var number11 = 1, number22
    // number22 = ++numbe11   //相当于:number11+=1, number22=number11
    console.log(number11,number22)     //2,2

//2.比较运算符:>,<,==,!=,>=,<=,===,!==,>==,<==
//比较运算符的返回值都是布尔值
//==(相等):判断值是否相等
//===(完全相等):判断值和类型是否相等
console.log(5==5)    //true
console.log(5=='5')   //true
console.log(5===5)   //true
console.log(5==='5')    //false
//3.逻辑运算符:&&(与),||(或),！(非)
//运算规则和Python中的and,or,not一模一样

//4.赋值运算符:=,+=,-=,*=,/=,%=
//和Python一样
//5.位运算符:&,|,^,~,>>,<<
//和Python一样
console.log(1&2,1|2,1^2,~1,2>>1,2<<1)

</script>

5.分之结构

   number = 10
   if(number %2 == 0){
      console.log('是偶数') 
      console.log('====')
   }

b.if-else结构：
if(条件语句){
代码段1
}else{
代码段2
}

  number2 = 10
  if(number2 %2==0){
      console.log(number2, '是偶数' )
  }else{
      console.log(number2 ,'是奇数' )
  }

c.if-else if-else结构
if(条件语句){
代码段1
}else if(条件语句2){
代码段2
}else if(条件语句3){
代码段3
}else{
代码段4
}
else if 相当于Python中的elif
/
/
2.switch语句
结构：
switch(变量、表达式){
case 值1：{
代码段1
}
case 值2{
代码段2
}
case 值3{
代码段3
}
.....
default:{
代码段4
}
}
执行过程：先计算表达式的值，然后从上往下，一一和case后面的值进行比较，然后找到第一个和表达式相等的case
然后将这个case作为结果，依次执行后边所有的代码段，直到执行完或者遇到 break为止
如果没有哪个和case的值和表达式的值一样，就直接执行default后面的代码段
default可以省略

num = 10
switch(num){
    case 1:
    console.log('1')
    case 2:
    console.log('2')
    case 10:
    console.log('10')
    case 11:
    console.log('11')
    default:
    console.log('default')
}

//练习:从服务器获取到的星期对应的值是0-6,在程序中对应打印出其对应的星期值(周一到周天)

week = 1
switch(week){
    case 0:
    console.log('星期一')
    break
    case 1:
    console.log('星期二')
    break
    case 2:
    console.log('星期三')
    break
    case 3:
    console.log('星期四')
    break
    case4:
    console.log('星期五')
    break
    case 5:
    console.log('星期六')
    break
    case 6:
    console.log('星期日')
    
}

//练习:有一个变量存的是绩点(整数：0=5),要求是0-不及格,1-3-及格,4-5优秀

score = 3
switch(score){
    case 0:
    console.log('不及格')
    break
    case 1:
    case 2:
    case 3:
    console.log('及格')
    break
    case 4:
    case 5:
    console.log('优秀')
    break
    default:
    console.log('成绩有误')
}
</script>

6.for循环


   str1 = 'abc'
   for( i in 'str1'){
      console.log(str1[i]) 
   }
   arr = [12,23,45]
   for (i in arr ){
       console.log(i, arr[i])
   }
   Object1 = {name:'小明', age:18}
   for (i in Object1){
       console.log(i, Object1[i])
   }

b.c的for循环结构：
for（表达式1；表达式2，表达式3）{
循环体
}
执行过程：先执行表达式1，再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体再判断表达式3
再判断表达式2是否为true，为true执行循环体，执行完循环体再执行表达式3，依次类推，直到表达式2的结果为false，整个循环结束
指导思想：语句1-里面写循环开始前的准备工作
表达式2-控制循环次数的
语句3-改变循环次数
*/
//计算:1+2+3+....10

  for(num1 = 1, sum1 = 0;num1<=100;num1+=1){
     
      sum1+=num1 
  }
  console.log(sum1)

</script>

7.函数

    
   function sum1(num1 = 1, num2 = 2){
       console.log('求两个数的和',num1,num2)
       return num1+num2
   }
   mul = function (num1, num2){
    console.log('求两个数的乘积',num1,num2)
    return num1*num2   
   }
   sum1(10,20)
   sum1 ()
   console.log(mul(2,3))
</script>

/*函数的调用
函数名（实参列表）
调用的时候保证每个参数都有值
只能通过位置参数传参
js中不支持不定长参数

7.字符串


   console.log('abc\n123')
   console.log('\tabc\'123')
   //字符串长度
   console.log('abc'.length)
   //获取单个字符
   str1 = 'abcdf'
   console.log(str1[1])

4.相关运算符
+--将两个字符串拼接在一起产生一个新的字符串
注意：如果是一个字符串加上其他的数据，会先将其他数据转换成字符串再相加
js不支持*运算符
比较运算（>,<,==,!==,===,!===）

,<-->和Python一样，函数比字符编码值的大小

  console.log('abc'+'123')
  console.log('abc'+100,'abc'+[1,2,3],'abc'+true)
  str1 = new String([10,20,30])
  console.log(str1)
 // console.log('abc'*3)    NaN-->是数字类型中的特殊值,表示一个不存在的数字
 //console.log(10/0)   Infinty-->无穷大
 console.log('abc' > 'abbbbb' )
 //5.相关方法(看菜鸟的表)
 //match(正则表达式)-根据正则表达式的匹配结果
 str1 = 'afd466fgdgfdssdddvddf3243'
 result = str1.match(/[a-z]+/)
 console.log(result)
 result = str1.replace(/\d/m, '*' )
 console.log(result)
</script>

8.数组


  arr1 = [1,2,3,'abc']
  console.log(arr1[3])
  result = arr1.slice(0,3)
  console.log(result,arr1)
  //获取数组的长度
  console.log(arr1.length)

b.增（添加元素）
数组.push(元素)-将元素添加到数组的最后

 arr1.push('hello')
 console.log(arr1)

c.删（删除元素）
数组.pop()-删除最后一个元素
数组.splice(开始删除下标，删除的歌)--从数组指定的下标开始删除指定个数元素

arr1.pop()
console.log(arr1)
arr1.splice(0,1)
console.log(arr1)

d.改（修改元素的值）
数组[下标]=新值-修改指定下标的元素

arr1 = [1,2,3,4,5, 'abc' ]
arr1[0] = 10
console.log(arr1)
arr1.splice(1,2,'a','b')
console.log(arr1)
</script>

9.对象

   p1={
       //对象属性
       name:'小明',
       age:18,
       tel:243365687,
       //对象方法
       eat:function(){
           console.log('吃饭')
       }
   }
   /*
   2.使用对象属性
   对象 [属性名]
   对象.属性
   */
  console.log(p1['name'],p1.name)
  p1.eat()
  /*
  3.构造方法-用来创建对象的
  function 类名（参数列表）{
    this.属性1 = 属性值1
    this.属性2 = 属性值2
    ....
    return this
  }
  这儿的this类似Python中的self，表示当前对象
  */
 function Person(name, age = 18){
     this.name = name
     this.age = age
     this.tel = ''
     this.sex = '男'
     //对象方法
     this.eat = function(food){
         console.log(this.name+'在吃'+food)
     }
     return this
 }
 p2 = Person('小明')
 p2.tel= '12345678'
 p2.eat('面条')

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,458评论 4赞 363
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,454评论 1赞 294
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,171评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,062评论 0赞 207
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,440评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,661评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,906评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,609评论 0赞 200
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,379评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,600评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,085评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,409评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,072评论 3赞 237
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,088评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,860评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,704评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,608评论 2赞 270