目录
JavaScript的组成:
ECMAScript:Javascript的语法
DOM:页面文档对象模型,对页面的中的元素进行操作
BOM:浏览器对象模型,对浏览器窗口进行操作
(JS语法只能实现一些基础的逻辑流程,要想完成浏览器以及界面交互的效果,就需要使用到DOM和BOM的api)
三种写法:
1.行内式:
写在HTML元素内部
注意JS中字符串常量可以用单引号表示,也可以用双引号表示
HTML中推荐使用双引号,JS中建议使用单引号
2.内嵌式:
这种写法建议写在body的最后面,因为整个页面加载代码是从上往下加载的,如果这个互动要关联某个组件,而该组件的加载在这互动代码之后,就会出错
3.外部式:
这种写法一般用于工具JS,也就是可能由很多组件都要使用该js文件内的方法,这种写法一般要在head内导入,类似于C引头文件,Java导包
输入输出:
prompt:弹出一个输入框
alert:弹出一个警示对话框,输出结果
console.log或console.error用于在控制台打印
注意使用prompt接收的变量的类型默认是String类型,如果要进行数学运算,最好使用parseInt或者parseFloat来进行转换,咱们难以确定如果直接运算的话,JS会不会帮助我们进行隐式转换
变量的使用:
JS内置的几种数据类型:
number:
数字,不区分整数和浮点数,也可以用不同的进制表示
同时也有一些特殊的数字值:
Infinity:无穷大,即代表该数字已经超过了JS能表示的范围
-Infinitely:无穷小,即代表该数字已经超过了JS能表示的范围
NaN(not a number):表示当前结果不是一个数字
其会尝试类型转换,如果是"5"-5就会是0,但如果是"5" + 5 其就会认为是字符串拼接,结果是55
可以使用isNaN判断是否为数字:
boolean:
true真,false假
string:
字符串类型
在JS中字符串可以使用双引号也可以使用单引号
对于特殊的字符需要用到转义字符,比如\"
在JS中也存在字符串拼接,使用的也是+
在JS里求字符串的长度也是使用.length
undefined:
只有唯一的值undefined.表示未定义的值
该值可以进行正常的字符串拼接
但不能进行数字运算,其结果是NaN
null:
只有唯一的值null.表示空值
var与let:
在JS中各种类型的变量的创建都要用到var或者let
建议使用var,因为有的落后浏览器可能不认识let
其主要区别:
1.作用域不同:
var的作用域类似于全局变量,而let作用域类似于局部变量,比如:
2.let类型的变量不能重新定义:
这里定义是定义,不是修改
3.var类型的变量可以先使用再定义:
只不过先使用的时候其值是undefined,如果是let类型的变量会直接报错
特殊的运算符:
==与!=:
与Java不同,其在比较时会进行隐式转换,比如:
===与!==:
和Java中的==与!=一样,就是正常的比较,不会进行隐式转换
if语句:
和java一样的形式:
switch语句:
while循环：
和Java的形式及其相似
for循环：
for循环的种类有很多这里只说常用的几种：
数组：
创建数组有两种方式：
1.通过new关键字创建：
这种用push pop增减元素的方式类似于栈数据结构，遵循后进先出的原则
2.使用字面量方式创建
注意JS这种弱类型的语言中并不要求一个数组内元素类型相同，而且使用字面量创建数组用的是中括号[]不是花括号
数组常用方法:
函数的创建：
不同于Java等语言， 在JS中函数的创建不需要声明权限，不需要声明返回类型等
1.通过function关键字创建函数
2.函数形参的类型不需要声明，可以直接写形参名字
3.如需要返回某个值，那么使用return
4.函数的调用传参时可以与参数列表不符，缺失的参数会被认为为undefined
5.在JS中不存在方法重载
当然如果某个方法本就没有形参，我们却强制传递参数，在该方法内也是可以拿到参数的，通过使用arguments数组，这个数组内存储传递的所有参数，只是很少会这么用
对象：
JS中不存在类，但是存在对象
创建对象有三种方法：
1.字面量创建对象：(常用)
2.使用new Object创建对象：
3.使用构造方法:(用的极少)
注意构造函数不需要return,创建对象时要使用new关键字
使用JS操作DOM的案例：
猜数字游戏：
原生版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>guess</title>
</head>
<body>
<div>
<h1>猜数字:</h1>
<span>猜数字: 1~10</span><input type="text" id="guess_num">
<input type="button" value="submit" onclick="check()">
<div id = "area1">
</div>
</div>
<hr>
<script>
function check(){
//1.随机数的产生:
//random产生的随机数不能指定范围,其生成的随机数是在0~1之间的小数
//floor的作用是取数的整数部分，比如5.12被floor使用返回值就是5
//将产生的随机数 * 10后取整加一正好范围是1~10
var target = Math.floor(Math.random() * 10) + 1;
//2.获取输入结果
//首先通过id的方式获得控件,当然也有其他获取控件的方式，比如通过名字
//但是id具有唯一性,在JS中获取控件的情况中绝大多数都是通过id
//再通过控件获取value值
var num = document.getElementById("guess_num").value;
var text = null;
if(num == target){
text = "<h4>猜对了!</h4>";
}else{
text = "<h4>不对，正确答案是" + target + "</h4>";
}
//3.显示结果:
//这里通过id获取对应的div控件
//innerHTML是该控件的一个属性值，通过对其赋值能改变内部的HTML代码
//由于对应div控件内部是空的，这一步操作相当于把text当作HTML代码黏贴到
//div控件内部
document.getElementById("area1").innerHTML = text;
//除了innerHTML以外，还有innerText这个属性值,如果是对innerText赋值，就相当
//于把text黏贴到div内部，将其当作文本，也就是说<h4>将不再作为标签，而是文本
}
</script>
</body>
</html>使用Jquery框架版本：
使用Jquery的好处：一些浏览器对于某些代码的兼容性较差，不支持部分代码，而使用Jquery的话就能基本避免这些问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>guess</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div>
<h1>猜数字:</h1>
<span>猜数字: 1~10</span><input type="text" id="guess_num">
<input type="button" value="submit" onclick="checkByJquery()">
<div id = "area1">
</div>
</div>
<hr>
<script>
function checkByJquery(){
var target = Math.floor(Math.random() * 10) + 1;
//这里jQuery("#guess_num")的返回值就是获取的组件
//其中jQuery也可以换成$符号，这是简写方式，但不建议这么换
//如果加载了其他框架，也许其他框架也是使用$当作简写符
//这里的#代表id说明是通过id的方式来获取控件
//通过Jquery获取控件的value值不再是通过属性赋值的方式，这里是通过val()方法
var num = jQuery("#guess_num").val();
var text = null;
if(num == target){
text = "<h4>猜对了!</h4>";
}else{
text = "<h4>不对，正确答案是" + target + "</h4>";
}
//这里的html()方法也是同理，如果传递 text参数就把该控件内的html代码换成text
// 如果要获取该控件内的html 代码就不传递参数，使用变量来接收返回值即可
jQuery("#area1").html(text);
}
</script>
</body>
</html>聚合索引：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>totalSearch</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div>
<input type="button" value="必 应" onclick="change('https://www.bing.com')">
<input type="button" value="搜 狗" onclick="change('https://www.sogou.com')">
<input type="button" value="360" onclick="change('https://www.so.com')">
</div>
<hr>
<iframe id="ifr" value = "frame" style="width: 100%; height: 600px;" src="https://www.bing.com"></iframe>
<script>
function change(dest){
//attr是Jquery框架中的一种方法，根据不同的参数数量有不同的作用
//如attr("src")就是获取该控件的src,而attr("src",demo)就是将该控件的 src替换为demo
jQuery("#ifr").attr("src", dest);
console.log(jQuery("#ifr").attr("value"));
}
</script>
</body>
</html>表白墙
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div style="width: 100%; text-align: center;">
<h1>表白墙</h1>
谁 : <input id = "userName"><p></p>
对谁 : <input id = "toUserName"><p></p>
说什么: <input id="msg"><p></p>
<input type="button" value = "提交" onclick="mysub()">
<div id = "all_msg">
</div>
</div>
<script>
function mysub(){
//1.校验输入内容的合理性
//不能为空，不能只有空格
var userName = jQuery("#userName");
var toUserName = jQuery("#toUserName");
var msg = jQuery("#msg");
//trim()的作用是去除字符串中的空格,但不修改原本的字符串
if(userName.val().trim() == ""){
alert("请输入你的名字");
//focus是将光标聚焦到当前组件
userName.focus();
return;
}
if(toUserName.val().trim() == ""){
alert("请输入对象名字");
toUserName.focus();
return;
}
if(msg.val().trim() == ""){
alert("请输入你要说的话");
msg.focus();
return;
}
//2.将消息添加到表白墙
var wall = jQuery("#all_msg");
//append()是追加当前组件的内用,和html(text)，以及对innerHTML,innerText赋值属于与一类操作
//区别是append是追加，而不是重新设置
wall.append(userName.val() + " 对 " + toUserName.val() + " 说: " + msg.val() + "<p></p>");
//3.清除文本框中的内容
userName.val("");
toUserName.val("");
msg.val("");
}
</script>
</body>
</html>注意事项：
1.innerHTML,innerText等根DOM有关的属性是特殊的属性，而src，id,value等属性是基本属性，对于这些特殊的属性，如innerHTML我们可以直接使用原生的JS直接对其赋值，也可以使用JQuery中的特殊方法html(text)进行修改或者赋值，但是不能对其使用attr，attr只适用于基本的属性
2.type为text的控件的value和defaultValue的区别比较大,defaultValue是指一开始设置的value，而value是只当前的value值
当针对type为"text"的控件使用attr("value")时，其获取的是defaultValue值，使用val()时获取的时当前的value值，当然也可以使用原生的JS直接获取属性值
扫一扫
1719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
