我要学前端 - - ＞＞JavaScript

最新推荐文章于 2023-10-07 17:37:19 发布
最新推荐文章于 2023-10-07 17:37:19 发布
阅读量381 收藏
点赞数
分类专栏： HTML js JavaScript 文章标签： js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xdc1812547560/article/details/109002522
版权
HTML 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏
JavaScript
1 篇文章 0 订阅
订阅专栏

文章目录

js是什么

js历史

在这里插入图片描述
为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳ECMAScript作为标准（ISO/IEC-16262）。从此，Web浏览器就开始努力（虽然有着不同的程度的成功和失败）将ECMAScript作为JavaScript实现的基础。EcmaScript是规范.

js组成

JavaScript是一种专为与网页交互而设计的客户端脚本语言。最初是为了实现表单验证之前表单验证都是在服务器完成

JS组成：核心（ECMAScript）
浏览器对象模型（BOM）Broswerobjectmodel（整合js和浏览器）
文档对象模型（DOM）Documentobjectmodel(整合js，css，html)

JavaScript基本语法

   JavaScript的语法很多都借鉴了C语言或者类C语言。在JavaScript中是区分大小写的,第一个字符必须是一个字母、下划线(_)或者美元符号($)符号。注视这一块也是C语言风格的注释，可以是//也可以是/**/。

   typeof 操作符可以让用户知道变量是什么数据类型。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8" />
	   <title>网页标题</title>
	   <script type="text/javascript">
		   var flag = true;
		   alert(typeof flag);
		   //返回结果是 boolean
	   </script>
    </head>
    <body>
        
    </body>
</html>

NAN

NAN是英文Not a Number的缩写，从英文意思就知道是非数值。这个数值主要表示本来要返回一个数值的操作数未返回数值的情况。(这样就不会抛错误了)。就举个例子,当 9 / “hello” 的时候,返回的则是NAN。因为9是数值但是"hello"不是数值而是字符串。isNAN()函数就是用来判断一个值到底是不是数值

	 alert(isNaN(NaN));	//true
	 alert(isNaN(666)); //false

数值转换
在JavaScript里面有三个函数可以把非数值转换成数值: Number()、parseInt()、parseFloat()。第一个函数Number可以用于任何数据类型、另外两个函数就是专门给字符串用的,在Java语言里面也见过这样的方法。
使用Number转化成数值的时候,字符串必须完全是数字,否则返回NAN。使用parseInt的时候,如果第一个字符是数值那么它会判断第二个字符是不是数值。直到遇见非数值的时候,后面的就不会再判断直接返回前面的内容了。就比如num3只返回了15一个道理。

		var num1 = Number("helloworld");	//NAN
		var num2 = parseInt("hello");		//NAN
		var num3 = parseInt("15asf96");		//15
		var num4 = parseInt("4546465");		//4546465
		var num5 = Number("asf45448f4sa86");	//NAN
		var num6 = Number("15464");			//15464
		var num7 = Number("15asfasf");		//NAN
		alert(num1 + " " + num2 + " " + num3 + " " + num4 + " " + num5 + " " + num6 + " " + num7);

字符串面量

在这里插入图片描述

js引入

  1. 直接在html中编写
<script type="text/javascript">
	/* 警告弹出框 */
	alert("hello world")
</script>

eg:

<!DOCTYPE html>
<html>
<head>
	<title>js基础</title>
	<script type="text/javascript">
		alert("hello world")
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述

  1. 外部引入js
<script type="text/javscript" src="js/demo.js">

js编写

js基本数据类型

数字number-->100,3.14
字符串string-->'hello'"hello"
布尔值boolean-->truefalse
特殊数据类型null-空undefined-未声明`

js变量

变量，值可以改变的叫做变量

  1. 声明变量通过关键字(系统定义的有特殊功能的单词)var
    <1>声明变量的时候，同时给变量赋值，叫初始化
  2. 变量赋值
  3. 同时定义多个变量变量之间要使用逗号隔开。

js标识符

标识符：用户自定义的所有名字叫做标识符

标识符规则：1.由数字、字母、下划线、$组成。除外的不可
2.不能以数字开头
3.区分大小写
4.标识符必须见名知意

JS-BOM

BOM就是浏览器的对象模型，浏览器可以通过调用系统对话框，向用户显示信息。
系统提供了三个函数，可以完成系统对话框的操作

window.alert("警告框");
window.confirm("请选择确定和取消");
window.prompt("请输入一个数","默认值");

JS-DOM

DOM是文档对象模型：开始到结束
HTML+CSS–>页面内容
JS–>页面行为操作

注：DOM是打通HTML与CSS和JS壁垒的工具

DOM中节点种类：三种–>在JS中所有节点都是对象。
元素节点->


属性节点->title=“属性节点”
文本节点->内容

1.通过id获取节点

<script>
	var oDiv=document.getElementByld("div1")
	alert(oDiv);
</script>
<body>
	<div id="div1"></div>
</body>

通过该节点对象获取该标签属性

alert(oDiv.tagName);
alert(oDiv.innerHTM);
oDiv.innerHTML="<h1>我</h1>";-->会解析标签

.HTML属性：

id  
title
style
class
Name

访问这些属性：
元素节点.属性名
元素节点[属性名]

alert(oDiv.id);
alert(oDiv.title);
alert(oDiv.className);
alert(oDiv.style);//样式对象
alert(oDiv.style.width);
oDiv.style.width="400px";
//style样式中background-color使用-链接的属性访问的时候
//需要将-去掉，然后将后续单词的首字母大写alert(oDiv.style.backgroundColor);
oDiv.style.backgroundColor="blue";

以上代码获取到的是null
原因：
因为代码从上往下执行，还没有加载出BOM元素(html代码)->就执
行script代码(DOM)
解决1.script放置body后面(但语法规范script要放在head标签中)
解决2.

window.onload = function(){//在页面加载完成以后执行的函
数}

如：

<script type="text/javascript">
		
		
		window.onload = function(){
			var res = document.getElementById('1');
			alert(res);
			alert(res.tagName);
			alert(res.innerHTML);
		}
		
	</script>

JS编写注意

  1. type="text/javascript说明当前script标签中文本的类型
  2. 所有JS代码写在script标签
  3. script放在head标签中
  4. 可以引入多个script标签，多个script标签顺序执行
  5. js代码可以外部引入src引入外部文件
  6. 如果当前script标签作用是引入外部文件，那么这个script标签中就不能再写入代码了。

获取元素节点

通过顶层document节点获取

<-- id 属性：-->
document.getElementByld()
<-- tagName标签名：-->
document.getElementsByTagName()
<-- name属性：-->
document.getElementsByName()
<-- class属性：-->
documentsByClassName()

其中id属性是获取单个属性节点，而tagName标签，name属性，class属性，都可获取多个节点
例如：

<script type="text/javascript">
		
		
		window.onload = function(){
			var res = document.getElementsByTagName('li');
			alert(res.length); //长度
		
		}
		
	</script>
</head>
<body>
	
		<ul id='ul1'>
			<li>111</li>
			<li>222</li>
			<li>333</li>
			<li>444</li>
		</ul>
		<ol>
			<li>555</li>
			<li>666</li>
			<li>777</li>
			<li>888</li>
		</ol>	

</body>

结果：
在这里插入图片描述
拓展：

<script type="text/javascript">
		
		
		window.onload = function(){
			
			var res1 = document.getElementById('ul1');  //选定ul下的
			var res2 = res1.getElementsByTagName('li');  //选定ul下的所有li
			for(var i=0;i<res2.length;i++){
				alert(res2[i].innerHTML);                //用for循环打印所有输出
			}
		}
		
	</script>
</head>
<body>
	
		<ul id='ul1'>
			<li>111</li>
			<li>222</li>
			<li>333</li>
			<li>444</li>
		</ul>
		<ol>
			<li>555</li>
			<li>666</li>
			<li>777</li>
			<li>888</li>
		</ol>	
</body>

结果演示：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

码农一号已就位
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js04
qq_44913516的博客
06-22 395
1.逻辑操作符 // 逻辑非: !,结果一定是boolean 类型 // 逻辑与: &&,结果不一定是什么类型,短路操作(只要出现false 就停止运算),只要第一个值能决定表达式的值就停止运算; 如果第一个操作数不能决定表达式的值,则直接返回第二个操作数. // var found = true; // var result = (found &&am...
js位移运算符~和＞＞＞
junjiahuang的博客
11-02 1607
!~位移然后取反 if (!~'a'.indexOf('abc')) // 现在基本使用es6的include if ('abc'.includes('a'))
JS中＞＞和＜＜运算
smallteddy.blog.csdn.net
08-18 4751
>> 运算 代表右移 15的二进制：0000 1111 15>>1就表示：0000 0111 // 等于7 15>>2就表示：0000 0011 // 等于3 <<运算 代表左移 1的二进制：0000 0001 1<<3就表示：0000 0100 // 等于1*2³=8 2的二进制：0000 0010 2<<3就表示：0001 0000 // 等于2*2³=16 ...
力扣笔记：JS中位运算符＞＞和＞＞＞的区别
q448402571的博客
10-02 1517
今天做每日一题的时候遇到了一个问题，用补码表示负数的时候将其右移会出现跟预期不同的效果。如图： 按照正常逻辑将-1（也就是11111111111111111111111111111111）右移四位应该是00001111111111111111111111111111，但是实际上却变成了-1，这是因为>>操作符是代表对于有符号整数的位移操作，对于用补码表示的无符号整数，应该使用>>>来实现右移的效果。 原因： >>操作时，用符号位来填充因为右移空出来的空位.
Python 与位运算
qyf__123的博客
12-24 1209
文章目录位运算左移运算符（&lt;&lt;）规则语法格式:数学意义：右移运算符（&gt;&gt;）规则：语法格式：计算过程：数学意义：无符号右移运算符规则：python 代码与或非运算进制转换 位运算 &amp; ： 按位与运算，判断最后一位是否是 1，奇数为1，偶数为0，用来判断奇偶性 ^：异或运算，相同为 0，不同为 1 %：取模， &gt;&gt; ： 右移 N 位，相当于除以 2 的 ...
js不常见的运算符用法 （＞、==、&&、||）
涂涂
02-27 1853
一.大于（&gt;） 如果只有一个操作数是数值字符串，另一个数数值则转换成数值后再进行比较 eg:var box = '3' &gt; 22; //false 如果两个操作数都是数值字符串，则只会比较字符串的第一个数 eg: var box = '3' &gt; '22'; //true 如果两个操作数都是字符串，则比较字符的编码 eg: var box = 'a' &gt; ...
前端-javascript-基础知识-总结笔记
02-25
个人学习javascript的笔记总结
零基础学前端 - 模仿百度网站首页
09-20
本教程“零基础学前端 - 模仿百度网首页”旨在帮助初学者理解并实践这些基础知识。 【HTML基础】 HTML（HyperText Markup Language）是网页内容的结构语言。在“百度网站首页.html”中，你可以看到HTML元素是如何...
javascript：刘宾的博客->前端相关
02-04
javascriptjavascript基础系列学习手写原始码系列 每次地图过滤减少指数每个，一些ES6基础系列学习Set，Map，WeakSet和WeakMap的区别Iterator迭代器与浏览器相关工具类网络包Nginx的算法学习系列排序算法javascript，...
JavaScript前端开发案例教程-源代码.rar
07-02
JavaScript，作为全球最广泛使用的编程语言之一，是前端开发的核心技术。这个名为"JavaScript前端开发案例教程-源代码.rar"的压缩包文件提供了一系列实践案例，帮助开发者深入理解和掌握JavaScript在网页开发中的...
前端-JavaScrip-Promise-手写Promise
最新发布
07-25
手写Promise源码 遵循Pormise/A+规范 适合学习Promise源码的同学
js list 合并_这些js中强大的操作符，你都知道吗
weixin_40007541的博客
01-21 702
JS 里的操作符大家每天都在使用，还有一些 ES2020、ES2021 新加的实用操作符，这些共同构成了 JS 灵活的语法生态。本文除介绍常用的操作符之外，还会介绍 JS 里一些不常用但是很强大的操作符，下面我们一起来看看吧～1. 数值分割符 _ES2021 引入了数值分割符 _，在数值组之间提供分隔，使一个长数值读起来更容易。Chrome 已经提供了对数值分割符的支持，可以在浏览器里试起来。le...
＞＞ 操作符的作用和用法
有趣的小良的博客
10-07 2202
前几天面试美团的时候被一道链表的算法题卡住了，面试完之后我去查了这道算法，然后发现在解题过程中使用了>>这个操作符： let mid = (left + right) >> 1，因为在之前工作学习中没使用过，所以写这个博客记录下>>操作符的作用和用法~在 JavaScript 中，>>是一个位移操作符，用于将一个二进制数向右移动指定的位数。这个操作符执行有符号右移操作。>>操作符在 JavaScript 中用于将数字的二进制表示向右移动指定的位数，并保留符号位。
JavaScript学习笔记（四）
CSPsy的博客
09-19 768
操作符1. 一元操作符1.1) 递增 / 递减操作符递增和递减遵循的规则1.2）一元加和减2. 位操作符2.1）按位非2.2) 按位与2.3) 按位或2.4) 按位异或2.5) 左移2.6) 有符号右移2.7) 无符号右移3.  布尔操作符3.1) 逻辑非3.2) 逻辑与3.3) 逻辑或4. 乘性操作符4.1) 乘法操作符4.2) 除法操作符4.3）取模操作符 1. 一元操作符 1.1) 递增 / 递减操作符 前缀递增和递减 let a = 1, b = 2; let c = ++a; // c = 2
js中表达式 >>> 0 浅析
aau88497的博客
03-08 339
zepto源码的Array.prototype.reduce有一行 len = t.length >>> 0 当时就很疑惑，知道>>是移位，那>>>又是什么鬼，还有移位0位又有什么意义呢，带着强烈的好奇心，我就去探究了一下>>> 0它到底暗藏什么玄机。 >>和>>>有什么不一...
javascript的>>>
u012841667的专栏
10-29 1148
N>>>M表示N的二进制数，右移M位，左边补0 如10>>>2 1010>>>2 0010应用场景： 实现设置默认值，数字取整var len = O.length >>> 0; //表示非数字取0 //所有大于等于0等数取整数部分
Js快速入门
opera95的博客
08-03 3865
JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。 一、如何编写 1、JavaScript代码存在形式 1 2 3 4 5 6 7 -- 方式一 --> type"tex
js中表达式 >>> 0 浅析 (以及用php简单翻译)
weixin_33937778的博客
11-19 234
今天在看lodash的源码中slice这个函数实现的时候发现了里面有这么一行代码 length = start &gt; end ? 0 : ((end - start) &gt;&gt;&gt; 0) start &gt;&gt;&gt;= 0 当时就很疑惑，知道 &gt;&gt;是移位，那&gt;&gt;&gt;又是什么鬼，还有移位0位又有什么意义呢，带着强烈的好奇心，我就去探究...
JS中=>，>>>是什么意思
weixin_30342209的博客
02-21 922
最近经常看到 JS中=>，符号，于是查了一下别人的博客 =>是es6语法中的arrow function 举例：(x) => x + 6 相当于 function(x){ return x + 6; } 转载于:https://www.cnblogs.com/handsomeBoys/p/6423239.html...
达内科技HTML-CSS-JAVASCRIPT前端技术讲义
"达内Html，css,javascript讲义——由知名IT培训机构达内科技的唐亮老师根据授课经验编写的前端技术教程，适用于初学者学习Web前端基础知识，包括HTML、CSS和JavaScript。" 本讲义详细介绍了Web前端开发的基础内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值