JavaScript基础

最新推荐文章于 2023-06-27 19:16:02 发布
最新推荐文章于 2023-06-27 19:16:02 发布
阅读量191 收藏 2
点赞数 1
文章标签： JavaScript JavaScript基础 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaogunagmei/article/details/90480694
版权

1.JavaScript的作用

技术作用
HTML用于网页的结构的创建：文本、表格、图片
CSS用于网页美化，起到降低耦合，分工更加明确
JavaScript运行在网页的脚本语言，程序语言。类似于Java
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个 JS 文件</title>
</head>
<body>
<!--所有的脚本要写在一个 script 标签内部，MIME 类型：大类型/小类型 -->
<script type="text/javascript">
//输出 5 个 Hello World
for (var i=0; i<5; i++) {
document.write("<h1>Hello World</h1>");
}
</script>
</body>
</html>

2.JavaScript的基本语法

2.1 JavaScript语言的组成
组成部分作用
ECMA Script制定了脚本语言的规范，构成了JS的核心语法基础
BOMBrowser Object Model 浏览器对象模型，操作浏览器找那个的各种对象。如：window
DOMDocument Object Model 文档对象模型，操作网页中各种元素。如：各种标签input
2.2 JavaScript 的存放位置
  1. 放在 HTML 中，用于某个 HTML 文档。
  2. 放在 HTML 外部，以单独的 JS 文件存在，扩展名.js。可以用于不同的 HTML 文件。
    3.2.1 script 标签的说明：
src：导入外部的 JS 文件地址
type：指定脚本语言的类型，可以省略。设置为 text/javascript址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个 JS 文件</title>
</head>
<body>
<script type="text/javascript" src="js/out.js"></script>
<!--所有的脚本要写在一个 script 标签内部，MIME 类型：大类型/小类型 -->
<script type="text/javascript">
//输出 5 个 Hello World
for (var i=0; i<5; i++) {
document.write("<h1>Hello World</h1>");
if (i == 2) {
document.write("<h2>JavaScript</h2>");
}
}
</script>
<!--导入外面的文件-->
<script type="text/javascript" src="js/out.js"></script>
</body>
</html>

3. JavaScript的数据类型

3.1 JavaScript的五种数据类型
关键字说明
number数据型，包括：整数和浮点数
boolean布尔类型，包括：true、false
string字符串类型，包含：字符和字符串
object对象类型，包括：JS内置独享或自定义类型
undefined未初始化的类型，不知道是什么类型
3.2 typeof 操作符
  1. 作用：判断变量数据类型，返回数据类型的名字
  2. 写法：typeof(变量名) 或 typeof 变量名
null 与 undefined 的区别说明
null对象类型，没有值
undefined未定义的数据类型，不知打卡是什么类型
3.3 数据类型的演示（代码）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var i = 5; //数值
var f = 3.14; //数值
var b = true; //布尔
var c = 'a'; //字符串
var str = "abc"; //字符串
var d = new Date(); //日期内置对象
var person = {name: "孙悟空", age: 18}; //自定义对象类型 JSON 对象
var n = null; //为空的对象
var u; //没有初始化
document.write(typeof(i) + "<br/>");
document.write(typeof(f) + "<br/>");
document.write(typeof(b) + "<br/>");
document.write(typeof(c) + "<br/>");
document.write(typeof(str) + "<br/>");
document.write(typeof(d) + "<br/>");
document.write(typeof(person) + "<br/>");
document.write(typeof(n) + "<br/>");
document.write(typeof(u) + "<br/>");
</script>
</body>
</html>
3.4 字符串转换成数字类型
转换函数作用
parseInt()将一个字符串转成整数，如果前面的部分可以转换，也可以转换成功。如果不能转换返回NaN
parseFloat()将一个字符串转成浮点数，如果前面的部分可以转换，也可以转换成功。如果不能转换返回 NaN
isNaN()用来判断变量是否是非数字，非数字返回 true，数字返回false。必须全是数字才返回false

4.两个重要的提示函数

window 对象的方法名作用
string prompt(“提示信息”,"默认值”)用于在网页上弹出一个输入对话框 参数1：提示信息参数 2：默认值 返回：字符串类型
alert(“提示信息”) 只要是 window 的方法，window 对象都可以省略,如：window.alert()简写成 alert()在网页上弹出一个信息框，只有一个确定按钮
4.1 示例代码：

需求：通过 prompt 输入的分数，如果 90~100 之间，输出优秀。80~90 之间输出良好。60~80 输出及格。60 以下
输出不及格。其它分数输出:分数有误。

案例分析：

  1. 使用 prompt 得到输入的分数
  2. 使用 switch 对分数进行判断
  3. 如果在 90 到 100 之间，则输出优秀，其它依次类推。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//让用户输入分数
var num = window.prompt("请输入分数", "60");
//document.write(num + "<br/>"); //不需要转换 parseInt()
//document.write(typeof (num)+ "<br/>");
//如果一个字符串与数值比较大小，会自动转成数值型再比较大小。
// document.write((num > 10) + "<br/>");
//使用 switch 判断等级
switch (true) {
//case 后面使用表达式
case num >=90 && num <=100 :
alert("优秀");
break;
case num >=60 && num <90 :
alert("及格");
break;
case num >=0 && num < 60 :
alert("不及格");
break;
default :
alert("分数有误");
break;
}
</script>
</body>
</html>
示例2：

需求：
以表格的方式输出乘法表，其中行数通过用户输入

案例分析：

  1. 先制作一个没有表格，无需用户输入的 9x9 乘法表
  2. 由用户输入乘法表的行数
  3. 使用循环嵌套的方式，每个外循环是一行 tr，每个内循环是一个 td
  4. 输出每个单元格中的计算公式
  5. 给表格添加样式，设置内间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
margin: auto;
/*使用细边框的样式*/
border-collapse: collapse;
}
td {
padding: 5px;
}
td:hover {
background-color: orange;
}
caption {
font-size: 16px;
}
</style>
</head>
<body>
<script type="text/javascript">
var num = window.prompt("请输入乘法表行数：","9");
document.write("<table border=\"1\">");
document.write("<caption>" + num + "&times;" + num + "乘法表</caption>");
//外循环，每次循环一行
for (var i = 1; i <= num; i++) {
document.write("<tr>");
//内循环，每次循环一列
for (var j = 1; j <=i; j++) {
document.write("<td>");
document.write( j + "&times;" + i + "=" + (i*j));
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>

5.JavaScript函数

5.1 函数的两种定义

1.命名函数，有名字函数，可以重用
2.匿名函数，没有名字函数，不可以重用

//命名函数定义格式：
function 函数名(参数列表){
    //函数体
    [return 返回值]；
}
示例 1：
//需求：定义一个函数实现加法功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//命名函数
//定义一个函数实现 2 个数相加
function sum(a, b) {
return a+b;
}
//函数不调用不执行
document.write(sum(2,3) + "<br/>");
document.write(sum(1,5) + "<br/>");
</script>
</body>
</html>

注意的事项:

  1. 形参的类型不能写的，因为是弱类型。
  2. 如果函数有返回值，使用 return
    返回即可，不用指定函数的返回类型。如果没有返回值，不返回。
  3. 在 JS 中没有函数的重载，后面创建的同名函数会覆盖前面的函数。形参的个数与实参的个数无关。
  4. 在任何一个函数中，都存在一个隐藏的数组，名字叫 arguments
示例 2：

需求：案例：实现轮播图

案例分析：

  1. 创建 HTML 页面，页面中有一个 div 标签，div 标签内包含一个 img 标签。
  2. body 的背景色为黑色；div 的类样式为 container：设置为居中，加边框，宽度为 500px；img 的 id 为
    pic，宽度 500px;
  3. 五张图片的名字依次是 0~4.jpg，放在项目的 img 文件夹下，图片一开始的 src 为第 0 张图片。
  4. 编写函数：changePicture()，使用 setInterval()函数，每过 3 秒调用一次。
  5. 定义全局变量：num=1。
  6. 在 changePicture()方法中，设置图片的 src 属性为 img/num.jpg。
  7. 判断 num 是否等于 4，如果等于 4，则 num=0；否则 num++。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: black;
}
#wang {
width: 700px;
margin: auto;
}
</style>
</head>
<body>
<div id="wang">
<img src="img/0.jpg" id="pic" width="700">
</div>
<script type="text/javascript">
//定义一个全局变量
var num = 1;
//每过 3 秒调用一次换图片的函数
//参数 1：调用的函数名
//参数 2： 时间间隔
window.setInterval("changePic()", 3000);
function changePic() {
//得到元素的代码必须放在元素加载之后
var pic = document.getElementById("pic");
//alert(pic); //这是一个图片对象
pic.src = "img/" + num + ".jpg";
//图片加 1
num++;
//如果 num 等于 5
if (num == 5) {
num = 0;
}
}
</script>
</body>
</html>

6.事件的处理

6.1 设置事件的两种方式：
  1. 方式一：命名函数
<input type="button" value="点我试试" onclick="事件处理函数()">
  1. 方式二：匿名函数
元素对象.onclick = function () {
 事件处理的代码
}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
所有的事件都以 on 开头
onclick 后面指定函数的名字
-->
<input type="button" value="点我试试 1" onclick="clickMe()">
<input type="button" value="点我试试 2" id="b2">
<script type="text/javascript">
//事件处理函数
function clickMe() {
alert("来了");
}
//得到按钮 2
document.getElementById("b2").onclick = function () {
alert("请坐");
}
</script>
</body>
</html>

6.2 常用的事件：

事件作用
onclick单击事件
ondblclick双击事件
onload加载完毕事件
onfocus得到焦点
onblur失去焦点
onchange改变事件
onmouseover鼠标移上
onmouseout鼠标移出
onsubmitt表单提交事件
示例 1：onclick点击事件

需求：

设置事件的示例

有两个按钮，点第 1 个弹出一个信息框，点第 2 个弹出另一个信息框。分别使用两种不同的方式激活事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
所有的事件都以 on 开头
onclick 后面指定函数的名字
-->
<input type="button" value="点我试试 1" onclick="clickMe()">
<input type="button" value="点我试试 2" id="b2">
<script type="text/javascript">
//事件处理函数
function clickMe() {
alert("来了");
}
//得到按钮 2
document.getElementById("b2").onclick = function () {
alert("请坐");
}
</script>
</body>
</html>
示例 2：onload 元素加载完毕以后调用的事件

需求：页面加载完毕以后，才执行相应的 JS 代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//事件处理函数
function clickMe() {
alert("来了");
}
//整个网页加载完毕之后调用代码
window.onload = function () {
//得到按钮 2
document.getElementById("b2").onclick = function () {
alert("请坐");
}
}
</script>
</head>
<body>
<!--
所有的事件都以 on 开头
onclick 后面指定函数的名字
-->
<input type="button" value="点我试试 1" onclick="clickMe()">
<input type="button" value="点我试试 2" id="b2">
</body>
</html>
示例 3：onmouseover 鼠标移到元素上面 onmouseout 鼠标移出事件

需求：

示例：将鼠标移动到 img 上显示图片，移出则显示另一张图片。图片设置边框，宽 500px

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="img/0.jpg" id="pic" width="500">
<script type="text/javascript">
//得到图片对象，鼠标移入事件
document.getElementById("pic").onmouseover = function () {
//document.getElementById("pic").src = "img/1.jpg";
this.src = "img/1.jpg"; //当前对象
}
//鼠标移出事件
document.getElementById("pic").onmouseout = function () {
document.getElementById("pic").src = "img/2.jpg";
}
</script>
</body>
</html>

6.3 this 关键字的作用：

  1. 出现在控件的事件方法中，做为对象传递进来
<input type="button" value="点我试试 1" onclick="clickMe(this)">
//事件处理函数
function clickMe(obj) {
//obj 相当于按钮
alert(obj.value);
}
  1. 出现在匿名函数的代码中：
//得到图片对象，鼠标移入事件
document.getElementById("pic").onmouseover = function () {
//document.getElementById("pic").src = "img/1.jpg";
this.src = "img/1.jpg"; //当前对象
}
心如活水
关注
JavaScript基础-分享
du664754270的博客
07-04 900
《JavaScript基础-分享》 建立学习目标 能够使用JS中的流程控制语句(if, switch,for, while) 能够在 JS 中定义命名函数和匿名函数(方法) 能够使用 JS 中常用的事件 能够使用 JavaScript 对 CSS 样式进行操作 能够使用数组中常用的方法 能够使用日期对象常用的方法 使用工具建立一个文件： 使用Visual 建立一个文件步骤：选择文件–>新建文件–>Ctrl+s -->起名，保存格式选择HTML–>进入文本–>输入一个英文感叹
彻底弄懂＜script＞标签
热门推荐
a577473253的博客
09-11 2万+
文章目录一、script 标签特性二、script特性验证三、script标签优化 一、script 标签特性 script标签主要用于从服务器端加载一段javascript脚本并在当前页面中执行。因为其需要从服务器端中加载，所以会在一定程度上影响到web的性能。在性能优化中，script标签的优化至关重要。 ① script标签默认是同步加载的。当HTML页面在加载的过程中，遇到了一个script标签，就会中断HTML页面的加载，然后根据对应的src地址向服务器发起请求，当对应的javascript脚本加
 script标签的六个属性(src、 type、charset、language、defer、async )
qq_36073688的博客
02-06 7307
1、src：可选，链接外部文件 2、 type ：用script元素嵌入js代码记得要加type="text/javascript" <script src="" type="text/javascript" charset="utf-8"></script> 3、charset：字符编码属性，可选。默认是utf-8编码，主要表示通过src属性指定的代码的字符集，大多浏览器会忽略它的值，所以不必使用。 4、language：脚本类型属性，不是标准组成的...
【JS】关于script标签
m0_62638072的博客
06-27 6392
script标签是在web中有一种非常重要的标签，它的存在才使得脚本可以引入dom文档，并且动态网页的实现也需要使用此标签。
Vue入门手册整理
weixin_30578677的博客
03-18 316
目录 第一章、环境搭建 第二章、目录结构 第三章、Vue调试 第四章、定义页面 附录资料 第一章、环境搭建 1.1、准备： npm: 6.9.0 (npm > 3.0) node: v10.15.3 (node > 6.11.5) vue...
JavaScript(一基本语法)
kiven
07-06 1726
本篇博客是对js的一个基本的了解，对于没有js基础的同学来说应该是个入门的基本吧 javascript 是原型化继承来的面向对象的动态类型的区分大小写的客户端的脚本语言。主要目的是为了解决服务器语言，为客户端提供更流畅的 浏览效果 既有对象和事件驱动并且具有相对安全性的客户端脚本语言 同时也是一种广泛于客户端web开发的脚本语言。常用来给Html网页添加动态功能。比如相应用户的各种操作，用于表单验
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript入门篇，JavaScript基础知识
最新发布
01-05
作为Web开发者，掌握JavaScript是提升用户体验的基础。 JavaScript的学习首先从理解其语法和基本概念开始。这包括学习如何编写代码块，熟悉基本的对象类型（如字符串、数字、数组、对象等），了解变量声明、数据...
JavaScript基础语法（ppt）
05-31
JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）...
Vue项目开发中的问题：This dependency was not found
yhl_nsd的博客
04-24 2084
1.完整错误提示 This dependency was not found: * Login.js?vue&type=script&lang=js& in ./src/views/Login/Login.vue To install it, you can run: npm install --save Login.js?vue&type=script&lang=js& 2.原因及解决方案 经过查证，我Login.vue文件引入Login.js文件路径
script标签
wdnmdq_66的博客
02-19 1420
script 标签的属性 在说上面的问题之前，咱们先回顾一下，script 标签 的六个属性。 属性名 介绍 1 type 2 src 3 charset 4 language 5 async 6 defer 注意： 虽然text/javascript 和text/ecmascript 都已经不被推荐使用， 但人们一直以来使用的都还是text/javascript。 实际上，服务端在传送JavaScript 文件时使用的 MIME 类型通常是applicat...
JS lang：扩展js语言本身
weixin_34407348的博客
12-17 648
2019独角兽企业重金招聘Python工程师标准>>> ...
区别script中的type=”text/javascript”和language=”Javascript”
weixin_30268921的博客
03-03 854
区别script中的type=”text/javascript”和language=”Javascript” 内容提要 在制作网页的时候，往往需要在页面中使用客户端能够运行的JS代码，因此，都需要添加引用。JS引用一般有type="text/javascript"和language="Javascript"两种写法，但language这个属性...
JS创建对象模式7种方法详解
frontendchen的博客
08-15 1240
创建对象模式 虽然Object构造函数或者字面量创，都可以用来创建对象，但这些方式有明显的缺点：使用同一个接口创建很多对象，会产生大量的代码， 于是，工厂模式诞生了 工厂模式 工厂模式是广为人知的设计模式，抽象了创建具体对象的过程。在ES6的Class创建类之前，是无法创建类的，开发人员就发明了一种函数，用函数来封装以特定接口创建对象的细节，如下 工厂模式简单说，就是定一个函数，在函数内部创建一个对象定义属性并返回。 可以无数次调用这个函数，根据参数返回包含三个属性和一个方法的对象。书中说：虽然工厂模式解
JavaScript创建对象的几种方式
qq_51781439的博客
09-07 1258
一、Object()创建对象、用字面量的方式创建对象 1.Object()创建对象 new Object()就是利用JavaScript提供的构造函数实例化了一个对象 var person = new Object(); //为这个实例化的对象添加属性 person.name = "zhangsan"; person.age =21; person.gender = 'male'; person.sayName = function(){ console.log(this.name) }
JS面向对象设计-创建对象
weixin_30328063的博客
06-23 83
Object构造函数和对象字面量都可以用来创建单个对象,但是在创建多个对象时,会产生大量重复代码. 1.工厂模式 工厂模式抽象了创建具体对象的过程.由于ECMAScript无法创建类,我们用函数来封装以特定接口创建对象的细节. function createPerson(name, age, job) { var o = new Object(); o.name = name; ...
JavaScript 创建对象 （工厂模式、构造函数模式、原型模式、组合使用构造函数模式与原型模式）
Ahua_Core的博客
06-14 6000
JavaScript 创建对象工厂模式构造函数模式三级目录 总结JS创建对象的几个模式及各自优缺点 工厂模式 function createPerson(name,age,job){ var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayName = function(){ console.log(this.name); }; return obj; } var person1 = cre
pink老师JavaScript基础课程PPT合集
从给定的文件信息中，我们可以提炼出关于JavaScript基础知识点的相关内容。以下是对这些文件内容的详细说明和知识点的整理： 标题：“pink老师Javascript基础PPT.zip” 描述：“2021年pink老师线下班 Javascript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值