2018-11-05 Day05 js基础语法
2018-11-05 本文已影响0人
EryangZ
00-什么是js
<!--
1.什么是js
js是javascript的缩写，是一门专门用来处理网页中的行为的脚本语言，也是web标准中的行为标准
javascript和java没有关系
2.常用事件
onclick -- window.alert(内容) 在网页内弹出一个对话框
3.在什么地方写js代码(针对网页来说)
内联js：写在标签事件相关的属性中，例如onclick属性,属性值是js代码
内部的js：写在script标签的内容中，script标签理论上是可以放在html文件的任意位置，但一般放在head或者body中
外部的js：写在一个外部的一个js文件中(后缀是.js的文件)，然后通过script的src属性来导入
4.js能做什么事情
a.js可以修改标签中的内容
b.修改标签的样式
c.插入html代码(写哪儿就在哪儿插入)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 内部的js -->
<!-- <script type="text/javascript"> -->
<!-- window.alert('script标签中的js') -->
<!-- </script> -->
<!-- 外部js
<!-- <script type="text/javascript" src="index.js"></script> -->
</head>
<body>
<!-- 内联js -->
<!-- <button type="button" onclick="window.alert('按钮被点了!')">点我啊</button> -->
<!-- 修改内容 -->
<p id="p1">puthon基础</p>
<button onclick="document.getElementById('p1').innerHTML = 'js基础'">修改内容</button>
<!-- 修改样式 -->
<button type="button" onclick="document.getElementById('p1').style.color = 'red'">修改样式</button>
<!-- 插入html代码 -->
<script type="text/javascript">
document.write('<p>插入的段落</p>')
</script>
</body>
</html>
01-js基础语法
<script type="text/javascript">
// 1.注释
//当行注释
/*
多行注释
多行注释
*/
//2.标识符
/*标识符是用来命名的，js中的标识符要求
是由字母、数字、下划线、$组成，数字不能开头
*/
//js中大小写敏感
//3.常用的数据类型
//a.数字类型(Number)、布尔(Boolean)、字符串(String)、数组(Array)
// 对象(Object)、函数(Function)等
//数字类型(Number):包含所有的数字(整数和小数、科学计数),不支持虚数
//布尔(Boolean):treu或者false
//字符串(String):支持双引号和双引号
//数组(Array):相当于python中的列表
//对象(Object):python中对象和字典的结合
//函数(Function):相当于python中的函数
//b.typeof(数据) - 获取数据类型
//c.new 类型名(数据) - 将数据转换为指定的类型
//d.常用的特殊值:undefined(相当于python中的None), null(一般用来清空)
//4.格式:js没有缩进的要求
</script>
<script type="text/javascript">
var abc = 100
console.log(abc)
var p1 = {
name:"余婷",
age:18,
sex:"女",
}
function func_name(){
console.log('函数体')
}
func_name()
console.log(typeof(100))
console.log(func_name)
var a = new Boolean(44)
console.log(a)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
02-变量
<script type="text/javascript">
/*
语法(最好用var声明):
a.var 变量名
b.变量名 = 值
说明：
var - js关键字，声明变量的时候写，用var声明变量的时候可以不给变量赋值，这时候默认值是undifind
省略的时候变量名后必须赋值
变量名 - 是标识符，不能是关键字，驼峰式命名规范,变量可以赋任何其他类型的值
*/
//声明一个变量
name1 = 'abc'
console.log(name1)
var name2 = '小红'
console.log(name2)
//同时声明多个变量
//不用var,必须每个赋值
age = 18, name = '小红'
console.log(age, name)
//用var
var age = 10, sex, name = '小明'
console.log(age, sex, name)
//注意:不支持这种写法
//x, y = 1, 2
</script>
03-js运算符
<script type="text/javascript">
//js中支持:数学运算符,比较运算符,逻辑运算符,赋值运算符,位运算符
//1.数学运算符:+ - * / % **(js7) ++(自加1) --(自减1)
console.log(10+20, 20-10, 20*10, 20/10, 20%10, 5**2)
//变量++, ++变量, 变量--, --变量(注意：变量必须要有值)
//2.比较运算符:> < == != >= <= === !==
// 返回值都是布尔值
// ==(相等) - 判断值是否相等
// ===(完全相等) - 判断值和类型是否相等
//3.逻辑运算符:&&(与) ||(或) !(非)
// 运算规则和python中的and or not一模一样
//4.赋值运算符:=. +=, -=, *=, /=, %=, **=
// 和python一样
//5.位运算符:& | ^ ~ >> <<
// 和python一样
//6.符合运算:数学>比较>逻辑>赋值
// 通过加括号来改变运算顺序
//++ -- 运用
var number = 25
number++
console.log(number)
++number
console.log(number)
number--
console.log(number)
var number1 = 1, number2
number2 = number1++ //相当于:number2=number1;number1++
console.log(number1, number2) // 2, 1
var number11 = 1, number22
number22 = ++number11 //相当于:;number11++;number22=number11
console.log(number11, number22) // 2, 2
//== ===运用
console.log(5==5)
console.log(5=='5')
console.log(5===5)
console.log(5==='5')
</script>
04-分支结构
<script type="text/javascript">
//js中的分支结构有两个,if语句和switch语句
/*
1.if语句
a.结构：
if(条件语句){
条件语句成立执行的代码块
}
说明：
if - 关键字
(){} - 固定写法
b.if - else
if(){
}else{
}
c.if - else if - else
if(){
}else if(){
}else{
}
执行过程：判断条件语句是否为true，为true执行大括号的内容(不管缩进问题)
*/
//if判断是否偶数
var num = 9
if(! num&1){
console.log('是偶数')
}else{
console.log('是奇数')
}
/*
2.switch语句
结构:
switch(变量/表达式){
case 值1:{
代码段1
}
case 值2:{
代码段2
}
default:{
代码段3
}
}
执行过程：
先计算switch变量或者表达式的值，从上往下找到值与表达式相等的case，执行相应的case后面的所有的代码段，执行完或者遇到break为止
*/
//switch语句
num = 10
switch(num){
case 1:{
console.log('1')
}
case 10:
console.log(true)
default:
console.log('没有找到')
break
case 3:
console.log('3')
}
//练习:或服务器获取到的星期对应的值是0-6,在程序中对应打印出其对应的星期值
week = 5
switch(week){
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
case 0:
console.log('星期日')
}
//练习2:有一个变量存绩点(整数：1-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('优秀')
default:
console.log('成绩有误')
}
</script>
05-循环结构
<script type="text/javascript">
//js中的循环有for循环和while循环,每种循环有两种结构
/*
1.for循环
a.for-in循环：和python的for循环的执行过程一样，但取出来的是元素的下标
结构：for 变量 in 序列{
循环体
}
b.c结构的for循环
结构：for(表达式1；表达式2(为条件语句)；表达式3){
循环体
}
执行过程:先执行表达式1，再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体再执行表达式3
执行完表达式3在判断表达式2的结果是否为true，为true就执行循环体，执行完再执行表达式3，指导表达式2的结果为
false，整个循环就结束
书写思想：表达式1里面写循环开始前的准备工作
表达式2中写控制循环次数的条件
表达式3中写的是让表达式2的条件接近于结束的条件
*/
// for-in循环遍历出的是下标或者属性名
a = [10, 20, 30]
for(x in a){
console.log(x, a[x])
}
object1 = {name:'小明', age:18}
for(x in object1){
console.log(x, object1[x])
}
//c的for循环 1+2+..100
for(num = 1, sum1 = 0; num <= 100;num += 1){
sum1 += num
// console.log(sum1)
}
console.log(sum1)
/*
2.while循环
a.while循环:和python的while循环一样
格式：while(条件语句){
循环体
}
b.do-while循环
格式:do{
循环体
}while(条件语句)
执行过程：先执行循环体，然后再判断条件语句是否为true；为true就执行循环体，执行完在判断
直到条件语句的结果为false，循环就结束
3.break continue 和python一样
*/
</script>
06-函数
<script type="text/javascript">
//函数分为声明和调用,声明的时候不会执行函数体,只有调用才会执行函数体
/*
1.函数的声明
a.和python相同的声明方式
function 函数名(参数列表){
函数体
return 返回值
}
说明：function - 声明函数的关键字
函数名 - 驼峰式命名，见名知义
参数没有设置默认值，默认为undefined
返回值 - 没有return返回值为undefined
函数的调用：
格式：函数名(实参列表)
调用的时候保证每个参数都有值
关键字参数没有效，只能通过位置参数传参,也不支持不定长参数
*/
function sum2(num1, num2){
return num1 + num2
}
console.log(sum2(1, 2))
/*
b.以声明变量的形式声明变量
函数名 = function(参数列表){
函数体
return 返回值
}
*/
// 两数之和
sum12 = function(math, chinese){
return math * chinese
}
console.log(sum12(10, 10))
</script>
07-字符串
<script type="text/javascript">
/*
1.字符串：有单引号或者双引号括起来
a.字符串内可以有转义字符：和python一样
b.字符串长度：字符串.length
c.获取单个字符：字符串[下标]
注意：js中的下标范围是0-长度-1，超出范围取到的是undefined
js中没有切片语法
d.相关运算符
+:将两个字符串拼接在一起，如果是字符串加上其他数据，会先将其他数据转化成字符串再拼接在一起
比较运算(> < == != === !== <= >=):和python一样，比较字符的编码值大小
e.相关方法(看菜鸟的表)
match(正则表达式) - 根据正则表达式匹配结果
*/
console.log('abc\n123')
console.log('abcde12345'.length)
// 获取单个字符,不支持负的
str1 = 'abcdefg'
console.log(str1[1])
// 运算
a = 'abc', b = 'def', c = 10
console.log(a + b)
console.log(a + c, a + true, a + [1, 2, 3])
// console.log(a*c) 不支持乘法,结果为NaN 表示数字不存在
console.log(c/0) //结果为Infinity 表示无穷大
console.log(a > b)
// 相关方法
str1 = 'abc23hjs89jskk834jsdfj78hfjh9sdf9'
result = str1.match(/[a-zA-Z]+/)
console.log(result)
result2 = str1.replace(/\d+/, '*')
console.log(result2)
</script>
08-数组
<script type="text/javascript">
//数组就是python中的列表
/*
1.数组是有序、可变的
2.增删改查
*/
/*
a.查(获取数组中的元素, 不支持切片)
只能获取单个不能获取部分
数组[下标]
b.增(添加元素)
push() - 将元素添加到数组的最后，相当于python中的append
c.删
array.pop() - 删除最后一个元素
array.shift() - 删除开始元素
array.slice(开始下标，结束下标) - 切片
array.splice(开始下标，个数) - 从开始下标开始删除指定个数元素
d.改(修改元素的值)
数组[下标] = 新值
array.splice[开始下标，个数，多个其他参数] - 先删除开始下标加个数选择的元素，再在开始下标处添加多个其他的参数
*/
arr1 = [1, 2, 3, 'abc']
console.log(arr1[3])
console.log(arr1.length) //获取数组长度
arr1.push('hello')
arr1[5] = 8
console.log(arr1)
arr1.pop()
console.log(arr1)
result = arr1.slice(0, 2) //切片
console.log(result, arr1)
result = arr1.splice(3, 1)
console.log(result, arr1)
arr2 = [1, 2, 3, 5] //改
arr2[0] = 10
console.log(arr2)
arr2.splice(0, 2, 'b', 'a', 'c') //将开始下标的到个数的元素删除,然后再开始下标处增加后面的元素
console.log(arr2)
</script>
09-对象
<script type="text/javascript">
/*
js中没有python中的类，只有对象和构造方法
1.对象的字面量
{属性名:属性值， 属性名:属性值......}
2.使用对象属性
对象[属性名]
对象.属性
*/
p1 = {
//对象属性
name:'小明',
age:18,
tel:'213213',
//对象方法
eat:function(){
console.log('吃饭')
}
}
console.log(p1['name'])
console.log(p1.age)
p1.eat()
/*
3.构造方法(有点类似python中的类)
function 名字(参数列表){
this.属性1 = 属性值1
this.属性2 = 属性值2
return this
}
这儿的this类似于python中的self，表示当前对象
*/
function Person(name, age, tel){
//属性
this.name = name
this.age = age
this.tel = tel
//方法
this.eat = function(food){
console.log(this.name + '再吃' + food)
}
return this
}
p1 = Person('小明', 18, 1800000000)
console.log(p1.name, p1.age, p1.tel)
p1.eat('🍎')
//声明一个狗的对象对应的构造方法,颜色 年龄 品种,方法 吃 叫
function Dog(name, color, age, kind){
this.name = name
this.color = color
this.age = age
this.kind = kind
this.eat = function(food){
console.log(this.name + '在啃' + food)
}
this.bark = function(){
console.log('汪汪汪')
}
return this
}
d1 = Dog('旺财', '红色', 1, '中华田园犬')
d1.bark()
d1.eat('骨头')
</script>
