JavaScript总结

于 2024-03-05 10:24:50 发布
阅读量352 收藏 10
点赞数 7
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71876537/article/details/136471391
版权

文章目录

JavaScript

一、介绍

JavaScript 是一种基于对象和事件驱动，并具有安全性能的脚本语言.
           是一个运行在客户端浏览器进行解释执行的脚本语言。
Javascript 由 ECMAScript + DOM + BOM 组成

Web系统的执行过程:
    服务器端给客户端返回数据，由客户端浏览器解释执行返回的数据（HTML+CSS+JavaScript）进行数据的渲染，由客户端浏览器进行呈现。

二、引入JavaScript的方式

外部JavaScript: <script src="js文件的地址" type="text/javascript" charset="utf-8"></script>

内部JavaScript: <script type="text/javascript" charset="utf-8"><script>
                <title></title> 之下
                <body></body> 之间
                </body></html> 之间

三、常用脚本

1、网页中打印

document.write(width);
//可以插入标签

2、控制台打印

console.log(width);
//一般用于代码调试

3、网页弹窗

alert(width);
//一般用于代码调试

4、从网页弹窗中接收数据

var num = prompt("请输入一个数");

四、JavaScript中的核心语法

1、变量

//ES5下都是用var定义变量
var age = 30;  //值确定变量的数据类型

2、常量

const age = 30;  //不可以更改值

3、数据类型

1、undefined         //没有初始值
2、object              //对象型
3、number            //数值型
4、boolean           //布尔型
5、string            //字符型
3.1、输出变量的数据类型
typeof();
3.2、Sting对象
3.2-1、获取长度
var str = "thisjavascript"
//length属性
var a = str.length;
3.2-2、根据索引值获取指定的字符串内容
var str = "thisjavascript";
var s=str.charAt(1);
3.2-3、字符串截取
var str = "thisjavascript";
var f=str.substring(3,6);
// 第一个参数起始索引，第二个代表结束索引值
3.2-4、字符串分割
var str = "thisjavascript";
var arr=str.split('');
for(var i=0;i<arr.length;i++){
        console.log(arr[i]+"\n")
}

4、数组

var fruit = new Array("apple", 98, true);
fruit.push ("梨");

//与java不同的地方:1.语法不同  2.数组里面可以存放不同数据类型的值 3.可以通过push进行数组数据的追加，动态的进行数组的扩容

5、运算符

5.3、赋值运算符
1、=
2、+=
3、-=
4、*=
5、/=
5.3、算术运算符
1、+
2、-
3、*
4、/
5、%
5.3、比较运算符
1、>
2、<
3、>=
4、<=
5、!=
1、==    //相等(内容)
2、===   //全等(内容+数据类型)
5.4、逻辑运算符
1、&
2、|
3、&&
4、||
5.5、三元运算符
var a = 10 ;
var b = 20 ;
var c = a > b? 'a > b' : 'a < b';
document.write(c);

6、判断语句

var a = 10 ;
var b = 20 ;
if (a>b) {
	alert("a>b")
} else{
	alert("a<b")
}

7、选择语句

var a = 10 ;
switch(a){
	case 10:
		console.log(111);
	break;
	case 20:
		console.log(222);
	break;
}

五、JavaScript中的函数

内置函数

1、字符串转数字

var a = "123.5";
var b = parseInt(a);
alert(typeof(b))

2、浮点类型转换为数值类型

var str = "123.5";
var sum = parseFloat(str);
alert(sum);

3、判断变量是否是非数字

var a = 123;
document.write(isNaN(a))

自定义函数

// 带参函数，参数前不需要加var关键字
function show(num1 , num2){
	var a = num1 + num2 ;
	alert(a);
}

五、JavaScript中的事件

//一般配合自定义函数使用

1、页面加载事件

<body onload="alert(show(1,2))">
	<!-- onload 页面加载事件 -->
</body>
<script type="text/javascript">
	// 自定义函数
	function show(num1 , num2){
		var a = num1 + num2 ;
		return a;
	}
</script>

2、点击事件

<body>
	<!-- onclick 单击事件 -->
	<a href="#" onclick="alert(show(2,3))">123</a>
</body>
<script type="text/javascript">
	// 自定义函数
	function show(num1 , num2){
		var a = num1 + num2 ;
		return a;
	}
</script>

3、鼠标移入事件

<body>
	<!-- onmouseover 移入事件会穿透父级盒子 -->
	<!-- onmousemove 移入事件不会穿透父级盒子 -->
	<a href="#" onmouseover="alert(show(2,3))">123</a>
</body>
<script type="text/javascript">
	// 自定义函数
	function show(num1 , num2){
		var a = num1 + num2 ;
		return a;
	}
</script>

4、鼠标移出事件

<body>
	<!-- onmouseout 移出事件会穿透父级盒子 -->
	<!-- onmouseleave 移出事件不会穿透父级盒子 -->
	<a href="#" onmouseout="alert(show(2,3))">123</a>
</body>
<script type="text/javascript">
	// 自定义函数
	function show(num1 , num2){
		var a = num1 + num2 ;
		return a;
	}
</script>

5、双击事件

<body>
	<!-- ondblclick 双击事件 -->
	<a href="#" ondblclick="alert(show(2,3))">123</a>
</body>
<script type="text/javascript">
	// 自定义函数
	function show(num1 , num2){
		var a = num1 + num2 ;
		return a;
	}
</script>

6、键盘事件

<body>
	<!-- onkeydown 键盘按下事件 -->
	<!-- onkeyup 键盘松开事件 -->
	<!-- onkeypress 有无输出内容事件 -->
	<a href="#" onkeydown="alert(show(2,3))">123</a>
	<a href="#" onkeyup="alert(show(2,3))">234</a>
	<a href="#" onkeypress="alert(show(2,3))">456</a>
</body>
<script type="text/javascript">
	// 自定义函数
	function show(num1 , num2){
		var a = num1 + num2 ;
		return a;
	}
</script>


// var a = event.keyCode; 获取键盘值

7、域内容改变事件

<body>
	<!-- onchange 域内容改变事件 -->
	<select name="" id="" onchange="alert(show(2,3))">
			<option value="">-------</option>
			<option value="">123</option>
			<option value="">234</option>
	</select>
</body>
<script type="text/javascript">
	// 自定义函数
	function show(num1 , num2){
		var a = num1 + num2 ;
		return a;
	}
</script>

六、window对象

1、常用方法

prompt( )                                                //显示可提示用户输入的对话框         

alert( )                                                 //显示带有一个提示信息和一个确定按钮的警示框

confirm( )                                               //显示一个带有提示信息、确定和取消按钮的对话框

close( )                                                 //关闭浏览器窗口                               

open("弹出窗口的url","窗口名称","窗口特征”)                //打开一个新的浏览器窗口，加载给定URL所指定的文档

setTimeout( )                                            //在指定的毫秒数后调用函数或计算表达式            

setInterval( )                                           //按照指定的周期（以毫秒计）来调用函数或表达式

2、常用方法中的open方法中的属性

height、width             //窗口文档显示区的高度、宽度。以像素计算 

left、top                 //窗口的x坐标、y坐标。以像素计   

toolbar=yes\no \1\0       //是否显示浏览器的工具栏。黙认是yes         

scrollbars=yes\no \1\0    //是否显示滚动条。黙认是yes                 

location=yes\no \1\0      //是否显示地址地段。黙认是yes               

status=yes\no\1\0         //是否添加状态栏。黙认是yes           

menubar=yes\no\1\0        //是否显示菜单栏。黙认是yes           

resizable=yes\no\1 \0     //窗口是否可调节尺寸。黙认是yes       

titlebar=yes\no\1\0       //是否显示标题栏。黙认是yes                 

fullscreen=yes\no\1\ 0    //是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

七、history对象

1、返回上一页

history.go(-1);

2、前进一页

history.go(1);

八、document对象

getElementById()                   //返回对拥有指定id的第一个对象的引用

getElementsByName()                //返回带有指定名称的对象的集合

getElementsByClassName()           //返回带有指定类名的对象的集合

getElementsByTagName()             //返回带有指定标签名的对象的集合

write()                            //向文档写文本、HTML表达式或JavaScript代码
语法规定
大小写敏感
对象，变量，函数【方法】驼峰命名法
分号：语法规定可以不加，但是为了语言的规范，写的时候一定要加上。
凉薄小白
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript学习总结
qq_53069622的博客
07-08 1330
JavaScript学习总结
JavaScript 总结
qqyouhappy的博客
10-20 7900
avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。 ECMAScript，描述了该语和基本对象。 文档对象模型（DOM），描述处理网页内容的方法和接口。 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。  什么是原型？ 原型是一个对象，其他对象可以通过它实现属性继承。 在JavaScript中，当
javascript学习总结
weixin_59049031的博客
07-10 1453
这篇笔记主要记录了我在学习JavaScript时的重点知识总结。通过web应用基础这门课程的学习，我对于JavaScript是什么，JavaScript的基本用法和语法有了初步的了解。JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码，可以改变html悲痛。JavaScript 插入 HTML 页面后，可由
JavaScript详细总结
qq_53124400的博客
01-05 705
概念 javascript 1.它是一门客户端脚本语言 客户端的语言：它是运行在客户端浏览器的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器 解析执行了 javascript功能 可以来增强用户和html页面的交互过程，可以用来控制html元素，让页面有一些动态的效果，增加用户的体验 javascript发展 JavaScript = ECMASceipt + JavaScript自己特有的（BOM + DOM） 1.1992年，Nombase
JavaScript 总结（2022）
ximingx
05-27 679
JavaScript [ 1995 Brendan Eich ]
JavaScript基础（详细总结）
热门推荐
挣钱买房买车的博客
08-18 1万+
JavaScript基础入门详细总结
最新Javascript 基础知识全总结(持续更新)
weixin_66092620的博客
04-17 8208
本人目前在黑马程序员培训,现将所学的知识整理出来,希望能帮到零基础的初学者,后续会持续更新~~~ 一,JavaScript 是什么 1, JavaScript 是什么 JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果 2, 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 3, JavaScript的组成 E...
Javascript总结
梦想起飞的地方，必须用心去经营
03-27 1752
JavaScript的学习是在开发项目的过程中开始学习的，在这样一个背景下，我给自己定了一个学习目标。那就是熟悉JavaScript的基本语法，在项目中基本会使用JavaScript，然后遇到问题时再专攻这一点。于是JavaScript的视频就匆匆过了一遍，并没有深入学习。不得不承认，JavaScript是一门比较好上手的语言，尤其是对有其他语言基础的人。在应用JavaScript的过程中，你会逐
JavaScript总结1
08-03
1、组成部分 2、相关联系 4、代码示例 5、输出语句 6、注释 1、关于弱类型 2、在 JS 中的字符和字符串引号 3、 var 定义变量的特点 4、代码示例
javascript总结
08-18
在学习完js课程之后，自己手动编写的总结文档，以及平常遇到的小问题的解决办法，通俗易懂，适合正在学习js的同学
javaScript总结
08-08
javaScript总结
Javascript 总结
05-15
Javascript 总结
Javascript总结导图
10-08
Javascript总结导图很全很好，完全不需要看手册了
JAVASCRIPT keycode总结
10-30
JAVASCRIPT中keycode总结，方便需要控制keycode的朋友
javascript总结图
04-23
主要是javascript学习的十几张总结图 方便查看
JavaScript总结笔记
01-03
JavaScript 概述 JavaScript是基于对象和事件的脚本语言。 特点： 1. 安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。 2. 跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）
JavaScript new
最新发布
08-29
总结起来，JavaScript 中的 new 运算符用于实例化一个类并创建一个对象，它通过一系列步骤来完成对象的创建和初始化，确保对象具有正确的原型链和上下文。<span class="em">1</span><span class="em">2</span><span ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值