1. JS介绍
- JS是JavaScript的缩写，是一门脚本语言，专门用来负责网页上的行为(可以直接写到网页中)。
- 在哪写JS代码
a. 可以写在script标签中(理论上script标签可以放到HTML中的任何位置，实际开发的时候一般放在head或者body中)
b. 写到标签的事件属性中（例如：onclick）
c. 写到外部的JS文件中(.js)
- JS在网页中能做什么事情
a. 在网页的不同的位置插入HTML代码
b. 修改某个标签的内容
c. 修改标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/01-JS基础语法.js"></script>
<!--<script src="js/index.js"></script>-->
<!--一个HTML中可以在多个位置插入script标签-->
<!--<script type="text/javascript">
//在这里写js代码
window.alert("fuck")
</script>-->
</head>
<body>
</body>
</html>
2. JS基础语法
//1. js中的注释
//单行注释
/* 多行注释 */
//2. 语句
//一条语句结束需要加分号(现在的JS版本不用写)
//一行写多条语句必须用分号隔开
//3. js中没有缩进问题，用{}表示一个块
//4. 基本数据类型
/*
Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)--列表、Object(对象)--字典、Function(函数)、
null、undefined
*/
//在控制台中打印括号中的内容
console.log("hello");
console.log('你好')
//5. 字面量
//数字字面量
12;23.2;3e6;
//字符串字面量
'ada';"ad"
//布尔字面量
true;false;
//数组字面量
[1,2,'eq',true];
[];
//对象字面量(对象的key值又是属性，不用加引号)
var dict = {a:1,b:'dsf'}
console.log(dict.a,dict['b'])
//6. 标识符
//是用来给变量命名的
//a. 由字母、数字、下划线和$组成，数字不能开头
var da_6$
//b. 不能是关键字
//c. 大小写敏感
//d. 规范：见名知义
var num = new Number()
console.log(num+10)
3. 变量的声明
//在js中可以通过声明变量来保存数据
/*
* 1.语法
* var 变量名;
* var 变量名 = 初值；
* 说明: var是关键字；
* 变量名：标识符，不能随意使用_或者$开头；驼峰式命名规则(第一个单词首字母小写，后面每个单词的首字母大写)
*/
//声明变量
var userName;
//给变量赋值
userName = 'Wang';
console.log(userName)
var score = 100
console.log(score)
//同时声明多个变量
var name, age, sex;
var name1='abc', age1 = 18, sex;
//一个变量可以存储任意类型的值；声明变量的时候，变量没有赋值，默认是undefined
var a = 'abc'
a = 100
a = score
4. 运算符
//1.数学运算符:+, -, *, /, %, ++, --
//a._,-,*, %和数学中的求和、求差以及求乘积,取余是一样的
var a = 10+20;
var b = 20 - 10;
var c = 10*20;
var d = 7 % 2
//b./ 和数学中的除一样
var e = 5/2
console.log(e)
//c.++,--（单目运算符）
/*
* 语法: 变量++/变量-- ； ++变量/--变量
* ++: 自加一
* --：自减一
*/
var a1 = 10
var b1 = 10
a1++
++b1
console.log(a1,b1) // 11, 11
a1--
--b1
console.log(a1, b1) // 10, 10
var c1 = a1++ // ++/--写到后面的时候，先赋值，再自加/自减
var c2 = ++b1 // ++/--写到前面的时候，先自加/自减，再赋值
console.log(c1, c2)
//2.比较运算符: >,<,==(相等),!=, >=,<=, ===(完全相等), !==,>==, <==
//结果都是布尔值
console.log(10 > 20) // false
console.log(10<20)
//==：判断值是否相等
console.log(5==5) //true
console.log(5=='5') //true
//===:判断值和类型是否相等
console.log(5===5) //true
console.log(5==='5') //false
console.log(5!=5, '5'!=5) //false,false
console.log(5!==5, '5'!==5) //false,true
//3.逻辑运算符：&&(与), ||(或), !(非)
console.log('与:',true && true, true && false)
console.log('或',true || false, false || false)
console.log('非',!true, !false)
//4.赋值运算符: =, +=, -= , *=, /=, %=
//赋值运算符的左边必须是变量
//和python的语法一样
var a = 100;
a += 10 // a = a+10
a -= 10
a *= 10
a /= 10
a %= 10
console.log(a)
//5.三目运算符
/*a.格式：
* 条件语句 ？值1 : 值2;
* b.结果:
*判断条件语句的结果是否是true,如果是true,那么表达式的结果就是值1，否则是值2
*/
var b = true ? 10:20;
console.log(b)
//求两个数之间的最大值
var a1 = 80
var a2 = 100
console.log(a1 > a2 ? a1:a2)
//6.运算符的优先级和python基本一样。可以通过括号来改变运算顺序
5. 分支结构
//js中的分之结构有两种:if语句，switch语句
/*1.if语句
* a.if(条件语句){满足条件要执行的代码块}
*/
var age = 18
if(age>=18){
console.log('成年')
}
//b.if(条件){语句块1}else{语句块2}
if(age>=18){
console.log('成年')
}else{
console.log('未成年')
}
//c.if - else if - else(相当于python中的if-elif-else)
if(age<18){
Console.log('未成年')
}else if(age<40){
console.log('青年')
}else{
console.log('老年')
}
//2.switch语句
/*
switch(变量){
case 值1:
语句1；
break;
case 值2：
语句2；
break;
...
default:
语句3；
break;
}
执行过程:使用变量的值依次和后边每个case后面的值进行判断，看是否相等(是否完全相等)。
如果相等就执行那个case后面对应的语句。如果前面每个case后面的值都和变量的值不相等，就执行default后边的语句
*/
var score = 10;
switch(score){
case 1:
console.log('F');
break;
case 10:
console.log('A+')
break;
case 9:
console.log('A');
break;
default:
console.log('其他');
break;
}
console.log('======')
//10分制分数：0-5：不及格，6-7：及格 8-9：良好 10：优秀
score = 9
switch(score){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('不及格');
break;
case 6:
case 7:
console.log('及格');
break;
case 8:
case 9:
console.log('良好');
break; // switch中的break，可以让switch直接结束
case 10:
console.log('优秀');
break;
}
//0-6表示星期1到星期日
var week = 0;
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;
default:
console.log('其他情况')
}
6. 循环结构
//js中的循环分为for循环和while循环
//1.for循环
//a.for- in (和python中的for循环一样)
// for(变量 in 数组/对象){函数体}
var arr1 = [1, 2, 'abc']
//x取的是下标
for(var x in arr1){
console.log(arr1[x])
}
var obj1 = {name:'张三', age:30}
//key拿到的是属性名
for(var key in obj1){
console.log(key, obj1[key])
}
var str1 = 'abcdef'
for(var x in str1){
console.log(x, str1[x])
}
//b.for(表达式1;表达式2；表达式3){循环体}
/*执行过程:先执行表达式1，然后再判断表达式2的结果是否是true,如果是true就执行循环体；执行完循环体，再执行表达式3；
* 执行完表达式3，再判断表达式2的结果是否是true，如果是true又执行循环体；执行完循环体，再执行表达式3；依次类推，
* 直到表达式2的结果是false,循环就结束
*/
//计算1+2+3+...+100
var sum = 0
for (var i = 1; i < 101 ; i++) {
// console.log(i)
sum += i
}
console.log(sum)
var sum1 = 0
var i = 0
for (; i < 101; ) {
sum1 += i
// i++;
i += 1
}
console.log(sum1)
//2.while循环
//a.while(条件语句){循环体} -- 和python一样
var sum2 = 0
var i = 1
while(i <= 100){
sum2 += i;
i++;
}
console.log(sum2)
//b.do-while循环: do{循环体}while(条件语句);
//执行过程，先执行循环体，然后判断条件是否成立。如果成立再执行循环体。。。
//依次类推，直到条件不成立，循环结束
var sum2 = 0
var i = 1
do{
sum2 += i;
i ++;
}while(i <= 100);
console.log(sum2)
//3.break和continue(和python一样)
7. 函数
//1.函数的声明
//function 函数名(参数列表){函数体}
//a.function - 关键字
//b.函数名 - 驼峰式；见名知义
//c.参数：参数可以有默认值，有默认值的参数要写在后面。调用函数传参的时候，是按实参的位置来传参。
// 保证每个参数都有值
//d.函数体: 实现函数的功能。只有在调用的时候才执行
function sum1(num2, num1=1){
console.log('求两个数的和')
return num1 + num2
}
console.log(sum1(10,20))
console.log(sum1(10))
//console.log(9/0)
//函数没有return的时候，函数的返回值是undefined
function func1(){
console.log('我是函数1')
}
console.log(func1())
//2.函数的调用
//函数名(实参列表)
//调用过程和python一样
//3.作用域
//全局变量:声明在函数外面的变量（从变量声明到文件结束）
//局部变量：声明在函数里面的变量 (从变量声明到函数结束；函数的参数也是局部变量)
//aaa就是全局变量
var aaa = 10
function func2(){
//bbb就是局部变量
var bbb = 100
console.log(bbb, aaa)
//函数中可以修改全局变量的值
aaa = 200
//函数中可以声明函数
function func22(){
bbb = 1.1
console.log(bbb)
}
}
func2()
//console.log(bbb)
console.log(aaa)
//可以将函数作为变量
var a = func2
a()
//个数不定参数，js不支持
8. 数据类型
//数字、字符串、布尔、列表、对象
//1.数字：包含整数和小数(支持科学计数法)
var num1 = 10
var num2 = new Number()
console.log(num2+10)
//2.字符串
//a.''和""括起来的字符集
//b.转义字符(和python一样)
//c.字符编码是unicode编码
var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\'
//e.获取字符串长度: 字符串.length
console.log(str1.length)
//f.获取单个字符:字符串[下标]
//下标：1.范围是0 ~ 长度-1 2.如果越界，不报错，但是结果是undefined
//js中的字符串不能切片
console.log(str1[0])
//g.运算符
//js中字符串只支持+，不支持*
// 字符串1 + 字符串2 -- 拼接两个字符串
// js中字符串可以和其他任何数据进行加操作，其效果都是字符串连接(会将其他数据转换成字符串)
console.log('123'+'abc', 'abc'+100)
//h.字符串相关方法（查）
var strstr = 'abc123'
var re = strstr.replace(/\d+/i,'ooo')
console.log(re)
//3.对象，构造方法(类)
var obj1 = {name:'YuTing', age:18}
console.log(obj1.name, obj1['name'])
//声明构造方法
function Person(name='', age=0, sex=''){
this.name = name
this.age = age
this.sex = sex
}
var p1 = new Person()
p1.name = 'mmm'
p1.age = 20
console.log(p1, typeof(p1))
网友评论