js的基本作用和使用方法
1.js是javas的缩写，是脚本语言。专门用来负责网页上的行为（可以直接写到网页当中）
2.在哪里去写JS代码
a.可以卸载script标签中（理论上script标签可以放到HTML文件中的任何位置，实际开发的时候一般放在head或者body里面）
b.写到标签的事件属性中（例如：onclick）
c.写到外部的JS文件中（.js）
3.JS在网页中能做什么事情
a.在网页的不同的位置插入HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS基础</title>
<!--导入外部的JS文件 -->
<!-- <script src="index.js"></script> -->
<script src="js/07-数据类型.js" type="text/javascript" charset="utf-8"></script>
<!--一个HTML中可以在多个位置中插入script标签 -->
<script type="text/javascript">
//在这里写JS代码
function inser(){
document.window.alert('<p>你好JS</p>');
}
</script>
</head>
<body>
<h1 id="hh">千锋所有学科</h1>
<!--修改标签的样式 -->
<button onclick="document.getElementById('hh').style.color='red'">修改样式</button>
<!--修改某个标签的内容 -->
<button onclick="document.getElementById('hh').innerHTML='name'">1999</button>
<script type="text/javascript">
for (var i=0;i <100;i++) {
document.write('<p>12324</p>');
}
</script>
</body>
</html>
1.js基础语法
1.JS中的注释
//这是单行注释
/*
这是多行注释
*/
2.语句
一条语句结束要加分号
一行写多行语句必须用分号隔开
3.js中没有缩进问题 用{}表示一个块
4.基本的数据类型
Number(数字),String(字符串),Boolean(布尔类型),Array(数组)--列表,Object(对象)--字典 ,Function(函数),null
在控制台中打印括号里面的内容功能和python中的print一样
console.log("hello world");
console.log("hello js");
5.字面量
数字字面量
89;
100;
10.34;
3e8;
字符串字面量
'abc';
"abc";
布尔字面量
true;
false;
数组字面量
[1,2,'ban','abc'];
[];
对象的字面量(对象的key值又是属性，不用加引号)
var dic = {q:'weuiq' ,b:'hh'}
console.log(dic.q, dic['b'])
6.标识符
使用标识符来命名
a.由字母、数字、下划线和$组成，数字不能开头
var huu9_$;
b.不能是关键字
var for
c.大小写敏感，大写和小写不一样
d.规范：1.见名知意
2.变量的声明
在js中可以通过声明对象来保存数据
1.语法
var 变量名;
var 变量名 = 初值;
说明：var是关键字：
变量名：标识符，不能随意使用_或者$开头；驼峰式命名规则（第一个单词首字母小写，后面每一个单词的首字母大写）
声明变量
var userName;
给变量赋值
userName = 'wang';
consolse.log(userName)
var score = 100
console.log(score)
同时声明多个值
var name, age,sex;
var name1='abc',age1=23,sex
一个变量可以存储任意类型的值，声明变量的时候，变量没有赋值，默认是undefined
var a = 'abc'
a =100
a = score
3.运算符
1.数学运算符： +,-,*,/,%,++,--
a.加减乘和取余 和数学中的一样
var a = 10+20
var b = 20-10
var c = 10*20
var e = 7 % 2
b./和数学中的一样
var d = 5/2
console.log(d)
c. ++ --
语法：变量++/变量-- ；++变量/--变量
++ 自加1
-- 自减1
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) //10 11
比较运算符: >,<,==(相等),!=,<=,>=,===(完全等于),!==,>==,<==
结果都是布尔值
console.log(10 > 20) //false
==:判断内容是否相等
console.log(5==5)
console.log(5=='5')
===:判断值和类型是否相等
console.log(5===5) //ture
console.log(5==='5') //false
console.log(5!==5) //false
console.log(5!=='5') //ture
3.逻辑运算符：&&（与），||（或），！（非）
console.log(true&&false,true&&false)
console.log(true||false,true||false)
console.log(!true)
4.赋值运算符: =,+=,-=,/=,+=,%=
赋值运算符的左边必须是变量和python一样
var a =100
a += 10
a -= 10
a %= 10
a /= 10
console.log(a)
5.三目运算符 ？：
语法：
条件语句 ？ 值1：值2
结果：判断条件语句的结果是否为true，如果是true，那么表达式的结果是值1，否则是值2
var b = 10 > 20 ? 10:20
求两个值的最大值
var a1 = 80
var a2 = 100
console.log(a1 > a2 ? a1:a2)
6.运算符的优先级和python基本一样,可以通过括号来改变运算顺序
4.分支结构
js中的分支结构有两种:if语句和switch语句
1.js中的if语句
a.if(条件语句){满足条件要执行的代码块}
var age = 18
if(age > 18){
console.log('成年')
}
b.if(条件语句){语句块1}else{语句块2}
var age = 18
if(age > 18){
console.log('成年')
}
else{
console.log('未成年')
}
c.if else if else(相当于else elif else)
var age = 18
if(age < 18){
console.log('未成年')
}
else if(age < 40){
console.log('青年')
}
else{
console.log('老年')
}
switvh语句
语法：
switvh(变量){
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; //如果没有break判断相等后的语句就会全部执行
case 4:
console.log('D');
break;
case 10:
console.log('A');
break;
default:
console.log('other');
break;
}
console.log('====')
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;
case 10:
console.log('优秀');
break;
0-6表示星期一到星期日
var week = 0
switch(week){
case 0:
console.log('week1');
break;
case 1:
console.log('week2');
break;
case 2:
console.log('week3');
break;
case 3:
console.log('week4');
break;
case 4:
console.log('week5');
break;
case 5:
console.log('week6');
break;
case 6:
console.log('week7');
break;
default:
console.log('other');
break;
}
5.循环结构
js中的循环结构分为for循环和while循环
for in (和python中的for循环一样)
for(变量 in 数组/对象){函数体}
var arr1 = [1,2,3,4,'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 = 'uwioe'
for(var x in str1){
console.log(x,str1[1])
}
b. for(表达式1;表达式2;表达式3){循环体}
执行过程：先执行表达式1，然后再判断表达式2的结果是否为true，如果是true就执行循环体；执行完循环体，再执行表达式3；
执行完表达式3，在判断表达式2的结果是否是true，如果是true又执行循环体；执行完循环体，再执行表达式3，以此类推，直到
表达式2的判断结果为false，循环结束。
计算1+2+..+100
var sum = 0
for (var i=1 ; i < 101 ;i++) {
sum += i;
}
console.log(sum)
while循环
a.while(条件语句){循环体}
计算1-100的值
var sum1 = 0
var i = 1
while(i <= 100){
sum1 += i;
i++
}
console.log(sum1)
do-while循环:do{循环体}while(条件语句);
先执行循环体,然后判断条件语句是否成立.如果成立再执行循环体，以此类推,直到条件不成立,循环结束。
比while先执行一次
var sum2 = 0
var i = 1
do{
sum2 += i;
i++;
}?
while(i <101)
console.log(sum2)
3.break和continue
和python一模一样.
6.函数
- 函数的声明
function 函数名(参数列表){函数体}
a.function 关键字
b.函数名 驼峰式命名：见名知意
c.参数：参数可以有默认值，有默认值的参数要写在后面。调用函数传参的时候，是按位置参数来传参。保证每一个参数都有值。
d.函数体：实现函数的功能。只有在调用的时候才会执行
function sum1(num1,num2=1){
console.log('两个数的和')
return num1+num2
}
console.log(sum1(10,20))
函数没有返回值的时候，函数的返回值就是underfined
function fun1(){
console.log('123')
}
console.log(fun1())
2.函数的调用
函数名(实参列表)
调用过程和python一样
3.作用域
全局变量：声明在函数外面的变量（从函数声明到文件结束）
局部变量：声明在函数里面的变量（从函数声明到函数结束，函数的参数也是局部变量）
aaa 全局变量
var aaa = 10
function fun2(){
//bbb 局部变量
var bbb = 10
//函数中可以修改全局变量的值
aaa = 200
//函数中可以声明函数
function fun222(){
bbb = 20
console.log(bbb)
}
}
fun2()
console.log(aaa)
可以将函数作为变量
var a = fun2()
a
个数不定参数,js不支持
7.数据类型
数字,字符串,布尔,列表,对象
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 = '\\n'
e.获取字符串长度 字符串.length
a = str1.length
console.log(a)
f.获取单个字符
下标 1.范围是0-长度-1 2.如果越界，不报错，结果是undefined
js中的字符串不能切片
console.log(str1[1])
g.+运算符
js中只支持+，不支持*
字符串1+字符串2 --拼接两个字符串
js字符串可以和其他任何数据进行加操作，其效果是字符串连接（把其他的转换成字符串）
console.log('123'+'abc'+'123'*2+100)
h.字符串方法(查)（这里有点问题，用的时候先查查资料）
var re = 'abc23'.search(/\d+/)
console.log(re)
3.对象 构造方法(类)
var obj1 = {name:'yuting',age:10}
console.log(obj1.name,obj1['name'])
声明构造方法
function person(name='',age=0,sex=''){
this.name = name
this.age = age
this.sex = sex
}
var p11 = new person()
p11.name = 'mmm'
p11.age = 20
p11.sex ='女'
console.log(p11.name,p11.age,p11.sex)
网友评论