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>
