分为两部分第一部分写html代码,先写一个按钮,点击时调用function方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <!-- <script>--> <!-- function nihao(){--> <!-- alert('你好呀')--> <!-- }--> <!-- </script>--> </head> <body><!-- <button οnclick="nihao()">点我</button>--> <button οnclick="eat()">点我</button> <button οnclick="miao()">这是另一个function</button> //需要用button来引用js文件中使用function定义的方法 <script src="js_html.js"></script>//读取js文件比较费时间,所以一般js】文件都放到代码的最后边,这个是读js文件 </body> </html>
之后用function定义一个方法,写js代码
function eat() {console.log('调用了eat函数') //这个是在前端看日志的var name = '小灰'var age = 18 //这俩定义的变量都能修改const city = '北京'//const定义的变量是常量,不能修改if (age < 18) {console.log('你是未成年人')} else if (age >= 18) {console.log('你是成年人')}if (age == 18 && name == '小灰') {console.log('都一样啦')}//这个==是判断值一不一样,===三个=是判断值和类型都一不一样if (age === 18 || name === '小灰') {console.log('有一个条件满足啦')}for (var i = 0; i < 5; i++) {console.log('看是否循环小于5次:' + i)}var j = 0while (j < 5) {j++console.log('这是循环第:' + j + '一次')}}function miao() {console.log('..................')var user = 'abc' //字符串console.log(user.toLowerCase())console.log(user.toUpperCase())console.log(user.trim())//去空格console.log(user.length)//获取长度console.log(user.indexOf('b'))//取下标console.log(user.split(','))console.log('...............')const list = [1, 2, 3, 4]//列表console.log(list.push(5))//push是添加// console.log(list.splice(1))//这个是按做引删除的,这个是删除索引为1的之后的所有的数据// console.log(list.splice(1,1))//这个是只删除一个console.log(list.indexOf(2))//取下标// for (const index in list){// console.log('这个是循环列表里边的下标的:'+index)// }// for (const name1 of list){// console.log('这个是循环列表里边的内容的:'+name1)// }console.log('!!!!!!!!!!!!!!')var student_test = {}student_test['name'] = '苗'student_test['age'] = 25console.log(student_test.name)console.log(student_test['name'])if (student_test.name == '苗') {console.log('判断正确')}console.log(student_test)for (const studentTestKey in student_test) {console.log(student_test[studentTestKey])}console.log('查看字典在js中是什么类型的:'+typeof student_test)var json_dict=JSON.stringify(student_test)//这个是把字典转换成json的console.log(json_dict)var json_re = '{"code":0,"msg":"操作成功","data":[1,2,3]}'console.log(typeof json_re)var js_json = JSON.parse(json_re)console.log(js_json)console.log(typeof js_json)}
这样在运行html的时候,点击按钮,就可以在浏览器的console下,看到打出来的日志信息