JavaScript基础语法
2018-12-07 本文已影响0人
憧憬001
一、基本语法
<script type="text/javascript">
//1.控制台输出
console.log(100)
console.log('abc')
console.log('abc',200)
//2.注释
// 单行注释
/*
*多行注释
*多行注释
*/
//3.标识符
// 由数字字母下划线和$组成,数字不能开头
a = 10
a20 = 20
a_09 = 50
$ab = 100
// 12 = 515 报错
// a^ = 300 报错
//4.行和缩进
// 从语法角度js代码怎么换行和缩进都无所谓
a = 10
a20 = 20
a_09 = 50
$ab = 100
//js中通过{}确定
//5.常见的数据类型:数字、布尔、字符串、数组、函数、对象
//数字(Number) - 包含所有的数字(可以支持科学计数法,不支持虚数)
console.log(3e2)
/*
b.布尔(Boolean)- true和false
c.字符串(String) - 只有单行字符串
d.数组(Array) - 相当于python中的列表
e.对象(Object) - 相当于python中的字典和对象 {}
f.函数(Function)- 相当于python中的函数
*/
console.log('我是字符串')
obj1 = {name:'小李',age:15}
console.log(obj1['name'],obj1.age)
function eat(game){
console.log('play'+game)
}
eat('LOL')
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js基本语法</title>
</head>
<body>
</body>
</html>
二、变量
<script type="text/javascript">
//1.变量的声明
/*
* 语法一:变量名 = 值
* 变量名 - 标识符,不能是关键字;命名规范:驼峰式命名(的一个单词有字母大写,其余首字母大写,见名知意)
*
* 语法二:var 变量 = 值 或 var 变量名
* var - 声明变量的关键字
*
* 区别:声明时加var,变量可以不用赋值,默认是underfind
* 不加var就必须赋值,否则报错
* 补充:js中两个特殊值 - undefined(没有,空)和 null(清空)
*
*/
name
console.log(name)
arr1 = [1,2,3]
console.log(arr1[100])
var age = 20
var sex //通过var声明的时候如果不赋值,默认是underfind
console.log(age,sex)
// 重新赋值
name = '小李'
age = 56
sex = '男'
console.log(name,age,sex)
a1 = a2 = a3 = a4 = 10
console.log(a1,a2,a3,a4)
a1=1, a2 = 2 , a3 = 3
console.log(a1,a2,a3,a4)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
三、运算符
<script type="text/javascript">
/*
* 1.数学运算符:+,-,*,/,%,++,--
* ++、-- 使用方式:变量++ 或者 变量--
* a. ++ 自加1运算;让变量本身的值加1
* b. -- 自减1运算,让变量本身的值减1
*
* 2.比较运算符:< 、>、==、!=、<=, >= , === , !==
* 结果是布尔值
* 比较大小和python一样
* a. == 判断值是否相等
* b. === 判断值和类型是否相等,相当于python中的==
* !==相当于python中的!=
*
* 3.逻辑运算符: &&(逻辑与) 、 ||(逻辑或)、 !(逻辑非)
* 运算规则、使用方式和python的逻辑一模一样
*
* 4.赋值运算符:=, += , -= ,*= , /=
* 和python中一模一样
*
*
* 5.三元运算符
* 条件语句? : 值1 : 值2 - 判断条件语句的值是否为true,是结果为值1,否则为值2
*
* 6.运算顺序
* 数学~ >比较 >逻辑 >赋值
*
*/
num = 10
num++
console.log(num)
console.log(5 == 5 , 5 == '5')
console.log(5 === 5 , 5 === '5')
//5
age = 17
isMan = age >= 18? '成年':'未成年'
console.log(isMan)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
四、分支结构
<script type="text/javascript">
/*
* if 和 switch
*
* 1 .if 语句
* a. if
* if(条件语句){
* 满足条件会执行的代码
* }
* b. if-else
* if(条件语句){
* 代码段1
* }
* else{
* 代码段2
* }
*
* c. if-else if - else
* if(条件语句1){
* 代码段1
* }
* else-if(条件语句2){
* 代码段2
* }
* else-if(条件语句3){
* 代码段3
* }
* ...
* else{
* 代码段4
* }
* 执行过程和python一模一样
*
* 2.switch语句
* a.结构:
* switch(表达式){
* case 值1:
* 代码段1
* case 值2:
* 代码段2
* ...
* default:
* 代码段3
* }
* b.执行过程:
* 使用表达式的值依次和后面每个case后面的值进行相比,看是否相等
* 找到的一个和表达式的值相等的case,将这个case作为入口,依次执行后面
* 的所有代码,直到执行完成或者遇到break为止,如果每个case的值和表达式的值
* 不相等,就执行default后面的代码
* 注意:case后面必须是一个有结果的表达式
*/
num = 8
if(num % 2){
console.log('奇数{0}',(num))
}
else{
console.log('偶数')
}
a = 10
switch(a){
case 5 :console.log('表达式1')
case 6 :console.log('表达式2')
case 10 :console.log('表达式3')
case 23 :console.log('表达式4')
case 'abc' :console.log('表达式5')
case true:console.log('表达式6')
default:console.log('=======')
}
//练习:用一个变量保存分制的成绩,根据成绩打印情况:0~5不及格,6及格 7~良好 9~10优秀
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('====')
}
</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
* 结构:
* for (变量 in 序列){
* 循环体
* }
* 执行过程和python一样,但是变量取到的不是元素而是下标 或者key(属性名)
*
* 序列 - 字符串、数组、对象
*
* b. c的for循环
* 结构:
* for(表达式1;表达式2;表达式3...){
* 循环体
* }
* 执行过程:
* 先执行表达式1;判断表达式2的值是否为true,如果为true就执行循环体,执行完循环体在执行表达式3,
* 然后判断表达式2的值是否为true,如果为true就执行循环体,执行完循环体在执行表达式3
* ... 直到表达式2的值是false
*
*
* 2.while 循环
* a.while循环
* while(条件语句){
* 循环体
* }
* 执行过程和python一模一样
*
*
* b.do-while循环
* do{
* 循环体
* }while(条件语句)
*
* 区别:do-while的循环体至少会执行一次
*
*
*/
for(i in 'abcde'){
console.log(i)
}
console.log('=================')
arr1 = [45,'ac',true,'你好']
for(i in arr1){
console.log(i)
}
console.log('=================')
person1 = {name:'小李',age:20,gender:'boy'}
for(i in person1){
console.log(i, typeof(i))
console.log(person1[i])
}
for (num=1,sum1 = 0;num<=100; num++) {
sum1 += num
}
console.log(sum1)
sum1 = 0
num = 1
do{
sum1 += num
num++
}while (num<=100){
console.log(sum1)
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
六、函数
<script type="text/javascript">
/*
* 1.函数的声明
* function 函数名(参数列表){
* 函数体
* }
*
* 参数可以设置默认值,也可以通过关键字参数调用函数
*
* 2.函数的调用
*
*
* 3.匿名函数(函数的字面量)
* 函数名 = function(参数列表){函数体}
*
* 4.变量的作用域
* a.全局变量:只要声明在函数外面的变量就是全局变量
*
* b.局部变量:以var关键字声明在函数中的变量,才是局部变量
*
*
*
*/
function sum(num1,num2){
console.log('求两个数的和:')
return num1+num2
}
console.log(sum(15,56))
// js中所有的函数都有返回值,默认是underfind
function fun1() {
console.log('JS')
}
re = fun1()
console.log(re,typeof(re))
func2 = function(a,b){
console.log(a,b)
return a*b
}
console.log(func2(5,10))
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
console.log('===========')
a1 = 100
function fun2 () {
a1 += 10
a2 = 50
console.log(a1)
return a1
}
console.log(fun2())
</script>