1.认识js
<!--
1.什么是js
js是javascript的缩写，是web标准中的行为标准，主要负责网页中内容的变化
js是python类似的一门脚本语言；专门用来为web开发做服务的
2.js代码写在哪儿
1)内联js(行内js)： 写在标签的事件属性中，例如onclick属性
2)内部js： 写在script标签中(script标签理论可以写html的任何位置，但是一般写在head或者body中)
3)外部js: 将js代码写在一个js文件中， 然后在html文件中通过script标签导入
注意: 用来导入外部js文件的script标签中不能再写其他的js代码
3.js能做什么
1)修改标签内容
2)修改标签属性
3)修改标签样式
4)获取标签属性和内容
5)在网页中添加新的内容
4.怎么写js代码
js语法
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--=====================1.写在哪儿示例=================-->
<!--2.内部js-->
<!--<script type="text/javascript">
//在这儿就可以写js代码
alert('内部js1')
</script>-->
<!--3.外部js-->
<!--<script type="text/javascript" src="js/26-认识js.js">
</script>-->
<!--1.内联js-->
<!--<button onclick="alert('内联的js')">按钮1</button>
<script type="text/javascript">
alert('内部js2')
</script>-->
<!--==================2.js能做什么===================-->
<!--1)修改标签内容-->
<p id="p1">我是段落1</p>
<button onclick="document.getElementById('p1').innerText='我是python'">改变内容</button>
<br /><br />
<!--2)修改标签属性-->
<img id="img1" src="img/bear.png"/>
<button onclick="document.getElementById('img1').src='img/ghost.png'">修改图片</button>
<!--3)修改标签样式-->
<p id="p2">我是段落2</p>
<button onclick="document.getElementById('p2').style.color='red'">改变字体颜色</button>
<br /><br />
<!--4)获取标签内容/属性-->
<input type="" name="" id="input1" value="" />
<button onclick="alert(document.getElementById('input1').value)">获取内容</button>
<!--5)在网页中添加内容-->
<script type="text/javascript">
names = ['百度', '新浪', '爱奇艺', '千锋']
for(name of names){
document.write('<font> </font>')
document.write('<a href="https://www.baidu.com">'+name+'</a>')
}
// for(x=0;x<10;x++){
// document.write('<a href="https://www.baidu.com">百度</a>')
// }
</script>
</body>
</html>
<!--<script type="text/javascript">
alert('内部js3')
</script>-->
2.js基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.输出
// console.log() 相当于python中的print()
console.log('输出内容')
//2.注释
//js的注释方式和c一样
//单行注释
/*
多行注释1
多行注释2
*/
//3.语句: 一条语句占一行，一行结束后可以写分号也可以不写
//语句对缩进没有要求
console.log('不写分号')
console.log('写分号');
//如果一行要写多条语句，语句之间必须用分号隔开
console.log('语句1'); console.log('语句2')
console.log('语句3')
console.log('语句4')
//4.标识符
//由字母、数字、下划线和$组成，并且数字不能开头
abc = 100
at23 = 200
ah_ = 300
abc$ = 400
$ssd = 5000
console.log(abc, at23, ah_, $ssd)
//23hj = 100 //Uncaught SyntaxError: Invalid or unexpected token
//5.关键字: 在js中有特殊功能和特殊意义的标识符
//for, while, var, let, const, true, false等
//6.常用数据
// typeof - 获取数据类型
//1)数字(Number): 89, 12.9, 3e4
//2)字符串(String): 使用单引号或者双引号引起来， 'abc', "abc", 'abc\n123', '\u4e00'
//3)布尔(Boolean): 只有true和false两个值
//4)数组(Array): 相当于python中的列表: [123, 'abc', true]
//5)对象(Object): 长得像python中的字典,其实也是对象
console.log(typeof(34))
console.log(typeof 3e4)
console.log('abc', "abc", '\tabc\n123', '\u4e00')
obj1 = {
name:'小明',
'age': 18
}
console.log(obj1['name'], obj1['age'])
console.log(obj1.name, obj1.age)
</script>
3.变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.变量的声明
/*
1)语法一:
变量名 = 值
a.不管在哪儿声明都是全局变量
b.可以修改变量的值
2)语法二:
var 变量名 = 值
a.如果在{}或者函数外声明，从声明开始任何位置都可以用
b.如果在函数中声明，就只能在函数用
c.可以修改变量的值
d.声明前可以先使用，默认值是undefined
3)语法三:
let 变量名 = 值
a.没有声明在{}中，从声明开始任何位置都可以用
b.如果在{}中声明，就只能在{}中使用
c.可以修改变量的值
4)语法四:
const 变量名 = 值
a.变量的值不能修改
*/
console.log('===============1.四种声明变量的方式==================')
name = '小明'
console.log(name)
name = '小花'
console.log(name)
var age = 18
console.log(age)
age = 20
console.log(age)
let gender = '男'
console.log(gender)
gender = '女'
console.log(gender)
const height = 180
console.log(height)
//height = 200 // 报错!
//console.log(height)
console.log('==================2.不同的声明方式的特点================')
//1)语法一的特点
num1 = 100
console.log('在外面声明外面用:',num1)
{
console.log('在外面声明代码块中用:',num1)
num2 = 200
console.log('在块中声明块中用:', num2)
}
console.log('在块中声明块外面用:', num2)
function func1(){
console.log('在外面声明函数中使用:', num1)
console.log('在块中声明函数中用:', num2)
num3 = 300
}
func1()
console.log('在函数中声明函数外部用:', num3)
//2)var变量
function func2(){
num11 = 111
var num12 = 222
}
func2()
console.log('num11:', num11)
//console.log('num12:', num12 ) //报错!!
//3)let变量
{
num21 = 111
var num22 = 222
let num23 = 333
console.log('num23:', num23)
}
console.log('num21:', num21)
console.log('num22:', num22)
//console.log('num23:', num23) //报错!!
console.log('==================变量提前==================')
console.log(score)
var score = 100
//console.log(study_id)
let study_id = '001'
</script>
4.运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js支持的运算符: 数学运算符、比较运算符、逻辑运算符、赋值运算符
//1.数学运算符: +,-,*,/,%,**, ++, --
//+,-,*,/和数学的功能一样； 没有整除对应的运算符，会通过Math模块提供的方法来支持取整的操作
console.log(10/2) // 5
console.log(5/2) //2.5
//%和**和python一样
//++ -> 自加1, -- -> 自减1
num = 10
num++ //num = num+1
console.log(num) //11
++num //num = num+1
console.log(num) //12
num--
console.log(num) // 11
--num
console.log(num) //10
num1 = 10
num2 = num1++ //num2 = num1; num1+=1
console.log('num2:', num2, num1) //10
num11 = 10
num22 = ++num11 //num11+=1; num22=num11
console.log('num22:', num22, num11) //11
a = 10
sum = ++a + a++ + --a + a-- + ++a
console.log(sum, a)
/*
*a: 11 12 11 10 11
sum = 11 + 11 + 11 + 11 + 11
sum = 55
a = 11
*/
//2.比较运算符:>, <, ==, !=, ===, !==
//结果都是布尔值
//判断大小和python一样
//==判断相等的时候，如果数据类型不同会先转换成相同的数据类型，然后再判断是否相等
//===判断相等的时候，如果数据类型不同结果直接是false
console.log('5' == 5) //true
console.log('5' === 5) //false
console.log(5 === 5) // true
//3.逻辑运算符: &&(逻辑与), ||(逻辑或), !(逻辑非)
age = 18
score = 90
console.log(age > 18 && score > 80) // false
console.log(age > 18 || score > 80) // true
console.log(!(age > 18)) // true
//4.赋值运算符: =, +=, -=, *=, /=, %=, **=
//和python一样
</script>
5.分支结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中分之结构有两种: if、switch
//1.if语法
/*
if(条件语句){
满足条件需要执行的代码
}
if(条件语句){
满足条件要执行的代码
}else{
不满足条件要执行的代码
}
if(条件语句1){
代码段1
}else if(条件语句2){
代码段2
}else if(条件语句3){
代码段3
}
...
else{
代码段N
}
*/
//2.switch语法
/*
1)语法:
swicth(表达式){
case 值1:{
表达式1
}
case 值2:{
表达式2
}
...
default:{
表达式N
}
}
2)执行过程:
先计算表达式的值，然后让这个值依次和case后面的每个值进行比较，哪个case后面的值和表达式的值相等，就将这个case
作为入口，依次执行后面的表达式，直接执行完或者执行过程中break为止。如果没有哪个case的值和表达式的值相等，
那么就会将default作为入口
*/
a = 2
switch(a){
case 10:
case 11:
case 12:{
console.log('表达式0')
break
}
case 1:{
console.log('表达式1')
break
}
case 2:{
console.log('表达式2')
break
}
case 3:{
console.log('表达式3')
break
}
default:{
console.log('表达式N')
}
}
</script>
6.循环结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中有for循环和while循环
//1.for循环
/*
1)C语言的for循环
语法:
for(表达式1;表达式2;表达式3){
循环体
}
表达式1
for(;表达式2;){
循环体
表达式3
}
相当于:
表达式1
while 表达式2:
循环体
表达式3
for(给变量赋初值;循环条件;修改变量的值){
循环体
}
2) for-in循环
for(变量 in 序列){
循环体
}
让变量去序列中取值一个一个的取(取的是下标/属性名)，取完为止，每取一个值执行一次循环体
3) for-of循环
for(变量 of 序列){
循环体
}
让变量去序列中取值一个一个的取(取的值)，取完为止，每取一个值执行一次循环体
*/
//2.while循环
/*
1)while循环
while(条件语句){
循环体
}
2)do-while循环
do{
循环体
}while(条件语句)
*/
//计算1+2+...+100
sum = 0
for(let num=1;num<=100;num++){
sum += num
}
console.log(sum)
//产生数字100~199
for(let num=100;num<=199;num++){
console.log(num)
}
console.log('===================================')
//产生数字100~1
for(let num=100; num>=1;num--){
console.log(num)
}
console.log('===================================')
//产生数字2，4，6，8，... 100
for (let num=2;num<=100;num+=2) {
console.log(num)
}
console.log('==================for-in循环=================')
for(let x in 'abc'){
console.log('x:', x, 'abc'[x])
}
obj1 = {a:100, b:200, c:300}
for(let x in obj1){
console.log('x:', x, obj1[x])
}
console.log('==================for-of循环=================')
for(let item of 'abc'){
console.log('item:', item)
}
for(let item of [100, '小明', true]){
console.log(item)
}
//注意: for-of不能遍历对象
// for(let item of obj1){
// console.log(item)
// }
</script>
7.函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
</script>
<script type="text/javascript">
//1.普通函数
/*
function 函数名(参数列表){
函数体
}
注意: 1)js中函数的调用可以放在声明之前(提升的时候不可以越过script标签)
2)调用的函数的时候，任何函数都可以传任意个参数，跟形参没有关系;
形参可以直接获取部分实参的值；函数中arguments对象可以获取函数调用时所有的实参
3)关键字参数无效
*/
//===============1.函数的提升================
func1()
function func1(){
console.log('函数1被调用')
console.log('this:',this)
}
func1()
//===============2.函数的参数=====================
function func2(){
console.log('函数2被调用')
}
func2()
func2(10)
func2(10, 20)
func2(10, 20, 30)
console.log('==========')
function func3(x, y=10){
console.log('函数3被调用', x, y)
console.log(arguments)
for(let x of arguments){
console.log('x:', x)
}
}
func3()
func3(1)
func3(1,2)
func3(1,2,3,4)
func3(y=200,x=100)
//2.匿名函数
/*
变量 = function (参数列表){
函数体
}
*/
function func4(fn){
console.log('=====函数4======')
fn()
console.log('===============')
}
function func5(){
console.log('函数5')
}
func4(func5)
func4(function(){
console.log('匿名函数')
})
//3.箭头函数
/*
(参数列表)=>{
函数体
}
*/
func4(()=>{
console.log('箭头函数')
})
a = (x,y)=>{return x+y}
console.log(a(10, 20));
//4.自调用函数
/*
(function(形参列表){
函数体
})(实参列表)
注意: 自调用函数的上一条语句必须在结束的时候加分号
*/
(function(x, y){
console.log('x+y=', x+y)
})(100, 200)
</script>
<script type="text/javascript">
func1()
</script>
<script type="text/javascript">
a = 10 //相当于: window.a = 10
console.log(a)
console.log(window.a)
func1()
window.func1()
</script>
8.字符串和数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.字符串
/*
1)获取字符
字符串[下标]
注意:js中的下标范围是0~长度-1
2)字符串加法运算(不支持乘法运算)
数据+字符串/ 字符串+数据/ 字符串+字符串 - 字符串拼接
3)字符串长度
字符串.length
4)字符串相关方法
*/
str1 = 'hello js'
console.log(str1[1])
str2 = 'abc'+'hello'
console.log(str2)
str3 = false+12.5+'abc'+100+true
console.log(str3)
console.log('abc'*3) //NaN
console.log('abc'.length)
str3 = 'abc'
str4 = new String('abc')
console.log(str4+100)
console.log(str4)
console.log('===============字符串相关方法==============')
str5 = 'hellol jslll'
//1.切片
console.log(str5.slice(1, 4)) //str5[1:4] -> ell
//2.替换
//注意: js中的正则表达式写在两个/之间
console.log(str5.replace(/l+/g, 'A'))
//3.切割
console.log('abc 123 true'.split(' '))
//补充: 正则匹配
//正则对象.test(字符串) - 判断字符串和正则表达式是否匹配，结果是布尔
re = /^1[3-9]\d{9}$/
console.log(re.test('11273828333'))
//2.数组
/*
1)查
数组[下标] - 获取指定下标对应的元素，如果下标不存在返回undefined
遍历： for-in for-of
2)增
数组[下标] = 值 - 下标不存在的时候会添加元素
数组.push(元素) - 在数组的最后添加一个元素
数组.unshift(元素) - 在数组的最前面添加一个元素
数组.splice(下标,0,元素1,元素2,元素3,...) - 在指定下标前插入指定一个或者多个元素
3)删
数组.splice(下标, N) - 从数组指定下标开始，删除N个元素
数组.pop() - 取出数组中最后一个元素
数组.shift() - 取出数组中第一个元素
4)改
数组[下标] = 值
*/
console.log('============1.查=============')
nums = [23, 9, 78, 67]
console.log(nums[3]) // 67
console.log(nums[100]) // undefined
console.log('===========2.增===============')
scores = []
scores[2] = 19
console.log(scores)
nums = [23, 9, 78, 67]
nums.push(100)
console.log(nums)
nums.unshift(45)
console.log(nums)
nums = [23, 9, 78, 67]
nums.splice(1,0,1000,100)
console.log(nums)
console.log('===========3.删===============')
nums = [23, 9, 78, 67]
nums.splice(1,1)
console.log(nums)
nums = [23, 9, 78, 67]
result = nums.pop()
console.log(result, nums)
nums = [23, 9, 78, 67]
result = nums.shift()
console.log(result, nums)
console.log('===========3.改===============')
nums = [23, 9, 78, 67]
nums[0] = 100
console.log(nums)
console.log('=============4.其他常用方法==============')
//1.排序
/*
数组.sort(fn)
*/
//按元素的大小从大到小排序
nums = [23, 9, 78, 67]
function func1(item1, item2){
return item2 - item1
}
nums.sort(func1)
console.log(nums)
//按元素个位数从小到大排序
nums = [23, 9, 78, 67]
function func2(item1, item2){
return item1%10 - item2%10
}
nums.sort(func2)
console.log(nums)
//按元素各位数的和从小到到排序: [123, 91, 65, 78]
nums = [123, 78, 65, 91]
nums.sort(function(item1, item2){
sum1 = 0
for(let x of String(item1)){
sum1 += Number(x)
}
sum2 = 0
for(let x of String(item2)){
sum2 += Number(x)
}
return sum1 - sum2
})
console.log(nums)
//2.数组.join(字符串=',') - 用字符串将数组中元素拼接在一个产生一个新的字符串
array1 = [123, '小明', true]
result = array1.join('+')
console.log(result)
//3.数组.forEach(函数)
array1 = [123, '小明', true]
array1.forEach(function(item, index){
console.log(item, index)
})
</script>
8.对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.对象的直接量
/*
{
属性1:属性值1,
属性2:属性值2,
....
}
*/
p1 = {
name:'小明',
age: 18,
gender:'男'
}
p2 = {
name:'张三',
age: 20,
gender:'女'
}
//2.构造方法(相当于类)
/*
构造方法本质就是函数。
语法:
function 函数名/类名(参数列表){
this.属性1 = 值1
this.属性2 = 值2
...
return this
}
构造方法的调用(创建对象): new 函数名()
*/
function Person(name, age, gender='男'){
//===对象属性====
this.name = name
this.age = age
this.gender = gender
//===对象方法====
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
this.study = function(){
console.log(this.name+'在学习')
}
return this
}
p3 = new Person('小红', 20)
p4 = new Person('Tom', 30, '女')
console.log(p1)
console.log(p3)
console.log(p4)
//3.使用对象属性 - 查
//对象.属性
//对象[属性名]
console.log(p1.name, p1['age'])
console.log(p3.name, p3['age'])
p3.eat('面条')
p4.eat('面包')
p4.study()
//4.修改对象属性/添加对象属性
//对象.属性 = 值 - 属性如果存在就是修改，属性不存在就是添加
//对象[属性名] = 值 - 属性如果存在就是修改，属性不存在就是添加
p3.id = '0001'
console.log(p3)
console.log(p3.id, p3['id'])
p3['weight'] = 100
console.log(p3)
p3.name = '余婷'
p3['age'] = 18
console.log(p3)
console.log(p4)
//5.添加属性和方法
/*
类名.prototype.属性名 = 值 - 给指定的类添加属性和方法
*/
Person.prototype.abc = 100
console.log(p4.abc, p4['abc'])
p5 = new Person('大黄', 3)
console.log(p5.abc)
String.prototype.ytToUpper = function(){
//'a' <= char <= 'z'(python) -> char >= 'a' && char <= 'z'
tChar = this[0]
if(tChar>='a' && tChar <= 'z'){
return tChar.toUpperCase()+this.slice(1)
}
return this
}
str1 = 'abc'
console.log(str1.ytToUpper())
</script>
