1.变量的作用域
<script type="text/javascript">
//函数声明语法：
/*
function 函数名(参数列表){
函数体
}
函数变量 = function(参数列表){
函数体
}
*/
//1. 全局变量：
/*
a. 声明在函数外部的变量（从声明开始到文件结束）
b. 直接声明在函数内的变量（不加var）
注意：后面的其他的script标签中也可以使用
*/
a100 = 10
var a200 = 100
//2. 局部变量
/*
通过var关键字声明在函数里面的变量是局部变量（声明开始到函数结束可以使用）
*/
function func2(){
//b100是全局变量
b100 = 20
//b200是局部变量
var b200 = 200
console.log(b200)
}
func2()
console.log(b100)
console.log(b200)
function func1(){
console.log(a100)
console.log(a200)
console.log(b100)
}
func1()
b = 1
while(b < 5){
console.log(a100)
console.log(a200)
b++
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
console.log(a100)
console.log(a200)
</script>
2.字符串
<script>
//1. 字符串运算
//a. 加法运算:做字符串拼接操作
//注意：js中支持字符串和其他数据相加
str1 = 'abc'
str2 = 'hello'
console.log(str1 + str2)
console.log(str1 + 100)
console.log(str1 + [1, 2, 3])
//b. 比较运算：>, <,>=,<=,==,===,!=,!==
//1)比较相等
console.log('abc' == 'abc') //true
console.log('abc' == 'bac') //false
console.log(100 == '100') //true
console.log(100 === '100') //false
//2) 比较大小：和python字符串比较大小的方式一样
console.log('abc' > 'bd') //false
console.log('z' > 'shkhfkshshfks') //true
//c. 字符串长度
//字符串.length
console.log(str2.length)
//2.相关方法
//创建字符串对象
str3 = new String('abc')
console.log(str3)
//1）.big方法
//产生一个big标签，并且标签中的内容就是字符串的值
newStr = str3.big()
console.log(str3, newStr)
//2）.charAt(下标)
//获取指定下标对应的字符；相当于字符串[下标]
console.log(str3.charAt(1))
console.log(str3[1])
//3）.charCodeAt(下标)
//获取指定下标对应的字符的编码(js中的字符采用的也是unicode编码)
console.log(str3.charCodeAt(1))
//4）字符串.concat(数据1，数据2，...)
//将字符串和多个数据依次连接在一起产生一个新的字符串（相当于+的功能）
console.log('abc'.concat(123,'aaa')) //abc123aaa
//5)字符串1.endWith(字符串2)
//判断字符串1是否以字符串2结尾
console.log('hello'.endsWith('llo')) //true
//6)字符串1.indexOf(字符串2)
//获取字符串2在字符串1中第一次出现的位置
console.log('abcbssj'.indexOf('ab'))
//7)字符串1.lastIndexOf(字符串2)
//获取字符串2在字符串1中最后依次出现的位置
console.log('abcabcabc'.lastIndexOf('c'))
//8)字符串1.match(正则表达式)
//正则表达式写在/之间/
//match相当于python中re模块的match
//注意：js中正则写在两个//之间，正则之后加$后的match是python中的fullmatch
re = /\d{3}/
result = '234abc'.match(re)
console.log(result, result[0], result.index)
//9)字符串.repeat(数字)
//指定的字符串重复出现指定次数产生一个新的字符串(相当于pyhon中的*)
console.log('abc'.repeat(2))
//10)字符串1.replace(正则表达式，字符串2)
//将字符串1中匹配的第一个正则替换成字符串2
console.log('aaa34bbb992nnn92hjdhj'.replace(/\d+/, 'A'))
//11)字符串1.slice(开始下标，结束下标)
//从开始小标获取到结束下标前为止，步长是1
//注意：这儿的下标可以是负数，代表倒数第几个
console.log('hello'.slice(0, 2)) //he
console.log('hello'.slice(1, -2)) //el
//12)字符串1.split('字符串2')
//将字符串1按照字符串2进行切割，返回的是一个数组
console.log('hello'.split('e'))
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
3.数组
<script >
//1.基本操作
//1).加法运算：两个数组相加实质是将数组转换成字符串然后拼接
console.log([12, 3, 'abc'] + [1, 2, 3]) //12,3,abc1,2,3
console.log(String([1, 2, 3])) //1,2,3
//2).比较运算
//==、===判断相等是判断地址是否相等，相当于python中的is
arr1 = [1, 2]
arr2 = [1, 2]
console.log(arr1 === arr1) //true
console.log(arr1 == arr2) //false
//3).数组长度：length属性
console.log(arr1.length)
//2.元素的增删改查
//1)查：获取元素
//a.获取单个元素
//数组[下标] - 获取下标对应的元素
//注意：负数的下标没有意义
fruits = ['苹果', '梨', '葡萄', '西瓜', '桃子', '李子']
console.log(fruits[1])
//b.切片：
//数组.slice(开始下标，结束下标)
//注意：结束下标取不到；下标可以是负数；开始下标要在结束下标的前面
console.log(fruits.slice(0, 3))
console.log(fruits.slice(3, 0)) //[]
console.log(fruits.slice(3, -2))
//c.遍历
for(index in fruits){
console.log(fruits[index])
}
//2)增：添加元素
//数组.push(元素) - 在指定的数组的最后添加一个元素
fruits.push('香蕉')
console.log(fruits)
//3)删：删除元素
//数组.pop() - 删除最后一个元素
//
fruits.pop()
console.log(fruits) //["苹果", "梨", "葡萄", "西瓜", "桃子"， "李子"]
//数组.splice(下标，个数) - 从指定下标开始删除指定格式的元素
fruits.splice(1, 2)
console.log(fruits) //["苹果", "西瓜", "桃子", "李子"]
//4)改:修改元素
//数组[下标] = 新值 - 修改指定下标对应的值
fruits[0] = '山竹'
console.log(fruits)
//3.相关方法
fruits = ['苹果', '梨', '葡萄', '西瓜', '桃子', '李子']
//1)数组.reverse()
//倒序
fruits.reverse()
console.log(fruits) //["李子", "桃子", "西瓜", "葡萄", "梨", "苹果"]
//2)数组.sort(函数) - 按指定规则对数组中的元素进行排序
//函数的要求：两个参数(代表的是数组中的两个元素)，一个返回值(两个元素或者两个元素的属性的差)
//元素从小到大排序
scorts = [23, 28, 17, 87, 98]
scorts.sort()
console.log(scorts) //[17, 23, 28, 87, 98]
students = [
{'name':'小明', 'score':60, 'age':29}
{'name':'张三', 'score':80, 'age':19}
{'name':'小花', 'score':65, 'age':20}
]
//从小到大排
function ageCom1(item1, item2){
return item1['age'] - item2['age']
}
//从大到小排
function ageCom2(item1, item2){
return item2['age'] - item1['age']
}
students.sort(ageCom1)
console.log(students)
//年龄从大到小排
students.sort(function(a,b)){
return b - a
}
console.log(students)
//3)数组.jion(字符串)
//将指定的字符串插入到数组的每个元素之间产生一个新的字符串
nums = [10, 34, 89, 1]
newData = nums.join('aaa')
console.log(newData) //10aaa34aaa89aaa1
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
4.对象
<script type="text/javascript">
//1.对象字面量
//用大括号括起来，里面是对个属性，属性名和属性值之间用冒号连接，多个属性之间用逗号隔开
//注意：1)对象字面量需要保存 2)属性名可以加引号也可以不加(没有区别)
obj1 = {
'name':'余婷',
'age':'18',
sex:'女'
}
console.log(obj1)
//2.获取对象属性
//1)对象[属性名] - 属性名必须加''
console.log(obj1['name'], obj1['sex'])
//属性保存在变量中必须用这种方式
proName = 'age'
console.log(obj1[proName])
//2)对象.属性 - 属性不能加引号
console.log(obj1.name, obj1.sex)
//3.增：添加属性
//1)对象.属性 = 值
//2)对象[属性名] = 值
//属性存在是修改
obj1.name = '小明'
obj1['name'] = '小花'
console.log(obj1)
//属性不存在时添加
obj1.height = 180
obj1['weight'] = 70
console.log(obj1)
//4.构造方法 - 创建对象的方法
/*语法
function 类名(参数列表){
对象属性
对象方法
}
说明：
a.对象属性：this.属性名 = 值
b.对象方法：this.方法名 = 匿名函数
c.类名：首字母大写
*/
function Person(name = '张三', age = 18, sex = '男'){
//这的this相当于python中的self
//对象属性
this.name = name
this.age = age
this.sex = sex
//对象方法
this.eat = function(food){
console.log(this.name + '吃' + food)
}
}
//5.创建对象
//对象 = new 构造方法()
//创建对象
p1 = new Person()
console.log(p1)
//获取对象属性
console.log(p1.name, p1.age, p1.sex)
//调用对象方法
p1.eat('apple')
p2 = new Person('小明', 20, '女')
console.log(p2)
p2.eat('面条')
//注意：js中声明全局变量实质都是添加window对象的属性
p3 = Person()
p3 = window.Person()
console.log(p3)
// window.alert('弹窗')
alert('弹窗')
a = 10
console.log(window.a)
//6.添加类的全局的属性
//类名.prototype.属性名 = 属性值 - 给指定的类的所有对象添加属性
Person.prototype.height = 180
Person.prototype.run = function(){
console.log(this.name + '在跑步!')
}
p4 = new Person('老骆', 30, '男')
console.log(p4, p2)
p4.run()
p1.run()
p2.run()
//练习:给数组添加方法，来统计数组中指定元素的个数
Array.prototype.ytCount = function(item){
num = 0
for(i in this){
item1 = this[i]
if(item1 == item){
num++
}
}
return num
}
console.log([1, 2, 4, 3, 5, 2, 2].ytCount(2))
//练习1：声明一个创建学生的构造方法，有属性姓名、年龄、成绩、学号，要求成绩学生
//对象的时候姓名必须赋值，年龄可以赋值也可以不赋值，成绩和学号不能赋值
function Student(name, age = 12){
this.name = name
this.age = age
this.score = 60
this.num = 19
}
stu1 = new Student('小明')
console.log(stu1)
//练习2：给String添加方法，添加字符串中字母字符的个数
String.prototype.letterCount = function(){
num1 = 0
i = 0
while(i < this.length){
ch = this[i]
if(('a' <= ch && ch <= 'z') ||( 'A' <= ch && ch <= 'Z')){
num1++
}
i++
}
return num1
}
console.log('hj0000'.letterCount())
//7.系统的对象和类
//document对象
//window对象
//Element类型的对象
//Date类型的对象
//...
//创建当前时间对象
date1 = new Date()
console.log(date1)
//年
year = date1.getFullYear()
//月 - 从0开始
month = date1.getMonth()
//日
day = date1.getDate()
//时
hours = date1.getHours()
//分
min = date1.getMinutes()
//秒
sec = date1.getSeconds()
//星期
week = date1.getDay()
console.log(''.concat(year,'年',month+1,'月',day,'日',' ',hours,':',min,':',sec))
console.log('星期',week)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
5.dom操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id='p1'>我是段落</p>
<a href="" class="c1">我是a标签</a>
<h1 class="c1">我是标题1</h1>
<input type="" name="input" />
<div id="div1">
<p>我是段落2</p>
<a href="">新浪</a>
<h2>我是标题2</h2>
</div>
</body>
</html>
<script type="text/javascript">
//1.DOM(文档对象模型：document object mode)
//1)document对象:指的是指向整个网页内容的一个对象
//2)节点：Element类型对象，指向的是网页中的标签
//2.获取节点
//1)通过id获取节点:getElementById(id值) - 返回节点对象(实质就是指向指定标签的对象)
p1Node = document.getElementById('p1')
console.log(p1Node)
//innerText是标签文本内容
p1Node.innerText = 'hello js'
//2)通过class获取节点：getElementByClassName(class值) - 返回节点数组
c1Node = document.getElementsByClassName('c1')
c1Node[0].innerText = '百度一下'
console.log(c1Node)
//注意：遍历的时候不要用for in
for(i=0;i<c1Nodes.length;i++){
c1Node = c1Nodes[i]
//修改样式中的文字颜色
c1Node.style.color ='red'
}
//3)通过标签名获取节点：getElementsByTagName(标签名)
h1Nodes = document.getElementsByTagName('h1')
console.log(h1Nodes)
//4)通过name属性值获取节点：getElementsByName()
nameNodes = document.getElementsByName('input')
console.log(nameNodes)
//5)获取子节点
//节点对象.chidren - 获取指定节点中所有的子节点
div1Node = document.getElementById('div1')
div1Children = div1Node.children
console.log(div1Children)
//获取第一个子节点
//节点对象.firstElementChild
firstNode = div1Node.firstElementChild
console.log(firstNode)
//获取最后一个子节点
//节点对象.lastElementChild
div1Node.lastElementChild
//6)获取父节点
bodyNode = div1Node.parentElement
console.log(bodyNode)
//3.创建和添加节点
//1)创建节点
//document.createElement(标签名)
//创建一个img标签
imgNode = document.createElement('img')
imgNode.src = '图片路径'
//2)添加节点
//节点1.appendChild(节点2) - 在节点1的最后添加子标签节点2
bodyNode.appendChild(imgNode)
//节点1.insertBefore(新的节点，节点2) - 在节点1中的节点2的前面添加一个新的节点
bodyNode.insertBefore(imgNode,bodyNode.firstElementChild)
bodyNode.insertBefore(imgNode,c1Node[0])
//注意：一个节点不管添加继承，只有最后一次添加有效（因为节点只有一个）
//4.拷贝/复制节点
//节点.cloneNode()
newImgNode = imgNode.cloneNode()
newImgNode.src = '图片地址'
div1Node.appendChild(newImgNode)
//5.删除节点
p1Node = document.getElementById('p1')
//节点.remove() - 删除指定的节点
p1Node.remove()
//节点1.removeChild(节点2) - 删除节点1中的节点2
div1Node.removeChild(div1Node.lastElementChild)
div1Node.removeChild(div1Node.firstElementChildChild)
//6.替换节点
//节点1.replaceChild(新节点，旧节点) - 用新节点替换节点1中的旧节点
div1Node.replaceChild(imgNode.cloneNode(), c1Node(1))
</script>
网友评论