一 JavaScript 的书写形式
1.1 行内式
<input type="button" value="点我一下" onclick="alert('hello akai');" >
注意,JS 中的字符串常量可以用单引号表示,也可以使用双引号表示.HTML 中推荐使用双引号,JS 中推荐使用单引号(使用双引号容易出现截断问题)
1.2 内嵌式
写到 script 标签中(建议写在</body>之前)
<script> alert('hello akai'); </script>
script 标签最好写在 </body> 前,需要根据场景需求放置标签位置,因为HTML 中的代码是根据顺序执行的,可能会出现变量为初始化的场景. 例:
<head> <script> console.log(document.getElementById('but').val); </script> </head> <body> <input id="but" type="button" value="点我一下" onclick="alert('hello akai');" > </body>
1.3 外部式
写到单独的 .js 文件中(建议写在</head> 之前)
<body> <script src="tool.js"> </script> </body>
注意, 这种情况下 script 中标签中间不能写代码, 必须空着(写了代码也不会执行)
二 输入输出
2.1 输入: prompt
弹出一个输入框
// 弹出一个输入框 <script> prompt('请输入你的名字:'); </script>
可以使用变量来接收 prompt 返回值.
2.2 输出: alert
// 弹出一个输出框 <script> alert('hello'); </script>
2.3 输出: console.log
// 在控制台打印 <script> console.log('这是一条测试'); </scipt>
三 比较运算符
== 比较相等 , 会进行隐试的转换
=== 比较相等, 不会进行隐试类型的转换
四 数组
4.1 创建数组
<script> // 使用new 关键字创建 var arr=new Array(); // 使用字面常量方式创建 var brr=[] var crr=[1,2,'haha',true]; crr='hello'; console.log(crr); console(crr[1])//此时控制台上是不会有打印结果的 </script>
js 中数组的元素下标可以不连续
注意:不要给数组名直接赋值,此时数组中的所有元素都没有了
4.2 新增数组元素
相当于在末尾新增元素,新增的元素默认值为 undefined
<script> var arr=[9,3,4,5]; arr.length=5; console.log(arr); console.log(arr[4]);//控制台打印undefined </script>
通过下标新增
<script> var arr=[9,3,4,5]; arr[5]=5; console.log(arr[4]); </script>
使用 push 进行追加元素
<script> var arr=[1,2,3,4,5,6]; var newArr=[]; for(var i=0;i<arr.length;i++){ if(arr[i]%2==1) newArr.push(arr[i]); } </script>
4.3 删除数组中的元素
<script> var arr=[1,2,3,4,5,6]; //从下标为2 的元素开始,删除2个元素 arr.splice(2,2); //slice 不会改变原数组的结构,获取下标2和3 的元素 var lo=arr.slice(2,4); console.log(arr); </script>
五 函数
5.1 语法格式
function 函数名(形参列表){ 函数体 return 返回值 } //函数调用 函数名 //不考虑返回值 返回值=函数名(实参列表) //考虑返回值
函数定义并不会执行函数体内容,必须要调用才会执行,调用几次就会执行几次
<script> hello(); hello(); hello(); function hello(){ console.log('hello'); } </script>
函数的定义和调用的先后顺序没有要求,且创建函数时形参可以不用声明类型
关于参数的个数
1)如果实参的个数比形参的个数多,则多出的参数不参与函数的运算
2)如果室参的个数比形参的个数少,则此时多出来的形参的是为 undefined
5.2 函数表达式
<script> var add=function(){ var sum=0; for(var i=0;i<arguments.length;i++){ sum+=arguments[i]; } return sum; } console.log(add(10,20));//30 console.log(add(1,2,3,4));//10 console.log(typeof add);//function </script>
此时形如 function(){} 这样的写法定义了一个匿名函数,然后将这个匿名函数用一个变量来表示,后面就可以通过这个 add 的变量来调用函数了
六 对象的使用
使用{} 创建对象
<script> var teacher={};//创建一个空对象 var student={ name: 'akai', height: 170, weight: 120, sayHello: function(){ console.log('hello'); } } student.sayHello(); </script>
• 可以直接使用 { } 创建一个空对象
• 属性和方法使用键值对的形式来组织(类似于HashMap)
• 键值对之间使用 , 分割. 最后一个属性后面的,可有可无
• 方法的值是一个匿名函数
使用对象的属性和方法:
<script> //使用 .成员 访问运算符来访问属性 console.log(student.name); // 使用 [ ] 访问属性,此时属性需要加上引号 console.log(student['height']); // 调用方法,别忘记加(), student.sayHello(); </script>
七. 猜数字
<h3>猜数字游戏</h3> 请输入要1-10的数字: <input type="text" id="inputNum"><p></p> <input type="button" value="查看结果" onclick="checkRight()"><br/> <div id="print"> </div> <script> function checkRight(){ var randNum=Math.floor(Math.random()*10+1); var inputNum=document.getElementById("inputNum").value; var mes; if(inputNum==randNum){ mes="<h4>恭喜你猜对了</h4>"; }else{ mes="<h4>你猜错了,正确答案是:"+randNum+"</h4>"; } document.getElementById("print").innerHTML=mes; } </script>
八 表白墙
<body> <div style="width: 100%;text-align: center;"> <h3>表白墙</h3> 谁 :<input id="from"><p></p> 对谁 :<input id="to"><p></p> 说 :<input id="mes"><p></p> <input type="button" value="提交" onclick="check()"> <div id="wall"> </div> </div> <script> function check(){ var fromM=$("#from"); var toM=$("#to"); var mesM=$("#mes"); if(fromM.val().trim()==""){ alert("请先输入你的名字"); fromM.focus(); return; } if(toM.val().trim()==""){ alert("请先输入对方的名字"); toM.focus(); return; } if(mesM.val().trim()==""){ alert("请先输入要发送的信息"); mesM.focus(); return; } $("#wall").append(fromM.val()+"对"+toM.val()+"说"+mesM.val()+"<p></p>"); // 将表格数据清空 fromM.val(""); toM.val(""); mesM.val(""); } </script> </body>
