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

2018-11-02  本文已影响0人  hfudhu

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基础语法

<script type="text/javascript">
//1.注释(和c注释一样）)
//单行注释
/*
多行注释
多行注释
多行注释

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.运算符

<script type="text/javascript">
//js中支持:数学运算符,比较运算符,逻辑运算符,赋值运算符,位运算符
//1.数学运算符:+,-,,/,%,(js7),++,--
//+,-,,/,%,和Python一样,但是js中不支持整除(//)
console.log(20+10,20-10,2010,5/2,5%2,5*2)
//++(自加1),--(自减1)
//变量++,++变量,变量--,--变量(注意：变量必须要有值)
//注意赋值的时候++和--写在变量的前面和后面对应的效果不一样

    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.分之结构

<script type="text/javascript">
//js中的分之结构有两个,分别是if和switch语句
/*
1.if语句
结构：
if（条件语句）{
代码段
}
说明：
if-是关键字
（）{}-固定写法
执行过程：判断条件语句是否为true，为true就执行{}中的代码（不管缩进问题）

   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循环

<script type="text/javascript">
js中的循环有for和while循环
1.for循环
a.for-in和Python的for循环的执行过程一样
for 变量 in 序列{
循环体
}
注意：取出来的是元素的下标或者key（属性名）
序列可以是字符串，数字和对象


   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.函数

<script type="text/javascript">
//js函数分为声明和调用,声明的时候不会执行函数体,只有调用的时候才会执行函数体
/*
1.函数的声明
a.和Python相同的声明方式
function 函数名 （参数列表）{
函数体
return 返回值
}
说明：
function-声明函数的关键字
函数名-驼峰式命名，见名之义
参数列表-参数如果没有设置默认值，相当于设置默认值为undefined
返回值-没有return返回值是undefined
b.以声明函数变量的形式声明函数
函数名 = function （参数列表）{
函数体
return 返回值
}

    
   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.字符串

<script type="text/javascript">
字符串：由单引号或者双引号括起来的
1.转义字符：和Python一样
2.字符串的长度：字符串.length
3.获取单个字符：字符串[下标]
注意：下标的取值范围是0-长度-1，超出范围取到的是 undefined
js中没有切片语句
//转义字符


   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.数组

<script type="text/javascript">
/*
数组就是Python中的列表
1.数组是有序，可变的,里面的元素可以是任意类型
2.增删改查
/
/
a.查(获取数组中的元素)
数组[下标]
数组.slice(开始下标，结束下标)--切片


  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.对象

<script type="text/javascript">
//js中没有Python的类,只有对象和构造方法
/*
1.对象的字面量
{属性名：属性值，属性名2：属性值2...}

   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('面条')
上一篇下一篇

猜你喜欢

热点阅读