一 JavaScript 的书写形式
1.1 行内式
html
<input type="button" value="点我一下" onclick="alert('hello akai');" >注意,JS 中的字符串常量可以用单引号表示,也可以使用双引号表示.HTML 中推荐使用双引号,JS 中推荐使用单引号(使用双引号容易出现截断问题)
1.2 内嵌式
写到 script 标签中(建议写在</body>之前)
html
<script>
alert('hello akai');
</script>script 标签最好写在 </body> 前,需要根据场景需求放置标签位置,因为HTML 中的代码是根据顺序执行的,可能会出现变量为初始化的场景. 例:
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> 之前)
html
<body>
<script src="tool.js">
</script>
</body>注意, 这种情况下 script 中标签中间不能写代码, 必须空着(写了代码也不会执行)
二 输入输出
2.1 输入: prompt
弹出一个输入框
html
// 弹出一个输入框
<script>
prompt('请输入你的名字:');
</script>可以使用变量来接收 prompt 返回值.
2.2 输出: alert
html
// 弹出一个输出框
<script>
alert('hello');
</script>
2.3 输出: console.log
html
// 在控制台打印
<script>
console.log('这是一条测试');
</scipt>
三 比较运算符
== 比较相等 , 会进行隐试的转换
=== 比较相等, 不会进行隐试类型的转换
四 数组
4.1 创建数组
html
<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
html
<script>
var arr=[9,3,4,5];
arr.length=5;
console.log(arr);
console.log(arr[4]);//控制台打印undefined
</script>通过下标新增
html
<script>
var arr=[9,3,4,5];
arr[5]=5;
console.log(arr[4]);
</script>使用 push 进行追加元素
html
<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 删除数组中的元素
html
<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 返回值
}
//函数调用
函数名 //不考虑返回值
返回值=函数名(实参列表) //考虑返回值
• 函数定义并不会执行函数体内容,必须要调用才会执行,调用几次就会执行几次
html
<script>
hello();
hello();
hello();
function hello(){
console.log('hello');
}
</script>函数的定义和调用的先后顺序没有要求,且创建函数时形参可以不用声明类型
关于参数的个数
1)如果实参的个数比形参的个数多,则多出的参数不参与函数的运算
2)如果室参的个数比形参的个数少,则此时多出来的形参的是为 undefined
5.2 函数表达式
html
<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 的变量来调用函数了
六 对象的使用
使用{} 创建对象
html
<script>
var teacher={};//创建一个空对象
var student={
name: 'akai',
height: 170,
weight: 120,
sayHello: function(){
console.log('hello');
}
}
student.sayHello();
</script>• 可以直接使用 { } 创建一个空对象
• 属性和方法使用键值对的形式来组织(类似于HashMap)
• 键值对之间使用 , 分割. 最后一个属性后面的,可有可无
• 方法的值是一个匿名函数
使用对象的属性和方法:
html
<script>
//使用 .成员 访问运算符来访问属性
console.log(student.name);
// 使用 [ ] 访问属性,此时属性需要加上引号
console.log(student['height']);
// 调用方法,别忘记加(),
student.sayHello();
</script>七. 猜数字
html
<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>八 表白墙
html
<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>