2018-08-21JavaScript

作者: Smilebest | 来源:发表于2018-09-22 10:45 被阅读11次

01-基础

1.什么是js
js是Javascript的缩写，是一门专门用来控制网页内容的行为的脚本语言
js就是web标准中的行为标准
2.在哪儿写js代码

a.写在标签的行为相关的属性中，比如按钮的onclicked
b.写在script标签中吗，（script标签可以放在html中的任何位置，但是一般情况下还是放在head或者body中）
+c.写在外部的js文件中，然后通过script标签导入，通过设置src属性为js文件的路径
3.js能做些什么事情
a.js可以在网页中插入html代码
b.可以修改标签内的内容
c.修改标签的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--内部的js-->
            <script type="text/javascript">
                //在这儿也可以写js代码
                window.alert('你好，Python')
            </script>
        <!--外部的的js-->
            <script type="text/javascript" src="index.js">
                
            </script>
    </head>
    <body>
        
        
        <p id="p1">中秋节快乐</p>
        
        
        
        <!--内联的js-->
        <button onclick="window.alert('你好，Python')">点我</button>
        <!--<input type="text" onfocus="window.alert('你好，input')"/>-->
        <!--插入html代码-->
        <script type="text/javascript">
            document.write('<p>中秋节快乐</p>')
        </script>
        
    </body>
</html>

02-基础语法

//1.注释
//单行注释就是在前面加“//”
/这个是多行注释/

//2.标识符
//要求是由字母,数字,下划线和 $符组成,数字不能开头 var abc var abc var$ 12

//3.js中大小写敏感

//4.基本数据类型
//a.Number(数字-包含所有的数字)、Boolean(布尔类型)、String（字符串）、Array（数组）Object(对象)。。。。
//注意:js中没有元组和集合
//b.常用的特殊的值:NaN(表示不存在的数字),null（空，一般用来清空变量中的内容）,undefined（变量没有赋值的时候，默认就是undefined）
console.log() //相当于Python中print函数，作用是在控制台打印（）中的内容

//5.字面量
//Number字面量:所有的数字(支持科学计数法，不支持复数)
10
1e2
//Boolean字面量：只有true和false
true
false
//String字面量:用单引号或者双引号引起来的字符集,支持转义字符（和Python一样）
"ssad",'afda'
'sda'
console.log('sad')
console.log('123\n12')
//Array字面量:js中数组相当于Python中的列表
console.log(['s','1','asd',true])
//Object对象字面量:相当于Python中的字典+对象
//注意:key相当于属性,value相当于属性的值
var dict = {a:123,true:name}
console.log(dict)

//typeof:查看数据类型
console.log(typeof(true),typeof('asd'))

//js中的语法:
//a.一条语句结束后,可以写分号,也可以不写.如果一行写多条语句就必须写分号
//b.js中没有缩进语法的要求,需要使用代码块的时候,使用大括号

03-js变量

//1.js中的变量声明
//变量必须先声明再使用
/*语法：var 变量名或者var 变量名=值

说明：
a.var：是js中声明变量的关键字
b.变量名：标识符，不能是js中的关键字；驼峰式命名（第一个单词的首字母小写，后面每个单词的首字母大写），见名知义
c.初值：声明的时候可以赋初值，也可以不赋
*/
var studentCount = 100

//同时声明多个变量
var age; var name
var age1, name, studyId
var age2=10, name2 //声明变量
name2 = 100 //修改变量中的值
name2 = [1,'aa'] //修改变量中的值
console.log(name2)

04-js中的运算

//js中的运算符包含:数学运算符、比较运算符、逻辑运算符、赋值运算符、三目运算符、（位运算）
//1.数学运算符：+、-、、/、%、（js7才有的）、++、--
//其中:+、-、、/、%、**和Python中的功能一样
//注意：js中没有整除对应的运算符

//a.++（自加）：自加一
//语法：变量++，++变量-----》让变量的值加一
var num = 1
num++ //相当于Python中的变量 += 1
++num
console.log(num)

//b.--（自加）：自减一
//语法：变量--，--变量-----》让变量的值减一
var num1 = 1
num1-- //相当于Python中的变量 -= 1
--num1
num1 -= 1
console.log(num1)

//c.赋值的时候，++/--写在变量的后面，是先赋值，然后再让变量值加1/减1，++/--写在变量的前面，就是先加1/减1，然后再赋值
var num2 = 10,num3 = 10,b,c
b = num2++
c = ++num3
console.log(b,c,num2,num3)

//2.比较运算符:>,<,==,!=,>=,<=,===,!==,>==,<==
//结果值是布尔值
//==（相等，只判断值是否相等），===（完全相等。判断值和类型是否相等）
console.log(5==5) //true
console.log('5'==5) //true
console.log('5'=='5') //true

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

//3.逻辑运算符：&&(与)，||(或)，!(非)
//js的逻辑运算符，除了表示不一样，其他的与Python中一样

//4.赋值运算符：=， +=， -=， *=， /=， %=，ect，和Python中的一样

//5.三目运算符：?:
//语法：表达式1?值1：值2-----》判断表达式1的值是否为真，如果为真整个运算的结果就是值1，否则是值2
var value = 10>20?5:0
console.log(value)

//练习：求三个数的最大值，（使用三目运算符）
var a = 10, b = 20, c = 30
var max = (a>b?a:b)>c?(a>b?a:b):c
console.log(max)

//6.运算顺序：和Python基本一样（数学>比较>逻辑>赋值），也可以通过加括号来改变顺序

05-分支结构

//js中的分支结构:if语句,switch语句
//1.if语句
/*结构：
a.if（条件语句）
{
    （条件成立执行）代码段
}
执行过程：先判断条件语句是否为true，为true就执行代码段

b.if-else结构：
if（条件语句）{
    代码段1    
}else{
    代码段2
}
 
c.if-elif-else:(这儿的else if相当于Python中的elif)
if(条件语句1){
    代码段1
}else if（条件语句2）{
    代码段2
}else{
    代码段3
}

 */
//判断一个数是否是偶数,如果是就打印偶数
var num = 10
if(num%2==0){
    console.log('偶数')
}

//2.switch
/*
a.结构：
switch（表达式）{
    case 值1：{
        代码段1
//      break（可要可不要）
    }
    case 值2：{
        代码段2
//      break
    }
    ...
    default：{
        
    }
}
b.执行过程：先计算表达式的值，然后再用这个值和后边case关键字后面的值一一比对，
            看是否相等，找到第一个和表达式相等的case，
            然后将这个case作为入口，依次执行后边所有的代码，
            直到遇到break或者switch结束。
            如果没有找到和表达式的值相等的case就执行default后面的代码
c.注意：default可有可无，case可以有很多个
 */

//练习:根据数字对应的值的不同,打印不同的结果:0-->星期天 1-->星期一 ....
var week = 4
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('星期六')
    default:
        console.log('值不对')
}
//练习:根据分数分等级:1-5:不及格,  6:及格,  7,8:良好  9,10:优秀
var score = 9
switch(score){
    case 1: 
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('不及格')
        break
    case 6:
        console.log('及格')
        break
    case 7: 
    case 8:
        console.log('良好')
        break
    case 9:
    case 10:
        console.log('优秀')
        break
    default:
        console.log('值不对')
}

06-循环结构

//js中的循环结构分为:for循环和while循环
//1.for-in循环:(和Python的for循环一样)
/*
for var 变量 in 序列
{
    循环体
}
执行过程：依次从序列中取元素对应的索引，取完为止，每取一次执行一次循环体
a.遍历字符串，取的是字符对应的下标
b.遍历数组，取的是元素对应的下标
c.遍历对象，取的是属性名（key）
*/
var str= 'asdf'
for(var i in str){  
//  i 取的是str的下标
    console.log(str[i])
}

//2.for循环:(和C语言的for循环一样)
/*
for（表达式1；表达式2；表达式3）{
    循环体
}
执行过程：先执行表达式1，然后再判断表达式2的结果是否为true，
        如果为true，就执行循环体，执行完循环体再执行表达式3，
        然后再判断表达式2的结果是否为true，
        如果为true，又执行循环体，执行完循环体再执行表达式3，
        依次循环，直到表达式2的结果为false为止
*/

//3.while循环:(和Python一样)
/*
while（条件语句）{
    循环体
}
*/

//4.do-while:
/*
do{
    循环体
}while（条件语句）

执行过程：先执行一次循环体，然后再判断条件语句是否为true，
           为true又执行循环体，以此类推，直到条件语句为false，循环结束
*/

07-函数

//1.函数的声明
/*
function 函数名（参数列表）{
函数体
}
说明：
a.function：是js中声明函数的关键字
b.函数名：标识符，不能是关键字，见名知义，驼峰式命名
c.参数列表：参数名1，参数名2....；形参：给函数传值
d.函数体：实现函数的功能

注意：函数体只有在函数调用的时候才执行
*/
function sum(num1=5,num2=12){
console.log(num1+num2)
}
//2.函数的调用:和Python一样
//注意:js中不支持不定长参数
sum(1,9)
sum(sum1=10)
sum(num2=5)
sum(20)

//3.函数的返回值
//js中函数没有遇到return,函数的返回值就是undefined
//注意:js中不能同时返回多个值(有元组语法的语言才支持多个返回值)
function func1(){
console.log('func1')
// return 100,'abc'
}
console.log(func1())

//逗号表达式:多个值之间用逗号隔开，整个表达式的结果是第一个值
var nums
nums = 100,'abc',true
console.log(nums)

//4.js中,函数也可以作为变量

//5.另外一种声明函数的方式
/*
var 变量 = function(参数列表){
函数体
}
*/

08-数据类型

//new 类型名(值)---->可以将其他类型的数据转换成相应类型的值，不能转换的，结果是NaN
//1.数字类型(Number):所有的数字对应的类型
var num1 = new Number
console.log(num1+10)

//2.布尔（Boolean):true false
//Nan和0是false,空串的是true

//3.字符串（String）
//a.获取单个字符,通过字符串[下标]
//b.注意:js中不支持切片
// js中所有的下标,只支持0-长度减一,不支持负值

//c.长度:字符串.length
// console.log(str1.length)
//d.运算符:比较和+
//+:如果是其他的数据类型和字符串相加，js是先将其他类型转换成字符串，再相加
console.log(123+'acb')

//4.数组（相当于Python中的列表）

//splice(删除的开始下标,删除的元素个数)
//splice(被删除的下标/添加的开始下标,添加个数,被添加的元素列表)

//查，通过下标获取元素
//增，push(''):增加元素
//删 pop():删除最后一个元素；shift（）：删除第一个元素
//改和Python一样

2018-08-21JavaScript

01-基础

02-基础语法

03-js变量

04-js中的运算

05-分支结构

06-循环结构

07-函数

08-数据类型

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读