Javascript学习
js引入的三种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// js引入的三种方式
/*
1、第一种：行间事件: 直接在元素上 通过给元素添加事件绑定，来执行js代码
2、第二种：通过script标签引入外部的js文件
3、第三中：直接爱页面的script标签中编写js代码
*/
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="js/main.js"></script>
<script>
function func1(){
alert('func1')
}
</script>
</head>
<body>
<!-- 绑定行间事件 -->
<button type="button" onclick="alert(123456)">按钮1</button>
<button type="button" onclick="alertInfo()">按钮2</button>
<button type="button" onclick="func1()">按钮3</button>
</body>
</html>
js基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 单行注释
/*
多行注释
注释11
注释222
注释222
*/
// 一、js条件语句
// 1、if-else语句
// if(10>20){
// console.log('10>5成立！')
// }else{
// console.log('10>5不成立！')
// }
// 2、if- else if -else
// var number = 55
// if (number>=80){
// console.log('成绩很优秀')
// }else if(60<number && number<80){
// console.log(number)
// console.log('成绩及格')
// }else{
// console.log('成绩不及格')
// }
// 二、js中的函数
//1、函数的定义：
// function printUserInfo(name,age){
// console.log('我的名字:'+name+'我的年纪:'+age)
// }
// // 2、函数的返回值
// function addNumber(a,b){
// // 返回a+b的结果
// return a+b
// }
// 三、js中的对象
/*
对象的定义：1、{} ,2、new Object()
对象的属性和方法：
属性名：属性值
方法名：函数
对象中的this:代表的是对象本身
*/
var objA = {
name:'zzx',
age:18,
func1:function(){
console.log('objA的func1方法')
},
func2:function(){
console.log('打印对象中的this')
console.log(this.name)
}
}
var objB = new Object()
objB.name ='yuze'
objB.age =18
objB.func001 = function(){
console.log('objB的func1方法')
}
// 扩展：函数中的this:代表的是window对象（窗口）
function work01(){
console.log(this)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 单行注释
/*
多行注释
注释11
注释222
注释222
*/
// 一、js条件语句
// 1、if-else语句
// if(10>20){
// console.log('10>5成立！')
// }else{
// console.log('10>5不成立！')
// }
// 2、if- else if -else
// var number = 55
// if (number>=80){
// console.log('成绩很优秀')
// }else if(60<number && number<80){
// console.log(number)
// console.log('成绩及格')
// }else{
// console.log('成绩不及格')
// }
// 二、js中的函数
//1、函数的定义：
// function printUserInfo(name,age){
// console.log('我的名字:'+name+'我的年纪:'+age)
// }
// // 2、函数的返回值
// function addNumber(a,b){
// // 返回a+b的结果
// return a+b
// }
// 三、js中的对象
/*
对象的定义：1、{} ,2、new Object()
对象的属性和方法：
属性名：属性值
方法名：函数
对象中的this:代表的是对象本身
*/
var objA = {
name:'zzx',
age:18,
func1:function(){
console.log('objA的func1方法')
},
func2:function(){
console.log('打印对象中的this')
console.log(this.name)
}
}
var objB = new Object()
objB.name ='yuze'
objB.age =18
objB.func001 = function(){
console.log('objB的func1方法')
}
// 扩展：函数中的this:代表的是window对象（窗口）
function work01(){
console.log(this)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 一、 while循环
// break 和continue关键字和python中的作用时一样的
// var count = 1
// while(count<=10){
// console.log(count)
// count++
// // 当count等于5时，强制退出循环
// if (count==8){
// // break
// // continue
// }
// console.log(`--------------`)
// }
// 二、for循环
// 1、for条件循环 ：for(循环开始之前执行的代码，是否执行循环体的条件，循环体执行完执行执行的代码)
// for (var i=1;i<=10;i++){
// console.log(i)
// }
// 2、for 遍历循环
// var arryA = [11,22,33,44]
// for循环遍历数组
// for(i in arryA){
// console.log(i,arryA[i])
// }
// 注意点：for循环遍历数组时，遍历出来的时数组的索引
var objA = {
name:'zxj',
age:18,
func1:function(){
console.log('objA的func1方法')
},
func2:function(){
console.log('打印对象中的this')
console.log(this.name)
}
}
// for循环遍历对象
for (i in objA){
console.log(i,objA[i])
}
// 注意点：for循环遍历对象时，遍历出来的是对象的属性名
</script>
</body>
</html>
数组遍历的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arryA = [11,22,33,44,55,66]
// forEach遍历数组
// arryA.forEach(function (item,i,arry){
// // item 是遍历出来的值
// // i 是对应的索引
// //arry 是数组本身
// console.log(item,i,arry)
// })
// filter:遍历数组，进行过滤
// var res = arryA.filter(function(item,i){
// return item>50
// })
// console.log(res)
// find方法：查找第一个符合条件的值
var res = arryA.find(function(item,i){
console.log('---------',item)
if(item ==33){
return true
}else{
return false
}
})
console.log(res)
</script>
</body>
</html>
es6中的箭头函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 箭头函数和普通函数中this的区别
// 普通函数中的this代表的对象本身
// 箭头函数中的this代表的当前对象外层作用域的对象
var objA ={
// 箭头函数
func: ()=>{
console.log('这个是func方法')
},
func3:(a,b)=>{
return a+b
},
// 箭头函数只有一个参数时，括号可以省略
func4:a=>{
console.log(a)
// 这个this代表的window对象
console.log(this)
},
func2:function (){
console.log('这个是func2方法')
// this代表objA
console.log(this)
}
}
</script>
</body>
</html>
js使用的中的注意点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// window.onloan 是窗口的一个事件，这个事件会等到页面元素加载完毕之后才会执行
window.onload = function(){
document.querySelector('#box1').innerText='python001'
}
</script>
<div id="box1">
box1
</div>
<div id="box2">
box2
</div>
<!-- <script>
document.querySelector('#box1').innerText='python001'
</script> -->
</body>
</html>
js变量声明的三种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
/**
var：定义的变量可以跨代码块访问(全局变量)。
let：定义块级作用局的变量（代码块内的局部变量）
const: 定义常量，初始化必须赋值，值不可修改，只能在块级作用域访问
*
* {} :包起来的代码，就是代码块
*
*
*/
const c10 = 1000
let b10 = 99
if (10>5){
var a = 10
let b = 20
const c = 30
}
for (item in [11,22,33]){
var aa = 100
let bb = 200
console.log(a)
}
</script>
</body>
</html>
版权声明：本文为高小杰<黑白情畫>原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。