一、认识JavaScript
1、js是Javascript的缩写，是一门专门用来处理页面中的行为的脚本语言，也是web标准中的行为标准。
注意：JavaScript和Java没有任何关系
2、在哪里写JavaScript代码
- Window.alter() ：弹出一个对话框
- a、内联的js：写在标签事件相关的属性，例如：onclick属性，其属性值就是js代码
- b、内部的js：写在script标签中，script标签理论上可以放在HTML文件的任意位置，但是一般放在head或body中
- c、外部的js：写在外部的一个js文件中，后缀是.js的文件，然后通过设置script标签的src属性来导入js文件
<script type="text/javascript" src=""></script>
3、js的功能
- a、js可以修改标签中的内容
- b、可以修改标签的样式
- c、可以通过js插入HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/index.js">
</script>
</head>
<body>
</body>
</html>
二、js基础语法
<script type="text/javascript">
// 1. 注释
//单行注释
/*多行注释*/
// 2. 标识符
// 标识符就是用来命名的
// js中要求标识符是由字符 数字 下划线和$组成,数字不能开头
var abc = 10
console.log(abc) //在控制台打印内容,这也是js的打印语句
// 注意:在js中大小写敏感
// 3. 常用数据类型
// Number (数字类型):包含了所有的数字(整数、小数、正负都行),支持科学计数法, 不支持虚数(就是复数的j)
// Boolean(布尔):true或false
// String(字符串):由单引号或者双引号括起来的就是字符串
// Array(数组):数组相当于python中的列表,可以是多种数据类型的的元素
// Object(对象):是python中字典和对象的结合
如:
{
name：'张三',
age: 18,
sex:'男'
}
// function(函数):相当于python中的函数
function fun1(){
console.log('函数')
}
fun1()
// 4. 常用函数
// 1. typeof(数据):获取数据对应的类型
console.log(typeof(100))
// 2. 数据类型转换
// new 类型名(数据) : 将数据转换成对应的类型
var a = 3
console.log(new Boolean(a))
// 5、常使用的特殊值
// undefined, null
// undefined:未定义,相当于python中的none
// null:用于清空数据,一般用来清空变量
// 注意：js没有严格的缩进要求
// 6. 声明变量
// 语法:var 变量名
// a = 10 这样也行,省略var变量名必须赋值,不省略的时候变量名后可以不赋值,但值为undefined
// 说明:var是js的一个关键字
var a = 'abc'
name = '小明'
console.log(a)
console.log(name)
// 变量名不能是关键字,遵循驼峰式命名userName
// 同时声明多个变量
var a, b, c, d
var a = 10, b = 29, c = 90
e = 3, g = 'pk'
// 7.变量赋值:变量类型可以是其他任何类型的值
age = 10
age = 'kkkk'
console.log(age)
// x, y = 10, 20 :不支持这种方式
</script>
三、运算符
<script type="text/javascript">
// 1. js支持:数学运算符 比较运算符 逻辑运算符 赋值运算符 位运算符
// 数学运算符:+ - * / % **(js7) ++ -- js不支持整除运算(//)
// ++:自加1 ++变量 或者 变量++ (变量必须有值)
// --:自减1 --变量 或者 变量--
// 注意:下面两种用法
var num1 = 10, num2
num2 = num1++
// 先用在加
// num2 = num1
// num1 += 1
console.log(num1, num2)
var num11 = 10, num12
num12 = ++num11
// 先加在用
num11 = num11 + 1
num12 = num11
console.log(num11, num12)
// 2. 比较运算符(> < == != >= <= === !== >== <==)
// == : 判断值是否相等
// === :完全相等, 判断值和类型是否相等
console.log(5 == 5) //true
console.log(5 == '5') //true
console.log(5 === 5) //true
console.log(5 === '5') //false
// 3. 逻辑运算符: &&(与) ||(或) !(非)
// 运算规则和python中的逻辑运算一样
// 4. 赋值运算符: = += -= *= /= %=
// 5. 位运算: &(按位与) |(按位或) ^(异或) ~（取反） >>（右移） <<(左移)
// 6. 运算优先级
// 数学运算 > 比较运算 > 逻辑运算 > 赋值运算
// 可以通过括号来改变运算顺序
</script>
四、分支结构
<script type="text/javascript">
// 1. js中的结构
js中分支结构有两个if和switch语句
if语句结构:
if(条件语句1){
语句块1
}
// 还有:if-else和 if(条件)-else if(条件1).....-else
if(){
}else if(){
}else if(){
}else{
}
// 2. switch分支结构语句
switch(变量或者有值得表达式){
case value1: {代码段1}
case value2: {代码段2},
.....
default:{代码段n}
}
// 执行过程:先计算表达式的值,然后从上往下一一和case比较,找到第一个与表达式相等的case,然后将这个case作为入口,依次执行后面的代码段直到执行完或者遇到break为止, 但是当没有任何case值和表达式的值一样就直接执行default后面的代码段.default可以省略
// 注意:case后面必须是一个具体的值
num = 3
switch (num){
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('未找到匹配对象')
break;
}
switch (){
case value1:
break;
case value2:
case value3:
case value4:
语句代码
......
default:
break;
}
</script>
五、循环结构
<script type="text/javascript">
// 1. for循环
for - in 和python中的执行过程一样
for （变量 in 序列）{
循环体
}
// 注意:for-in循环遍历字符串、数组、对象时取出的是元素的下标
// 序列:字符串/数组/对象
arr = ['aa', 'ffd', 'jfd']
for (i in arr) {
console.log(i, arr[i])
}
// 与c语言的for循环一样
for(语句1; 表达式2; 语句3){
循环体
}
// 语句1用于写循环开始时的准备工作
// 表达式2:控制循环次数
// 语句3:改变循环次数
// var sum = 0
for(i = 1, sum = 0; i <= 100; i++){
sum += i
}
console.log(sum)
// 2. while循环 和python的循环一样
while(条件){
循环体
}
// 3. do....while(条件);
do{
循环体
}while();
// 过程:先执行循环体,在判断条件,直到条件为false才结束循环
j = 0
do{
j++
console.log(j)
}while(j < 2);
// js中的关键字就是break和continue和python中的差不多
</script>
六、js内置函数
<script type="text/javascript">
// 1. 函数分为声明和调用,声明的时候不会执行函数体,只有调用时 才会执行函数体
声明函数:
function 函数名(参数列表){
函数体
return 返回值
}
// 说明:function是声明函数的关键字,遵循驼峰式命名法,见名知义
function sum(a, b){
return a + b
}
console.log(sum(23, 43))
// 注意:函数在调用时如果不传参,系统会给一个默认值undefined,所以在js中如果没有给函数形参参数传参,不会报错,但是注意调用时参数可以传多个,
// js中也支持默认参数, 但不支持关键字参数,只能通过位置参数传参, js中不支持不定长参数(因为js不支持元祖)
// js中如果函数没有返回值,则返回一个undefined,类似于python中的none
以声明变量的形式声明函数
函数名 = function(参数列表){
函数体
return 返回值
}
sum = function(num1, num2){
return num1 * num2
}
console.log(sum(5, 5))
</script>
七、字符串
<script type="text/javascript">
// 1. 字符串:有单引号或双引号括起来的就是字符串
//转移字符和python一样
// 获取字符串长度字符串.length, 即字符个数
console.log('123'.length)
// 获取单个字符 字符串[下标] 下标只能是0~长度-1(-负数无效，超出范围不会报错，但会显示一个undefined)
console.log('123'[5])
// 注意:js中不支持切片操作
// 字符串支持的运算符
console.log('123' + 'dfd')
console.log('123' + 74)
console.log('123' + true)
console.log('123' + ['fdf', 123, 'fdd'])
// 支持加运算(字符串拼接),产生一个新的字符串
// js支持不同类型的数据相加, 因为js会将其他类型的数据转换成字符串再相加
console.log(new String(['fdf', 123, 'fdd']))
// 乘操作
console.log('abc' * 3)
// 注意:NaN是数字类型中的一个特殊值, 表示一个不存在的数字
// Infinity表示无穷大
// 比较运算(> < == != === !==)
// js采用Unicode编码
// 字符串比较大小,是逐个比较字符编码值大小
// 相关方法
// match(正则表达式)
str1 = 'fkdkHej876f78dfkjh34i8r3njk0-of0[]fdpor3o3'
re = str1.match(/[a-z]+/)
console.log(re[0])
// replace(正则表达式，替换子串)
re1 = str1.replace(/\d+/m, '*')
console.log(re1)
</script>
八、数组
<script type="text/javascript">
// 1. 数组就是python中的列表
// 获取数字元素
// 下标获取
// 数组[下标] 下标范围：0~长度-1
// 里面的元素可以是任意类型的数据
console.log(['a', 'b', 'f'][2])
console.log(['a', 'b', 'f'].length) //获取数组的长度
// 注意:JavaScript不支持切片,但是提供下面的方法来切片
// 数组.slice(开始下标, 结束下标) 切片操作,含头不含尾
console.log(['a', 'b', 'f', 'ffd', '23'].slice(2, 3))
// 增加元素
// JavaScript中就只有一个添加操作
// 数组.push(元素) 添加元素
console.log(['a', 'b', 'f'].push('c'))
// 数组.pop() 删除最后一个元素
console.log(['a', 'b', 'f'].pop())
// 数组.splice(开始删除的下标, 删除个数) 从数组指定的下标开始删除指定个数元素
console.log(['a', 'b', 'f', 'ffd', '23'].splice(2, 3))
// 修改元素
// 数组[下标] = 新值
arr1 = ['a', 'b', 'f', 'ffd', '23']
arr1[0] = 'abc'
console.log(arr1)
// 数组.splice(开始下标, 个数, 多个其他参数) 用其他参数替换开始下标开始后的指定个数的元素
arr1 = ['a', 'b', 'f', 'ffd', '23']
arr1.splice(1, 2, '123')
console.log(arr1)
</script>
九、对象
<script type="text/javascript">
// 1. JavaScript中没有python中的类, 只有对象和构造方法
// 2、对象字面量
{属性1:值1, 属性2:值2.....}
创建对象
p1 = {
// 对象属性
name : 'zhangsan',
age : 20,
tel : '12323',
// 对象方法
eat : function(){
console.log('吃饭')
}
}
// 使用对象属性
console.log(p1['name'])
console.log(p1.name)
// 修改属性值
p1.name = 'lisi'
console.log(p1['name'])
// 调用对象方法
p1.eat()
// 声明构造方法
// 构造方法中的this就相当于python中的self,指向一个对象
function 类名(参数列表){
this.属性1 = 值1
this.属性2 = 值2
......
return this //固定写法,必须这么写
}
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('张三', 12, '2323232')
console.log(p1.name)
p1.eat('饭')
// 练习:实现以dog类
function Dog(color, age, kind){
// 属性
this.color = color
this.age = age
this.kind = kind
// 方法
this.eat = function(food){
console.log('狗在吃' + food)
}
this.hang = function(){
console.log('狗在叫')
}
return this
}
dog1 = Dog('黄色', 2, '本地的')
console.log(dog1.color, dog1.age, dog1.kind)
dog1.eat('饭')
dog1.hang()
</script>
网友评论