目录
💛 1.2 内嵌式
前端三剑客：JavaScript、CSS 以及 HTML。我在前一篇文章中已经介绍了 HTML 的相关内容(HTML) 。这三者各自意味着什么呢？
看了我前一篇关于 HTML 的文章，大家就会发现，HTML 写出来的网页十分简陋，一点都不高大上！这是因为一个好看又实用的网站，往往需要前端三剑客的互相配合。HTML 负责网页的结构(骨)、CSS 负责网页的颜值(皮)，而 JavaScript 负责让网页动起来。
JavaScript 是一种网页脚本语言，有自己的语法，但由于该门语言的创建者布兰登·艾奇(Brendan Eich)只用了 10 天时间便创建出 JS，所以 JS 会存在某些细节考虑的不够严谨的问题。
虽然 JS 的确存在一些缺陷，但依旧不影响它在网页设计上发挥的重大作用。
JavaScript 的工作原理是通过在 HTML 网页中直接嵌入 JS 脚本，实现读写HTML元素内容，更改HTML元素样式等功能。
在介绍 JavaScript 语法之前，先介绍一下 JavaScript 在 HTML 中的书写形式
1. JavaScript 的书写形式
1.1 行内式
JS 的代码直接写到 html 语句的内部：
1.2 内嵌式
写到 script 标签中，并且 script 标签最好写在 </body> 前。
<script>
alert('你好世界！')
</script>
把 script 标签写到 head 标签里面，可以吗？
最好不要这样，因为 HTML 的运行顺序是从上到下的，如果在 head 里放 script 标签，可能会造成问题。比如以下情况：
<body>
<input id="btnl" type="button" value="点我一下下" onclick="console.log('hello.javascript')">
</body>上述代码表示，按一下按钮，在控制台上输出 hello.javascript。
如果在 head 里放 script 标签，而 script 标签中的代码需要的参数，还未被执行，这就会产出 bug：
<head>
......
<script>
alert(document.getElementById("btnl").value)
</script>
</head>
<body>
<input id="btnl" type="button" value="点我一下下" onclick="console.log('hello.javascript')">
</body>
基于上述原因，script 标签最好写在 </body>的前一行，而不要写在 head 标签里头。
<body>
<input id="btnl" type="button" value="点我一下下" onclick="console.log('hello.javascript')">
<script>
alert(document.getElementById("btnl").value)
</script>
</body>
1.3 外部式
写到单独的 js 文件中，这样的文件往往可供多个 html 文件调用的，反而不依赖每个 html 文件中 body 标签里的内容，这种写法反而更推荐写在 head 标签中。
<head>
......
<script src = "tools.js"></script>
</head>tools.js 文件中的代码：
alert("hello world!");
2. JavaScricpt 的一些常用语句
2.1 输入：prompt
弹出一个输入框
<script>
prompt("请输入你的姓名：");
</script>
2.2 输出：alert
弹出一个警示的对话框
2.3 console.log
在控制台打印一个日志(供程序员看)
console.log("这是一条日志");日志是程序员调试程序的重要手段。
2.4 相关代码练习
var name = prompt("请输入你的姓名？");
var age = prompt("请输入你的年龄？");
var gender = prompt("请输入你的性别");
alert("姓名："+name+"年龄："+age+"性别："+gender);
3. JavaScript 语法
就问一句，JavaScript 与 Java 之间有什么密切联系吗？给大家来一组类比，就解释清楚了：JavaScript 与 Java 的关系，就好比雷锋与雷锋塔之间的关系、印度与印度尼西亚之间的关系、周杰与周杰伦之间的关系以及黑客与博客之间的关系。
也就是说，JavaScript 与 Java 之间啥关系也没有。但是 JavaScript 的一些基本语法与 java 的一样。下面只挑一些与 java 基本语法不一样的来展示。
3.1 变量的使用
var name = 'lisi';
var age = 20;var 是 JS 中的关键字，表明这是一个变量。每个语句最后都会带有 ; 结尾，在 JS 中可以省略，但建议加上。 如果初始化的值为字符串，那么使用单引号或双引号引起来即可。
基本数据类型
JS 中内置的几种类型
number：数字，不区分整数和小数
boolean：参与运算时当作 1 和 0 来看待
String：字符串类型
undefined：只有唯一的值 undefined，表示未初始化的值
null：只有唯一的值 null，表示空值
//undefined 数据类型
var num ;
console.log(num);
console.log(num+"你好");
console.log(num+10);
//null 数据类型
var num1 = null;
console.log(num1);
console.log(num1+"你好");
console.log(num1+10);输出：
undefined
undefined你好
NaN
null
你好
10
JavaScript 中存在的其中一个问题是，类型转换不确定。
<body>
<script>
var num = 5;
var num1 = "5";
alert(num + num1);
</script>
</body>
从结果中可以看出，一个数字+字符串，数字被转换成字符串了，相加变成了字符串的拼接。
可如果是 ：
alert(num - num1);结果却又是:
可以看出，在减法里面，字符串又被转换成数字。
所以为了安全起见，当你想使用数字类型时，建议使用 parseInt 强制类型转换一下。
alert(parseInt(num) + parseInt(num1));这样就能输出 10 了。
下面再看一个例子：
var num = prompt("判断奇偶，请输入一个数字：");
console.log(num + 10);输入了 12，控制台输出 1210 ，也就意味着，prompt 输入的数字会被转换成字符串，所以在我们使用 prompt 输入的数字时，一定要强制转换成数字才行：
var num = prompt("判断奇偶，请输入一个数字：");
console.log(num + 10);
console.log(parseInt(num) + 10);
if(parseInt(num) % 2 == 1){
alert(num+"->奇数");
}else{
alert(num+"->偶数");
}3.2 JavaScript 运算符
JavaScript 中的运算符和 Java 用法基本相同。此处不做详细介绍了。但有一个需要注意的点，那就是 JavaScript 中，== 有隐式类型转换，而 === 没有隐式类型转换。
var num = 1;
var num1 = "1";
console.log(num == num1);
console.log(num === num1);输出：
true
false
3.3 JavaScript 数组
//数组
var arr = new Array();
//或者写成
var arr1 = [];
arr.push(1);
arr.push("hello");
arr.push("world");
for(var i = 0; i < arr.length; i++){
console.log(arr[i]);
}输出：
1
hello
world
修改数组元素，这次使用 for ... of 打印：
arr[1] = "hey";
for(var term of arr){
console.log(term);
}输出：
1
hey
world
删除数组元素
使用 splice ，有两个参数，第一个参数表示从下标为 i 的位置开始删除. 第二个参数表示要删除的元素个数。
arr.splice(1,1);
for(var term of arr){
console.log(term);
}
console.log(arr.length);输出：
1
world
2
也可以使用 slice 来截取，不会改变原数组的结果：
//原数组为 1 hey world
var obj = arr.slice(1,2); //左闭右开
for(var term of obj){
console.log(term);
}输出：
hey
查看数组的最后一个元素，并删除
//arr的元素有：1 hey world
console.log(arr.pop());
console.log(arr.length);输出：
world
2
3.4 JavaScript 函数
语法格式：
// 创建函数/函数声明
function 函数名(形参列表){
函数体
return 返回值;
}
// 函数调用
函数名(实参列表) //不考虑返回值
返回值 = 函数名(实参列表) //考虑返回值
<input type="button" value = "添加" onclick = "add('张三','123')">
<input type="button" value = "修改" onclick = "alter('张三','123456')">
<script>
//函数的形参甚至可以没有数据类型！
function add(name, password){
alert("添加信息成功! "+"姓名："+name+" 密码："+password);
}
funtion up(){
alert("修改信息成功！！");
}
</script>
JavaScript 存在的第二个问题，便是函数实参与形参个数如果不匹配，程序照样能跑。在 script 标签中调用 add()，什么参数都没写，。：
这也就意味着，JavaScript 不存在重载！
同样的，对于 alter 这个方法，它是没有参数，但调用时给他传参数了，也依旧可以运行。
那我们怎么拿到传给 alter 的所有参数呢？方法里面有个隐藏的参数，argument：
function alter(){
alert("修改信息成功！！");
for(var item of arguments){
console.log(item);
}
}
4. JavaScript 作用域
没有包含在方法中的所有代码，都叫全局代码，会随着页面的加载而执行。而方法只有被调用了，才会被执行。
var num = 10;
console.log(num);
function test1(){
//局部变量
var num = 20;
console.log(num);
}
function test2(){
//局部变量
var num = 30;
console.log(num);
}
test1();
test2();
console.log(num);输出：
10
20
30
10
var num = 10;
console.log(num);
function test1(){
var num = 20;
console.log(num);
}
function test2(){
//修改了全局变量 num
num = 30;
console.log(num);
}
test1();
test2();
console.log(num);输出：
10
20
30
30
甚至于一开始就没有全局变量，在方法中没有写 var ，JS 也会替你创建一个全局变量：
function test2(){
num = 30;
console.log(num);
}
test2();
console.log(num);输出：
30
30
所以 JavaScript 后期给出了一个关键字 let ，来严格的修饰局部变量。
5. JavaScript 对象
在 JS 中，字符串，数值，数组，函数都是对象。每个对象中包含若干的属性和方法。
5.1 使用 字面量 创建对象（常用）
//创建了一个空对象
var a = {};
var student = {
name : "莉丝",
age: 19,
sayHi:function() {
console.log(student.name+"正在与你打招呼~");
}
};
console.log(student.name);
student.sayHi();输出：
莉丝
莉丝正在与你打招呼~
6. JavaScript 实例
6.1 更换网址图片
<body>
<img width="200px" height="120px" id="img_logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<p></p>
<input type="button" value="更换图片" onclick="changeImg()">
<script>
function changeImg(){
var sg_img = "https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_880x280_06c7476.png?v=628ed034";
document.getElementById("img_logo").src = sg_img;
}
</script>
</body>
6.2 猜数字游戏
<body>
<div>
<h2>猜数字游戏</h2>
玩家输入一个 1 ~ 10 数字：<input id="input_num" type="text"><p></p>
<input type="button" value=" 查看结果 " onclick="selectResult()">
<div id = "result_div">
</div>
</div>
<script>
function selectResult(){
// 产生随机数 1 ~ 10
var randomNum = 1 + Math.floor(Math.random()*10);
var userInputNum = document.getElementById("input_num").value;
var msg ;
if(randomNum == userInputNum){
msg = "<h4> 恭喜：猜对了</h4>";
}else{
msg = "<h4>抱歉：猜错了，正确的数字是：" + randomNum + "</h4>";
}
document.getElementById("result_div").innerHTML = msg;
}
</script>
</body>
还可以使用 jQuery 实现。 jQuery 是 JavaScript 的一个框架，极大地简化了 JavaScript 的代码。
function selectResultJq(){
var randomNum = Math.floor(Math.random()*10)+1;
var userInputNum = jQuery("#input_num").val();
var msg;
if(randomNum == userInputNum){
msg = "<h4> 恭喜：猜对了</h4>";
}else{
msg = "<h4>抱歉：猜错了，正确的数字是：" + randomNum + "</h4>";
}
jQuery("#result_div").html(msg);
} 6.3 聚合搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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;">
<input type="button" value="必应" onclick="upSearch('https://www.bing.com/')">
<input type="button" value="搜狗" onclick="upSearch('https://www.sogou.com/')">
<input type="button" value="360" onclick="upSearch('https://www.so.com/')">
</div>
<hr>
<iframe id="ifr" style="width: 100%; height: 600px;" src="https://cn.bing.com/"></iframe>
<script>
function upSearch(url){
jQuery("#ifr").attr("src",url);
}
</script>
</body>
</html>6.4 表白墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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;">
<h2>表白墙</h2>
谁 :<input id="username"><p></p>
对谁 :<input id="tousername"><p></p>
说什么:<input id="msg"><p></p>
<input type="button" value="提交" onclick="submit()"><p></p>
<div id="div_allmsg">
</div>
</div>
<script>
function submit(){
var username = jQuery("#username");
var tousername = jQuery("#tousername");
var msg = jQuery("#msg");
//非空校验
//trim() 是为了防止用户输入空格
// return 是因为用户没有输入信息，不再执行之后的代码！
if(username.val().trim() == ""){
alert("请先输入您的姓名！");
username.focus();
return;
}
if(tousername.val().trim() == ""){
alert("请输入对方的姓名！");
tousername.focus();
return;
}
if(msg.val().trim() == ""){
alert("请先输入想要传达的信息！");
msg.focus();
return;
}
// 2.将内容展示在表白墙上
jQuery("#div_allmsg").append(username.val()+"对"+tousername.val()+"说"+msg.val()+"<p></p>");
// 3. 清空输入的内容
username.val("");
tousername.val("");
msg.val("");
}
</script>
</body>
</html>
扫一扫
2096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
