二阶段Day5-js基础语法

作者: 龙神海王 | 来源:发表于2018-11-05 18:51 被阅读0次

day5-js基础语法
day5-js基础语法
(25)day5-js基础语法
二阶段Day5-js基础语法
二阶段day5-JS基础语法
【Android】知识点汇总，坚持原创ing
java
软帝学院：80道java基础部分面试题（四）
快速上⼿ Kotlin
Java面试题知识点

一、介绍

31.什么是js

js是javascript的缩写。是一门专门用来处理网页中的行为的脚本语言，也是web标准中的行为标准
javascript和java没有关系

2.在什么地方写js代码

（window.alert() -- 在网页上面弹出一个对话框）
内联的js：写在标签事件相关的属性中，例如：onclick属性,属性值是js代码
内部的js：写在script标签的内容中，script标签理论上是可以放在整个html文件的任意位置，
但是一般放在head或者body中
外部的js：写在外部的一个js文件(后缀是.js的文件)中，
然后再通过script标签设置src属性的值为js文件地址来导入

3.js能做什么事情

a. 可以修改标签中的内容
b. 可以修改标签的样式
3. 插入html代码


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>js基础</title>
        
        <!--内部js-->
        <!--<script type="text/javascript">
            window.alert('script标签中的js')
        </script>-->
        
        <!--外部js-->
        <!--<script type="text/javascript" src="js/index.js"></script>-->
        
    </head>
    <body>
        <!--内联的js-->
        <!--<button onclick="window.alert('按钮被点了！')">点我啊</button>-->
        <!--插入html代码-->
        <script type="text/javascript">
            var num = 11
            if(num % 2 == 0){
                document.write('<p>插入的段落</p>')
            }
            
            for (var x = 0; x < 50; x++) {
                document.write('<a>超链接</a>')
            }
        </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>

二、js基础语法

<script type="text/javascript">

1.注释（和c的注释一样）
//单行注释
/*
多行注释
多行注释
多行注释
*/
//
2.标识符
//标识符就是用来命名的(给变量命名，函数命名，对象命名)
//js中要求标识符是由字符、数字、下划线和 $符组成，数字不能开头 //js中大小写敏感 var abc, ab12, hj_23, hj$

//console.log() --> 在控制台打印括号中的内容
//console.log(abc)
3.常用数据类型
/*
a.数字类型(Number)、布尔(Boolean)、字符串(String)、数组(Array)、对象(Object)、function(函数)等
数字类型(Number)：包含所有的数字(整数和小数),支持科学计数法,不支持虚数
*/

    100
    13.9
    -200
    -12.34
    console.log(2e2)
    //布尔(Boolean)：true和false
    true
    false
    //字符串(String)：用双引号或者单引号括起来的
    'abc'
    "abc"
    //数组(Array)：相当于python中列表
    [12, 23, 'abc', [1, 2]]

对象(Object): python中对象和字典的结合

    var p1 = {
        name:'余婷',
        age:18,
        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>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

三、变量

<script type="text/javascript">

语法：
var 变量名
变量名 = 值

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

//声明一个变量
var name1
console.log(name1)

name2 = '小明'
console.log(name2)

var name3 = '小花'
console.log(name3)

//同时声明多个变量
var age=18, sex, score=100
console.log(age, sex, score)

age1 = 10, sex1 = '男'
console.log(sex1, age1)

//变量中的值: 可以赋任何其他类型的值
age = '老年'
console.log(age)

//注意：不支持这种写法

//  x, y = 10, 20
    
    
</script>



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

四、运算符

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; number1+=1
    console.log(number1, number2)   // 2, 1
    
    var number11 = 1, number22
    number22 = ++number11  //相等于: 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  
    
    console.log(5!='5')  //false
    console.log(5!=='5') //true

3.逻辑运算符:&&(与)、||(或)、!(非)
//运算规则和python中的and,or,not一模一样
4.赋值运算符：=， +=， -=， *=， /=, %=
//和python一样
5.位运算符：&，|，^, ~, >>, <<
// & - 110 & 101 --> 100
// | - 110 | 101 --> 111
// ^ - 110 ^ 101 --> 011
// ~ - ~110 --> 001
//>> - num >> n --> num // (2n)
//<< - num << n --> num * (2n)
//和python一样
console.log(1&2, 1|2, 1^2, ~1, 2>>1, 2<<1)
6.复合运算：数学>比较>逻辑>赋值
//可以通过加()来改变运算顺序

</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

五、分之结构

<script type="text/javascript">

js中的分之结构有两个，分别是if语句和switch语句
/*
1.if语句

a.if结构：
if(条件语句){
代码段
}

说明：
if - 是关键字
(){} - 固定写法

执行过程:判断条件语句是否为true,为true就执行{}中的代码（不管缩进问题）
*/

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

/*

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

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

c.if- else if - else结构
if(条件语句1){
代码段1
}else if(条件语句2){
代码段2
}else if(条件语句3){
代码段3
}else{
代码段4
}
else if 相当于python中的elif
*/

/*

2.switch语句

结构：
switch(表达式){
case 值1:
代码段1
case 值2:
代码段2
...
default:
代码3
}
执行过程：先计算表达式的值，然后从上往下一一和case后面的值进行比较，找到第一个和表达式相等的case;
然后将这个case作为如果，依次执行后边的所有的代码段，直到执行完或者遇到break为止。
如果没有哪个case的值和表达式的值一样，就直接执行default后面的代码段
default可以省略

 num = 100
 switch(num){
    case 10:
        console.log('10')
    case 1:
        console.log('1')
        break
    case 2:
        console.log('2')
    case 11:
        console.log('11')
    default:
        console.log('default')
 }
 //练习：从服务器获取到的星期对应的值是0-6,在程序中对应打印出其对应的星期值：周1-周天
 week = 6
 switch(week){
    case 0:
        console.log('周一')
        break
    case 1:
        console.log('周二')
        break
    case 2:
        console.log('周三')
        break
    case 3:
        console.log('周四')
        break
    case 4:
        console.log('周五')
        break
    case 5:
        console.log('周六')
        break
    case 6:
        console.log('周日')

// break
}

 //练习2:有一个变量存绩点(整数：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>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

六、循环结构

<script type="text/javascript">

js中的循环有for循环和while循环
/*

1.for循环

a.for-in：和python的for循环的执行过程一样
for(变量 in 序列){
循环体
}
注意：取出来的是元素的下标或者key(属性名)
序列可以是字符串，数组和对象

    str1 = 'abc'
    for(x in str1){
        console.log(str1[x])
    }
    
    arr = [10, 20, 30]
    for (x in arr) {
        console.log(x, arr[x])
    }
    
    object1 = {name:'小明', age:18}
    for (x in object1) {
        console.log(x, object1[x])
    }

b.C的for循环结构：
for(语句1；表达式2；语句3){
循环体
}

执行过程：先执行语句1，
再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体再执行语句3；
再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体再执行语句3；
依次类推，直到表达式2的结果为false,整个循环就结束

指导思想：语句1 - 里面写循环开始前的准备工作
表达式2 - 控制循环次数的
语句3 - 改变循环次数

*/
//计算：1+2+...+100

    for(num1=1, sum1=0;num1<=100;num1 += 1){
//      console.log(num)
        sum1 += num1
    }
    console.log(sum1)
    
    //死循环 
//  for(;true;){
//      
//  }
 
//  while(true){
//      
//  }

2.while循环

a.while循环：和python的while循环一样

while(条件语句){
循环体
}
b.do-while循环
do{
循环体
}while(条件语句)

执行过程：先执行循环体，然后再判断条件语句是否为true；
为true执行循环体，执行完又判断条件语句是否为true；
以此类推，直到条件语句的结果为false，循环就结束
```
 value = input('数字：')
 while value !='0':
    value = input('数字')
    
    
 do{
    value = input('数字：')
 }while(value !='0')
 */ 
```

 3.break和continue
     和python一样
     */
    
</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

七、函数

<script type="text/javascript">

函数分为声明和调用，声明的时候不会执行函数体，只有调用函数才会执行函数体
/*

1.函数的声明

a.和python相同的声明方式
function 函数名(参数列表){
函数体
return 返回值
}

说明：
function - 声明函数的关键字
函数名 - 驼峰式命名，见名知义
参数列表 - 参数如果没有设置默认值，相当于设置默认值为undefined
返回值 - 没有return返回值是undefined
b.以声明变量的形式声明函数
函数名 = function (参数列表){
函数体
retrun 返回值
}

    function sum11(num1=1, num2=2){
        console.log('求两个数的和',num1, num2)
        return num1+num2
    }
    
    var mul = function (num1, num2){
        console.log('求两个数的乘积',num1, num2)
        return num1*num2
    }

/*

2.函数的调用：

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

sum11(10, 20)
console.log(sum11())
console.log(mul(10, 4))

</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

八、字符串

<script type="text/javascript">

字符串: 由单引号或者双引号括起来的

1.转义字符: 和python一样
2.字符串长度: 字符串.length
3.获取单个字符：字符串[下标]
注意: 下标取值范围是0 ~ 长度-1；超出范围取到的是undefined;
js中没有切片语法

//转义字符
console.log('abc\n123')
console.log('\tabc'123')

//字符串长度
console.log('123abc'.length)

//获取单个字符
str1 = 'hello world'
console.log(str1[1])

/*
4.相关运算符
- - 将两个字符串拼接在一起产生一个新的字符串
    (注意如果是一个字符串加上其他的数据，会先将其他数据转换成字符串再相加)
    js不支持*运算符
    比较运算(>, <. ==, !=, ===, !==)
、< - 和python一样，还是比字符编码值的大小
*/
console.log('abc'+'hnm')
console.log('abc'+100, 'abc'+true, 'abc'+[1,2,3])
// str1 = new String([10, 20, 30])
// console.log(str1)

// console.log('abc'*3) // NaN -> 是数字类型中的一个特殊值，表示一个不存在的数字
// console.log(10/0) // Infinity -> 无穷大
console.log('abc' > 'abaaaa')

/*

1. 相关方法(看菜鸟的表)
  match(正则表达式) - 根据正则表达式匹配结果。
  
  js中的正则表达式是写在//之间的

     */
    str1 = 'abc23hjs89jskk834jsdfj78hfjh9sdf9'
    result = str1.match(/[a-z]+/)
    console.log(result[0])
    
    result = str1.replace(/\d/, '*')
    console.log(result)
    
    
    
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

九、数组

<script type="text/javascript">

数组就是python中的列表
/*

1.数组是有序，可变的,里面的元素可以是任意类型的数据
2.增删改查
/
/a.查(获取数组中的元素) - 不支持切片
数组[下标]

数组.slice(开始下标, 结束下标) - 切片
*/
arr1 = [1, 2, 3, 'abc']
console.log(arr1[3])
//获取数组的长度
console.log(arr1.length)

result = arr1.slice(0, 2)
console.log(result, arr1)

/*

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

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

/*

c.删(删除元素)
数组.pop() - 删除最后一个元素

数组.splice(开始删除的下标, 删除的个数) - 从数组指定的下标开始删除指定个数元素

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

/*

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

数组.splice(开始下标,个数, 多个其他参数) - 用其他参数替换开始下标开始后的指定个数个元素

    arr1 = [1, 2, 3, 4, 'abc']
    arr1[0] = 10
    console.log(arr1)
    
    arr1.splice(1,2, 'a','b', 'c')
    console.log(arr1)

        
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

十、对象

<script type="text/javascript">

js中没有python的类，只有对象和构造方法

1.对象的字面量
对象名 = {属性名:属性值, 属性名2: 属性值2...}
*/

    p1 = {
        //对象属性
        name:'xiaoming',
        age:30,
        tel:'187382833',
        
        //对象方法
        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(name1, age1){
       //对象属性
       this.name = name1
       this.age = age1
       this.tel = ''
       this.sex = '男'
       
       //对象方法
       this.eat = function (food){
           console.log(this.name+'在吃'+food)
       }
       
       return this
   }
   
   p2 = Person('小明', 18)
   p2.tel = '1727839923'
   p2.eat('面条')
   
   p3 = Person('小花', 20)
   p3.sex = '女'
   p3.eat('面包')
   
   //声明一个狗的对象对应的构造方法，拥有属性，颜色，年龄，品种；拥有方法：吃和叫
   
   
   
   
   
   
</script>


<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
   </body>
</html>

day5-js基础语法
1.js基础语法代码示例 2.变量代码示例 3.运算符代码示例 4.分支结构代码示例 5.循环结构代码示...
day5-js基础语法
js基础 1.js基础语法 1.注释// 单行注释/*多行注释多行注释*/ 2.标识符标识符就是用来命名的(给变量...
(25)day5-js基础语法
5.1 什么是js 1.什么是jsjs是JavaScript的缩写，是web标准中的行为标准，负责网页中变化的部分...
二阶段Day5-js基础语法
一、介绍 31.什么是js js是javascript的缩写。是一门专门用来处理网页中的行为的脚本语言，也是web...
二阶段day5-JS基础语法
一、基础语法二、变量三、运算符四、分支结构五、循环结构六、函数七、字符串八、数组九、对象
【Android】知识点汇总，坚持原创ing
Android基础 Java基础 Java基础——Java内存模型和垃圾回收机制语法基础语法基础——C语法基础...
java
语法基础1.1 java初体验（语法基础）1.2 变量和常量（语法基础）1.2 变量和常量（语法基础）1.4 流程...
软帝学院：80道java基础部分面试题（四）
Java基础部分基础部分的顺序：基本语法，类相关的语法，内部类的语法，继承相关的语法，异常的语法，线程的语法，集...
快速上⼿ Kotlin
快速上⼿ Kotlin 基础语法函数基础语法与 Java 代码互调 Java 与 Kotlin 交互的语法变化...
Java面试题知识点
1. Java基础部分基础部分的顺序：基本语法，类相关的语法，内部类的语法，继承相关的语法，异常的语法，线程的语...

二阶段Day5-js基础语法

一、介绍

31.什么是js

2.在什么地方写js代码

3.js能做什么事情

二、js基础语法

4.格式：js没有缩进的要求

三、变量

四、运算符

五、分之结构

2.switch语句

六、循环结构

1.for循环

2.while循环

七、函数

1.函数的声明

2.函数的调用：

八、字符串

九、数组

十、对象

相关文章

day5-js基础语法

day5-js基础语法

(25)day5-js基础语法

二阶段Day5-js基础语法

二阶段day5-JS基础语法

【Android】知识点汇总，坚持原创ing

java

软帝学院：80道java基础部分面试题（四）

快速上⼿ Kotlin

Java面试题知识点

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读