简介
1.什么是js
js是JavaScript的缩写，是一门专门用来处理网页中的行为的脚本语言，也是web标准中的行为标准
JavaScript和Java没有关系
2.在什么地方写js代码
window.alert() -- 在网页上面弹出一个对话框
内联的js：写在标签事件相关的属性中，例如：onclick属性,属性值是js代码
内部的js：写在script标签的内容中，script标签理论上是可以放在整个html文件的任何位置，
但是一般放在head或者body中
外部的js：写在外部的一个js文件（后缀是.js的文件）中，
然后再通过script标签设置src属性的值为js文件地址来导入
3.js能做什么事情
a.可以修改标签中的内容
b.修改标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 内部的js -->
<script type="text/javascript" >
window.alert('script标签中的js')
</script>
<script type="text/javascript" src="index.js">
</script>
</head>
<body>
<!-- 内联的js -->
<button type="button" onclick="window.alert('按钮被点击了!')">点我啊~</button>
<p id="p1">python基础</p>
<button onclick="document.getElementById('p1').innerHTML = 'js基础'">修改内容</button>
<button onclick="document.getElementById('p1').style.color = 'red'">修改颜色</button>
<script type="text/javascript">
document.write('<p>插入的段落</p>')
</script>
</body>
</html>
index.js :
window.alert('外部js')
一、js基础语法
<script type="text/javascript">
// 1.注释(和C的注释一样)
// 单行注释
/*
多行注释
多行注释
多行注释
*/
// 2.标识符
// 标识符就是用来命名的(给变量命名，函数命名，对象命名)
// js中要求标识符是由字符,数字,下划线和$浮组成,数字不能开头
// js中大小写敏感
var abc = 100
var abc, ab12, hj_23, hj$
// console.log() --> 在控制台打印括号中的内容
console.log(abc)
// 3.常用数据类型
/*
a.数字类型(Number),布尔(Boolean),字符串(String),数组(Array),对象(Object),函数(Function)等
数字类型(Number):包含所有的数字(整数和小数)
b.typeof(数据) - 获取数据类型
*/
100
13.9
-200
-12.34
2e2
console.log(2e2)
// 布尔(Boolean): true和false
true
false
// 字符串(String):用双引号或者单引号括起来
'abc'
"abc"
// 数组(Array):相当于python中的列表
[12, 23, 'abc', [1, 2]]
// 对象(Object):python中对象和字典的结合
var p1 = {
name:'abc',
age: 18,
gender: 'male'
}
// Function(函数):相当于python中的函数
function function_name(){
console.log('函数体')
}
function_name()
console.log(typeof(100))
console.log(typeof([1, 2, 3]))
// c. new类型名(数据) - 将数据转换成指定的类型
var a = new Boolean(100)
console.log(a)
// d. 常用的特殊值:undefined(相当于python中的None), null(一般用来清空变量)
// 4.格式:js没有缩进的要求
</script>
二、变量
<script type="text/javascript">
/*
语法：
var 变量名
变量名 = 值
说明：
var - 是js关键字，声明变量的时候用，var可以省略，省略的时候变量名后面必须赋值，
不省略的时候变量名后可以赋值，也可以不赋值，不赋值的时候默认值是undefined
变量名 - 标识符，不能是关键字。驼峰式命名规范
*/
// 声明一个变量
var name1
name2 = 'abc'
var name3 = 'efg'
// 同时声明多个变量
var age=18, sex, score=90
console.log(age, sex, score)
age1 = 10, sex1 = '男'
// 变量中的值:可以赋任何其他类型的值
age = '老年'
console.log(age)
// 注意:不支持这种写法
x, y = 10, 20
</script>
三、运算符
<script type="text/javascript">
// js中支持:数学运算符,比较运算符,逻辑运算符,赋值运算符,位运算符
// 1.数学运算符:+,-,*,/,%,**(js7),++,--
// +,-,*,/,%,**和python一样,但是js中不支持整除(//)
// ++(自加1),--(自减一)
// 变量++,++变量,变量--,--变量(注意：变量必须要有值)
// 注意赋值的时候,++和--写在变量的前面和后面对应的效果不一样
// 2.比较运算符: >,<,==,!=,>=,<=,===,!==,>==,<==
// 比较运算符的返回值都是布尔值
// ==(相等):判断值是否相等
// ===(完全相等):判断值和类型是否相等
console.log(5==5) //true
console.log(5=='5') //true
console.log(5===5) //true
console.log(5==='5') //false
// 3.逻辑运算符: &&(与), ||(或), !(非)
// 运算规则和python中的and, or, not 一模一样
// 4.赋值运算符:=, +=, -=, *=, /=, %=
// 和python一样
// 5.位运算符: &, |, ^, ~, >>, <<
// 和python一样
console(1&2, 1|2, 1^2, ~1, 2>>1, 2<<1)
// 6.复合运算:数学>比较>逻辑>赋值
// 可以通过加()来改变运算顺序
</script>
四、分支结构
<script type="text/javascript">
// js中的分支结构有两个,分别是if语句和switch语句
/*
1.if语句
a.结构：
if(条件语句){
代码段
}
说明：
if - 是关键字
() {} - 固定写法
执行过程：判断条件语句是否为true,为true就执行{}中的代码（不管缩进）
*/
number = 10
if(! (number & 1)){
console.log('是偶数')
console.log('=======')
}
/*
b.if-else结构:
if(条件语句){
代码段1
}else{
代码段2
}
c.if - else if - else结构
if(条件语句){
代码段1
}else if(条件语句2){
代码段2
}else if(条件语句3){
代码段3
}
……
else{
代码段n
}
else if 相当于python中的elif
*/
/*
2.switch语句
结构：
switch(变量/表达式){
case 值1：{
代码段1
}
case 值2：{
代码段2
}
case 值3：{
代码段3
}
……
default:{
代码段n
}
}
执行过程：先计算表达式的值，然后从上往下一一和case后面的值进行比较，找到第一个和表达式相等的case,
然后将这个case作为入口，依次执行后面的所有代码段，直到执行完或者遇到break为止。
如果没有哪个case的值和表达式的值一样，就直接执行default后面的代码段。
default可以省略。
必须是值的地址一模一样
*/
num = 10
switch(num){
case 1:
console.log('1')
case 2:
console.log('2')
case 10:
console.log('10')
case 11:
console.log('11')
default:
console.log('default')
}
// 10 11 default
// 练习1:从服务器获取到的星期对应的值是0-6,在程序中对应打印出其对应的星期值,周一至周天
week = 1
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
}
// 练习2: 有一个变量存绩点(整数：0-5), 0:不及格, 1-3及格, 4-5优秀
score = 3
switch(score){
case 0:
console.log('不及格')
break
case 1:
case 2:
case 3:
console.log('及格')
break
case 4:
case 5:
console.log('优秀')
break
default:
console.log('成绩有误！')
}
</script>
五、循环结构
<script type="text/javascript">
// js中的循环有for循环和while循环
/*
1.for 循环
a.for-in: 和python的for循环一样
for(变量 in 序列){
循环体
}
注意：取出来的是元素的下标
序列可以是字符串，数字和对象
*/
for(x in 'abc'){
console.log(x)
}
// 0 1 2
str1 = 'abc'
for(x in str1){
console.log(str1[x])
}
/*
b. C的for循环结构：
for(表达式1；表达式2；表达式3){
循环体
}
执行过程：先执行表达式1.再判断表达式2的结果是否为true,为true就执行循环体，执行完循环体再判断表达式3
再判断表达式2的结果是否为true,为true就执行循环体，执行完循环体再判断表达式3
依次类推，直到表达式2的结果为false,整个循环就结束
*/
2.while循环
a.while循环：和python的while循环一样
while(条件语句){
循环体
}
b.do-while循环
do{
循环体
}while(条件语句)
执行过程：先执行循环体，然后再判断条件语句是否为true；
为true执行循环体，执行完又判断条件语句是否为true；
以此类推，直到条件语句的结果为false，循环就结束
value = input('数字：')
while value !='0':
value = input('数字')
do{
value = input('数字：')
}while(value !='0')
*/
/*
3.break和continue
和python一样
</script>
六、函数
<script type="text/javascript">
// 函数分为声明和调用,声明的时候不会执行函数体,只有调用函数才会执行函数体
/*
1.函数的声明
a.和python相同的声明方式
function 函数名（参数列表）{
函数体
return 返回值
}
说明：
function - 声明函数的关键字
函数名 - 驼峰式命名，见名知意
参数列表 - 参数如果没有设置默认值，相当于设置默认值为undefined
返回值 - 没有return返回值是undefined
b.以声明变量的形式声明函数
函数名 = function (参数列表){
函数体
return 返回值
}
2.函数的调用：
函数名（实参列表）
调用的时候，保证每个参数都有值
只能通过位置参数传参
js中不支持不定长参数
*/
function sum1(num1=undefined, num2=undefined){
return num1 + num2
}
sum1(10, 20)
var sum12 = function (num1, num2){
return num1 * num2
}
sum12(10, 20)
</script>
七、数据类型
<script type="text/javascript">
/*
1.字符串：由单引号或者双引号括起来的
a.转义字符：和python一样
b.字符串长度：字符串.length
c.获取单个字符：字符串[下标]
注意：下标取值范围是0~长度-1；超出范围取到的是undefined
js中没有切片语法
*/
// 转义字符
console.log('abc\n123')
console.log('\tabc\'123')
// 获取字符串长度
console.log('123abc'.length)
// 获取单个字符
str1 = 'hello world'
console.log(str1[1])
/* 4.相关运算符
+ ：将两个字符串拼接在一起产生一个新的字符串
（注意：如果是一个字符串加上其他的数据，会先将其他数据转换成字符串再相加）
js不支持字符串的*运算符
比较运算（>,<,==,!=,===,!==)
>,< - 和python一样，比较Unicode编码值的大小
*/
console.log('abc'+'123')
/* 5.相关方法(看菜鸟的表)
match(正则表达式) - 根据正则表达式匹配结果
*/
str1 = '1231qwd23f32r23rf23f23r23rf23r23'
result = str1.match(/\d+/)
console.log(result)
</script>
八、数组
<script type="text/javascript">
// 数组就是python中的列表
/*
1.数组是有序，可变的,里面的元素可以是任意类型的数据
2.增删改查
a.查（获取数组中的元素）- 不支持切片
数字[下标]
数组.slice(开始下标，结束下标) - 切片
*/
arr1 = [1, 2, 3, 'abc']
console.log(arr1[3])
console.log(arr1.slice(1,3))
// 获取数组的长度
console.log(arr1.length)
/*
b.增（添加元素）
数组.push(元素)
*/
arr1.push('hello')
console.log(arr1)
/*
c.删(删除元素)
数组.pop()
数组.shift()
数组.splice(开始删除的下标，删除的个数) - 从数组指定的下标删除指定的个数元素
*/
result = arr1.slice(0, 2)
console.log(result, arr1)
arr1.splice(0, 2)
console.log(arr1)
/*
d.改（修改元素的值）
数组[下标] = 新值 - 修改指定下标的元素
数组.splice(开始下标，个数，多个其他参数) - 用其他参数替换开始下标开始后的指定个数个元素
*/
arr1 = [1, 2, 3, 4, 'abc']
arr1[0] = 10
console.log(arr1)
arr1.splice(1,2,'a')
console.log(arr1)
arr1.splice(1,2,'a','b')
console.log(arr1)
arr1.splice(1,2,'a','b','c')
console.log(arr1)
</script>
九、对象
<script type="text/javascript">
// js中没有python的类,只有对象和构造方法
/* 1.对象的字面量
对象名={属性名：属性值，属性名2：属性值2……}
*/
p1 = {
name:'xiaoming',
age:30,
tel:'12312414',
// 对象方法
eat:function(){
console.log('吃饭')
}
}
/*
2.使用对象属性
对象[属性名]
对象.属性
*/
console.log(p1['name'],p1.name)
p1.eat()
/*
3.构造方法 - 用来创建对象的
function 类名（参数列表）{
this.属性1 = 属性值1
this.属性2 = 属性值2
……
return this //这句话必须写
}
这儿的this类似python中的self,表示当前对象
*/
function Person(name1, age1){
this.name = name1
this.age = age1
this.tel = ''
this.sex = '男'
// 对象方法
this.eat = function(food){
console.log(this.name + '在吃' + food)
}
return this
}
p2 = Person('小明', 18)
p2.tel = '1723213132'
p2.eat('面条')
p3 = Person('小花', 20)
p3.sex = '女'
p3.eat('面包')
// 声明一个狗的对象对应的构造方法,拥有属性,颜色,年龄,品种;拥有方法:吃和叫
function Dog(color, age, type){
this.color = color
this.age = age
this.type = type
this.eat = function(food){
console.log(this.type + '在吃' + food)
}
this.bark = function(){
console.log(this.type + '在汪汪叫！')
}
return this
}
dog1 = Dog('黄色', 2, '土狗')
console.log(dog1.type)
dog1.eat('青菜')
dog1.bark()
</script>
网友评论