Javascript基础

最新推荐文章于 2024-01-15 22:01:56 发布
最新推荐文章于 2024-01-15 22:01:56 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： html5 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45638271/article/details/124047533
版权

在html中使用JavaScript

目标

  • 了解在html中怎么使用JavaScript

路径

  1. 方式一：内嵌式
  2. 方式二：外联式

我们的html文件是专门用来书写html语言的。所以我们的js代码是不能随意的书写在html文件中的。它在html中有它特别的位置。而我们接下来要学习的就是js和html结合的方式。

在HTML文件中引入JavaScript有两种方式，一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另一种是链接外部JavaScript脚本文件，称为外联式。

方式一：内嵌式

内部js：也就是在html源码中嵌入js代码

语法格式：

<script type="text/javascript">
	这里写你的js代码
</script>

注意：

​ 1、

​ 通常有两个位置书写

​ 2、type="text/javascript"可以省略

经验：

​ 一般我们的JS是需要操作DOM元素的也就是页面上的标签，如果JS代码写在页面上面，想通过js代码获取某个标签是拿不到的。因为JS是阻塞式加载语言，就是必须是自上往下加载，有点类似单线程。当浏览器在执行js代码时，不能同时做其它事情，即

​ 所以这种方式引入JS我们的代码一般是写在body标签的下面的 。因为只有整个页面即html中的所有标签加载完成之后才可以使用js代码操作标签。而css属于并行加载语言，所以可以书写在head标签中。

问题：

​ 假设多个页面都要用到同样的js代码的时候，我们可以在每个js页面复制一份。但是当我们需要对js代码进行修改的时候，这个时候需要在每个页面都进行修改，非常麻烦，所以上面这种方法不能提高js的复用性。接下来我们要学习的就是js与html的另一种结合方式，也就是引入外部js文件。

方式一：外联式

外部js：也就是将js代码单独写成一个js文件(扩展名是 .js)， 在html代码中引入这个封装好的js文件

语法格式：

<script type="text/javascript" src="xxx.js">
</script>

注意：无论是内部js还是外部js在html中引入的位置是随意的，标签中可以引入，标签一样可以引入

经验：

因为JS是阻塞式加载（当加载JS的时候啥事都不能做，只能去加载JS）。如果JS比较多，这样我们的页面就得不到加载，可能会出现白屏现象，所以一般我们引入外部JS文件也都是写到body的下面。

JS基础语法：变量

目标

  • 掌握JavaScript中变量的使用

路径

  1. JavaScript变量的定义

JavaScript变量

java是强类型语言，注重变量的定义，所以在java中定义变量类型的方式如下：

// 整型
int i = 1314;
// 浮点型
double d = 521.1314;
// 字符型
char c ='c';
// 字符串型
String str = "用心做教育";
//布尔型
boolean b = true;
// 常量
final Integer PI = 3.14;

js是弱类型语言，不注重变量的定义，所以在js中定义变量的类型方式如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03-JS变量声明</title>

</head>
<body>

<script>
        /*
        *   java: 强类型语言
        *       定义变量的时候,必须声明类型
        * */
    // String str = "用心做教育";
    // int i = 1314;
    // double d = 521.1314;
    // final Integer PI = 3.14;
    // boolean b = true;

        /*
        *   js : 弱类型语言
        *       变量有类型,但是不需要在定义时声明
        *
        *   js的基础语法: ECMAScript 简称ES
        *       es5 : var (variable) 变量
        *           var有一些作用域问题,被淘汰了
        *
        *       es6 :
        *           1. let  定义变量(允许改变)
        *           2. const 定义常量(恒定不变)
        *
        *       js代码不需要编译,直接浏览器解释运行
        *           (js有没问题,最终参考的是浏览器)
        *
        *       为什么idea会提示let/const 报错呢?
        *           因为idea默认使用es5的语法来检查js代码
        *           我们要换成es6
        
			 * 通过演示，我们发现单引号输出一串字符串也可以，在js中没有字符类型概念。
			 * 所以单引号和双引号表示的是一个意思。
        * */
        var str = "用心做教育"
        var i = 1314
        var PI = 3.14
        console.log(str)

        let str2 = '用心做教育'
        let i2 = 1314
        const PI2 = 3.14  //常量
        console.log(PI2)
</script>
</body>
</html>

说明：

1、为什么idea会提示let/const 报错呢?

请添加图片描述

因为idea默认使用es5的语法来检查js代码，我们要换成es6。

请添加图片描述

请添加图片描述

2、在js中没有字符串类型概念，只有字符类型。所有在JS中字符串的表示使用单引号和双引号都可以。

3、问题：在js中，由于定义任意的数据类型都使用let关键字。那么怎么去查看某个变量的数据类型呢？ 使用关键字： typeof

使用格式： typeof 变量名

代码示例：

请添加图片描述

注意：typeof 变量名，返回值都是字符串类型。

4、var和let的区别(了解)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05-经验值分享</title>

</head>
<body>

<script>
    // for循环举例：var声明变量全局作用域、let声明变量是局部作用域
    for (var i = 0; i < 5; i++) {
        document.write('<h3>我是var修饰遍历的内容</h3>')
    }
    console.log(i);//var修饰的变量，在for循环外还可以使用

    for (let j = 0; j < 5; j++) {
        document.write('<h3>我是let修饰遍历的内容</h3>')
    }
    // console.log(j);//let修饰的变量，在for循环外不能使用
    {
        var a = 10;
        let b = 5;
    }
    console.log(a); // 可以取到
    console.log(b); // 不能取到

</script>
</body>
</html>

JS基础语法：数据类型

目标

  • 了解JavaScript中的数据类型

路径

  1. 基本数据类型
  2. 引用数据类型

跟java一样，js的数据类型也分为基本数据类型(原始数据类型)和引用数据类型(复合数据类型)，而JS中一共有6种数据类型，其中5种基本数据类型和1种引用数据类型。

基本数据类型（原始数据类型）

数字类型：number 包含了小数和整数

布尔类型：boolean 只有两个值： true（真）| false（假）

字符串类型：string 包含字符和字符串，既可以使用双引号又可以使用单引号

未定义类型：undefined 只有一个值，即 undefined未定义

空类型：null 只有一个值 null，表示空对象

补充：

值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

alert(null == undefined); 输出 “true” 尽管这两个值相等，但它们的含义不同。

引用数据类型(复合数据类型)

object : 对象

与java一样，js中的对象都是引用数据类型，所以你也可以使用我们所熟知的new关键字来“创建对象”。

例如：

创建一个上帝对象： var obj = new Object();

创建一个日期对象： var date = new Date();

小结

  • 在js中通常使用：var或let来定义变量
  • 任何类型变量的定义都是使用：var或let
  • js底层会自动根据所赋的值来区分不同的数据类型
  • 数据类型分类：
    • 基本数据类型
      • string
      • number
      • boolean
      • undefined
      • null
    • 引用数据类型
      • Object

JS基础语法：运算符

比较运算

x=5; //比较运行的结果是：boolean

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zAjBkoBo-1649411853695)(imgs/clip_image006.gif)]

== 和 === 的区别：

  • 两者都可以用来比较两个变量的值是否相等

  • == 先做数据类型的转换，再进行比较。比如可以将整数转换为字符串，或者将字符串转换为整数等

  • === 全等 严格的比较，如果符号两侧的数据类型不一致，则立刻返回false

!= 和 !== 的区别：

  • != 在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较
  • !== 不会进行类型转换,在比较时除了对值进行比较以外,还比较两边的数据类型,它是恒等运算符===的非形式

总结一下JS中6个假：

数字0， 空字符串''或者"",   false,    空null,   undefined,    NaN

NaN: Not a Number 不是一个数字

例如：

alert(1-"abc"); //结果：NaN     //表示1减去字符'abc' ，不属于一个数字

JS基础语法：函数

目标

  • 掌握JavaScript中函数的基本使用

路径

  1. 普通函数
  2. 匿名函数

在java中,当我们需要多次使用一段代码的功能的时候，我们可以使用方法来封装这段代码。当然，在js中我们也可以使用函数来封装一段js代码。下面一起来学习js中函数。

js的函数是js非常重要的组成部分，js最常用的函数的定义方式有两种，需要注意的是在js中，通过function关键字来定义函数

普通函数

语法格式：

function 函数名(参数列表) {//形参类型不需要书写，直接书写变量名即可
   js逻辑代码
   return 返回值  //js会自动推导返回值类型
}
函数调用：函数名(实际参数);
一定要加上小括号

js中函数中有一些与我们java中不一样的地方。我们重点学习如下这些不一样的地方。因为下面4点会涉及到我们日常的开发中。

1、 函数需要被调用才能执行。

2、 js中，如果函数需要返回值我们直接return就行了。

​ 定义函数的时候不需要声明返回值的类型，因为js是弱数据类型，返回什么数据类型都是var。

3、 在js中，如果我们需要给函数传递参数，那么我们直接写变量名就行，不需要声明传入变量的类型。

4、 在js中，不存在函数重载的概念，如果2个函数名相同，后面出现的函数会覆盖前面的函数。

js函数的注意事项代码示例如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script type="text/javascript">
			/*
			1、函数需要被调用才能执行。
			2、js中，如果函数需要返回值我们直接return就行了。
					定义函数的时候不需要声明返回值的类型，因为js是弱数据类型，返回什么数据类型都是var。
			3、在js中，如果我们需要给函数传递参数，那么我们直接写变量名就行，不需要声明传入变量的类型。
			4、在js中，不存在函数重载的概念，如果2个函数名相同，后面出现的函数会覆盖前面的函数。
			*/
			/*
			 * 函数定义格式：
			 * function 函数名(参数列表)
			 * {}
			 */
			//定义一个函数
			function fn()
			{
				console.log(12);
			}
			//1、函数需要被调用才能执行。
			fn();
			//2、js中，如果函数需要返回值我们直接return就行了。
			//定义函数的时候不需要声明返回值的类型，因为js是弱数据类型，返回什么数据类型都是var。
			//定义一个函数
			function fn1()
			{
				return 'hello';
			}
			//调用函数
			var result=fn1();
			console.log(result);
			//3、在js中，如果我们需要给函数传递参数，那么我们直接写变量名就行，不需要声明传入变量的类型。
			//定义一个函数
			function fn2(a)
			{
				console.log(a);
			}
//			fn2(3);
			fn2('hello');
			//4、在js中，不存在函数重载的概念，如果2个函数名相同，后面出现的函数会覆盖前面的函数。
			//定义一个函数
			function fn3()
			{
				console.log('world');
			}
			function fn3()
			{
				console.log('js');
			}
			//调用函数
			fn3();//;'js'
		</script>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hxrdwxXR-1649411966307)(imgs/13-1597758539446.bmp)]

下面这些点大家自行学习，因为如下的不同之处我们正常开发很少去触及。了解一下就行

1、 如果函数的声明带有参数，但是调用时不带参数，函数也可以正常被调用。

2、 如果函数声明时没有参数列表，调用的时候传入参数，函数也能照样执行。

3、 在JS中,可以使用arguments来获取实际传入的参数。arguments是实参的参数数组。

代码示例：

//5、如果函数的声明带有参数，但是调用时不带参数，函数也可以正常被调用。
			//定义带有参数的函数
			function fn4(a,b)
			{
				console.log(a+'函数被执行了'+b);
			}
			//调用函数
			//注意：如果不传递任何数据，参数显示是undefined
			fn4();//undefined函数被执行了undefined
			var c;
			console.log(c);//undefined
			//6、如果函数声明时没有参数列表，调用的时候传入参数，函数也能照样执行。
			//定义函数
			function fn5()
			{
				console.log('函数被执行了');
			}
			//调用函数
			fn5(14,23);//函数被执行了
			//7.在JS中,可以使用arguments来获取实际传入的参数。arguments是实参的参数数组。
			//定义函数
			function fn6()
			{
//				console.log(arguments);
				//遍历数组
				for (var i = 0; i < arguments.length; i++) {
					console.log(arguments[i]);
				}
			}
			//调用自定义函数
			fn6(12,34);

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0wMUlTjs-1649411966308)(imgs/14-1597758539446.bmp)]

匿名函数

匿名函数也就是没有名字的函数

语法格式：

function(参数列表){
  js逻辑代码
}

匿名函数没有办法直接调用，一般情况下匿名函数有两种使用场景：

第一种： 将匿名函数赋值给一个变量，使用变量调用函数。

​ 定义函数并赋值给变量：

var fn = function(参数列表) {
  js逻辑代码
}；

调用函数：fn(实际参数);

上述匿名函数代码演示如下所示：

function fn6()
{
//				console.log(arguments);
//遍历数组
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//调用自定义函数
fn6(12,34);
/*
* 匿名函数：格式：
* function(参数列表){
* 	
* }
* 匿名函数没有名字，不能直接让匿名函数执行，让匿名函数执行，有两种方式：
* 1.将匿名函数赋值给一个变量，然后通过变量名(参数列表)方式调用
*/
//定义一个匿名函数
var fn7=function()
{
console.log('匿名函数被执行了');
}
//执行上述匿名函数
fn7();
//对于函数而言，其实函数名本身指向的就是函数。
//输出上述函数名fn6的名字
console.log(fn6);

匿名函数：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDJln5gP-1649411966308)(imgs/15-1597758592011.bmp)]

说明：对于函数而言，其实函数名本身指向的就是函数。

第二种： 匿名函数直接作为另一个函数的实际参数传递。

例如：

function xxx( 数字类型参数，字符串类型的参数，函数类型的参数 ) {

// js逻辑代码

}

调用该函数： xxx( 100 , ”abc” , function(){…} );

上述匿名函数代码演示如下所示：

/*
			 * 让匿名函数执行方式二：匿名函数作为函数参数
			 */
			//定义一个函数,第二个参数y接收一个匿名函数
			function fn8(x,y)
			{
				//输出x和y
				console.log('x='+x);//x=100
				console.log('y='+y);//y=function(){console.log(5);}
				//调用匿名函数
				y();
			}
			//调用函数，第二个参数是匿名函数
			fn8(  100  ,  function(){
				console.log(5);
			});

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AQ39gwuf-1649411966309)(imgs/16-1597758592011.bmp)]

acacac.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML引入Javascript代码的三种方法
Sun_Yangguang的博客
10-21 6351
自学所遇问题记录
html中css层叠样式表（行内样式，内嵌式，外部式）
lingjiaxiaozila的博客
08-01 2934
css书写规范，行内样式，内嵌式，外部式， 基本选择器： 通用选择器 id选择器 类选择器 标签选择器 群组选择器并集选择器 器名下的对应标签 层叠选择器 后代选择器 伪类选则器 鼠标点击时，鼠标悬停，点击后...
深入理解JavaScript中的类型（Types）
weixin_47352287的博客
04-10 3978
一、类型的定义 大多数人认为，像 JavaScript 这样的动态语言是没有类型（type）的。 也有人认为，JavaScript 中的“类型”应该称为“标签”（tag）或者“子类型”（subtype）。 定义：类型是值的内部特征，它定义了值的行为，目的是为了区分其他值。 怎么理解？变量是没有类型的，值才具有类型，类型描述了值的行为特征；换句话说，当某个值发生改变，类型也随之改变（如 a = 1 --> a = ‘1’）。 二、内置类型（七种） JavaScript中有七种内置类型： 空值（nu
彻底弄懂＜script＞标签
a577473253的博客
09-11 2万+
文章目录一、script 标签特性二、script特性验证三、script标签优化 一、script 标签特性 script标签主要用于从服务器端加载一段javascript脚本并在当前页面中执行。因为其需要从服务器端中加载，所以会在一定程度上影响到web的性能。在性能优化中，script标签的优化至关重要。 ① script标签默认是同步加载的。当HTML页面在加载的过程中，遇到了一个script标签，就会中断HTML页面的加载，然后根据对应的src地址向服务器发起请求，当对应的javascript脚本加
[HTML5]嵌入内容
GUIDM的博客
04-06 850
1、嵌入图像 img元素允许我们在html文档里嵌入图像 ‼️要嵌入一张图像需要使用src和alt属性。 eg： <img src="triathlon.png" alt="triathlon image" width="200" height="67"/> src属性：指定欲嵌入图像的URL。 ⚠️width和height属性告诉浏览器图像尺寸有多大，而不是你希望它有多大。 1.1在超链接里嵌入图像 结合a元素创建一个基于图像的超链接。 eg： <ahref...
JavaScript基础
02-24
JavaScript基础 模块挑战是学生独立完成的下午项目或作业。 这是在先前由讲师完成的指导项目的基础上扩展的。 高级CSS和JavaScript JavaScript基础 目标 使用let，const，var并演示它们之间的差异。 了解并能够使用...
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript 基础
02-16
主要为个人学习笔记 超详细
HTML--JavaScript--引入方式
最新发布
weixin_44517278的博客
01-15 564
啊哈~~~基础三剑看到第三剑，JavaScriptHTML用于控制网页结构CSS用于控制网页的外观JavaScript用于控制网页的行为。
如何在HTML中使用JavaScript——外部引入和内部嵌入
努力发paper中的业余分享爱好者
08-09 2万+
当我们想将js脚本放入网页中时，我们无一例外的总是会想到HTML。 在如何使用JavaScript之前，我们需要先了解<script>元素，其定义了6个属性 async：可选。表示应该立即下载脚本，但是不应妨碍页面中的其他操作。在XHMTL总，要将async设置为async=“async”。异步脚本一定在页面的load事件前执行，但可能会在DMOContenLoaded事件出发之前或...
HTML中嵌入js代码的两种方法
热门推荐
流年
05-22 12万+
在Web页面中使用JavaScript有两种方法，一种是在页面中直接嵌入JavaScript代码，另一种是链接外部JavaScript文件。 1、在页面中直接嵌入JavaScript代码 （1）在页面的任何位置（head部分 body部分 body的后面 较好）插入script标签，对于该标签必要的属性type属性，该属性描述了文档的类型 （2）在script标签内部编写js语句
【web前端(三)】html_嵌入式框架
LED_of_Java的博客
08-05 2156
主页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1"> <!--iframe:向一个...
JS Function类型 声明
Dosth_Magic
04-03 525
一、3种声明方式 1. function sum(num1,num2){ return num1 + num2; } 2. //函数表达式定义函数 var sum=function(num1,num2){ return num1 + num2; } 3.使用Function构造函数 var sum = new Function("num1", "num2", "r...
在html中嵌入js代码的几种方式
月小水长
08-17 2万+
1.最常用：使用script标签的src属性 &lt;script&gt;标签包含src属性，这个属性可以指定包含js代码的文件路径，使用示例如下： 1.首先在工程新建一个javascript目录，在目录下新建demo.js文件，文件内容如下 function show(){ alert('Hello,JavaScript!'); } 2.在 工程根目录下新建demo.html文件，...
如何在HTML页面引入javaScript代码
bwf_erg的博客
03-02 8313
javaScript脚本代码可以通过以下3种方式嵌入到HTML文档： 1.使用…标签对在页面内引用 使用…标签对将javaScript代码嵌入到HTML文档中。 浏览器在加载上述代码中，会自动识别javaScript脚本代码的…。并执行它里面的代码，然后将结果返回给HTML,并在浏览器窗口显示。 在页面内通过…标签对引入javaScript代码，其中…标签对的位置可以在…标签对和…
引用外部.css或.js文件的路径问题--jsp或html页面引用
zzy7075的专栏
01-04 1万+
jsp或html页面引用外部.css或.js文件时，注意路劲问题，如果设置不当，会引用不到这些外部的文件 假设使用下面的目录结构： -webapp |-MyProject目录 |--WebContent目录 |---scripts目录 ---dtree.js文件 |---styles目录 ---main.css文件 |---pages目录 -...
html当中如何引用js文件
mark_to_win的专栏
09-22 1万+
3）html当中如何引用js文件马克-to-win：如果需要javascript工程师和html美工各干各的工作，需要分开写文件。例 1.2<html><head> <script src="Hello.js"></script> <title></title></head><body>&l...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值