目录
一.js介绍
脚本语言：代码不需要进行编译，直接经过浏览器的解释就可以运行。简化了开发的过程
java--跨平台--面向对象的编程语言
二.引入方式
1.js代码与html代码的结合方式：内部脚本 外部脚本
JS显示警告框
代码：
-----------此为内部脚本
//新建一个文件夹--创建js文件后缀为.js 在创建的.js文件中写代码
//外部脚本的引入--创建script标签
三.js基础语法
1.书写语法
<script> //方式一：弹出警示框 window.alert("hello js"); //方式二：写入htm页面 document.write("hello js"); //方式三：控制台输出 console.log("hello.js"); </script>
2.js变量
1.使用var关键字声明变量
<script> var a=10; a="张三"; alert(a); </script>
//运行结果
特点：
1.var作用域比较大，是全局变量 无论是在大括号外面还是在里面 均可调用
//可以重复定义--下面的会覆盖上面的
2.
let声明局部变量且不能重复定义
3.
3.数据类型 运算符 流程控制语句
<script> alert(typeof 3)//number alert(typeof 3.14) alert(typeof "A")//string alert(typeof 'hello') alert(typeof false)//boolean alert(typeof true) alert(typeof null)//object var a; alert(typeof a)//undefined </script>
<script> var a=10 var a_="10" var a1=10 alert(a==a_)//true alert(a===a_)//false alert(a===a1)//true </script>
//NaN--not a number
<script> alert(parseInt("12"))//12 alert(parseInt("12A45"))//12 alert(parseInt("A45"))//NaN </script><script> if(0){ alert('1') }if(NaN){ alert('2') }if(-1){ alert('3')//只有这个输出了 } </script><script> if(""){ alert("123")//未输出：空字符串为false } </script><script> if(null){ alert("123") }if(undefined){ alert("1234") } //都没有输出---都是false </script>
四.js函数
<script> var result=add(10,20) alert(result) function add(a,b){ return a+b; } </script>
<script> var add=function(a,b){ return a+b; } var result=add(10,20) alert(result) </script>
五.js对象
基础对象：Array String JSON 浏览器对象：BOM 文档对象模型：DOM
六.js对象--Array数组
<script> var arr=new Array(1,2,3,4); console.log(arr[0]);//log回车直接生成console.log </script>
定义数组：长度可变 类型可变
<script> // var arr=new Array(1,2,3,4); var arr=[1,2,3,4]; console.log(arr[0]);//log回车直接生成console.log console.log(arr[1]);//log回车直接生成console.log arr[10]=5; console.log(arr[8]);//undefined console.log(arr[9]);//undefined console.log(arr[10]);//5 </script><script> var arr=[1,2,3,4]; arr[5]='A'; console.log(arr[5]); </script>
<script> var arr=[1,2,3,4]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } </script>以上两种有区别：for循环遍历数组中所有的元素，forEach遍历数组中有值的元素<script> var arr=[1,2,3,4]; arr.forEach(function(e){ console.log(e); }) </script>
箭头函数：简化函数定义
<script> var arr=[1,2,3,4]; arr.forEach((e)=> console.log(e) ) </script><script> var arr=[1,2,3,4]; arr.push(7,8,9); console.log(arr); arr.splice(2,2);//从哪个开始删，删几个 console.log(arr); </script>
七js对象--String字符串
<script> var str="hello js"; console.log(str);//hello js console.log(str.length);//8 </script><script> var str="hello js"; var str2=" hello js "; console.log(str);//hello js console.log(str.length);//8 console.log(str.charAt(4));//o console.log(str.indexOf("js"));//6 var s=str2.trim(); console.log(s);//hello js console.log(str.substring(1,3));//el </script>
八.js对象--JSON
<script> var user = { name: "wzt", age: 21, gender:"male", eat(){ alert("good"); } } alert(user.name); user.eat(); </script>
JSON是key-value形式的键值对---key必须是双引号
JSON作为数据载体进行数据传输
<script> var jsonstr='{"name":"wzt","age":21,"gender":"male","addr":["北京","上海","西安"]}'; alert(jsonstr.name);//undefined var obj=JSON.parse(jsonstr);//将json转化为js对象 alert(obj.name);//wzt </script>parse()将json字符串转化为js对象 stringify()将js对象转化为JSON字符串
JSON.stringify(obj);//将js对象转化为js对象<script> var jsonstr='{"name":"wzt","age":21,"gender":"male","addr":["北京","上海","西安"]}'; alert(jsonstr.name);//undefined var obj=JSON.parse(jsonstr); alert(obj.name);//wzt alert(JSON.stringify(obj));//将js对象转化为JSON字符串 并输出字符串 </script>
九.js对象--BOM
confirm()----弹出提示信息让确定是否要执行此操作
<script> window.alert("hello bom");//window可以省略 alert("hello js"); var flag=confirm("您确定要删除该记录吗？"); alert(flag);//confirm(对话框)--确认：true 取消：false </script><script> var i=0; setInterval(function(){//定时器--周期性的执行某一个函数 i++; console.log("定时器执行了"+i+"次"); },2000 ); </script>2000--程序两秒执行一次
<script> setTimeout(function(){//延迟指定时间执行一次 alert("JS"); } ,3000); </script>3000--程序在3秒后执行
<script> alert(location.href);//获取当前地址栏的URL信息 </script>
<script> alert(location.href);//获取后跳转到下面的地址 location.href="https://www.itcast.cn";//跳转到此地址 </script>
十.js对象--DOM
将标记语言的各个组成部分封装成对应的对象。
element---元素标签---网页右击检查---element
elements---返回的是数组
<body> <img id="h1" src="gif/off.gif"> <br><br> <div class="cls">传智教育</div> <br> <div class="cls">黑马程序员</div> <br> <input type="checkbox" name="hobby">电影 <input type="checkbox" name="hobby">旅游 <input type="checkbox" name="hobby">游戏 </body>获取element元素，根据id获取
var img=document.getElementById('h1'); alert(img);获取element元素，根据标签获取
var divs=document.getElementsByTagName('div'); for (let i = 0;i< divs.length; i++){ alert(divs[i]); }获取element元素，根据name属性获取
var ins=document.getElementsByName('hobby'); for (let i = 0; i < ins.length; i++) { alert(ins[i]); }获取element元素，根据class属性获取
var divs=document.getElementsByClassName('cls'); for (let i = 0; i < divs.length; i++) { alert(divs[i]); }
这个方法可以改变页面内容：
var divs=document.getElementsByClassName('cls'); var div1=divs[0]; div1.innerHTML="传智教育666";
DOM案例
在script中，先获取元素对象，再调用元素属性或方法来控制该元素。
<body> <img id="h1" src="gif/off.gif"> <br><br> <div class="cls">传智教育</div> <br> <div class="cls">黑马程序员</div> <br> <input type="checkbox" name="hobby">电影 <input type="checkbox" name="hobby">旅游 <input type="checkbox" name="hobby">游戏 </body>点亮灯泡：src属性值
var img=document.getElementById('h1'); img.src="gif/on.gif";将所有的div标签后面加上very good--并设置颜色为红色
var divs=document.getElementsByTagName('div'); for (let i = 0; i < divs.length; i++) { const div=divs[i]; div.innerHTML+="<font color='red'>very good</font>" }使所有的复选框呈现选中状态
var ins=document.getElementsByName('hobby'); for (let i = 0; i< ins.length; i++) { const check = ins[i]; check.checked=true; }
扫一扫
5113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
