Javascript基础（浅谈js基础与类型）

最新推荐文章于 2023-05-13 21:53:24 发布

Mo沫

最新推荐文章于 2023-05-13 21:53:24 发布

阅读量457

点赞数 2

分类专栏：原生js 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_50085089/article/details/109746751

版权

原生js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML ------------------------定义了网页的内容
CSS--------------------------描述了网页的布局
JavaScript------------------网页的行为

什么是JavaScript（简称JS）

JavaScript是一门脚本语言
JavaScript是一门解释性语言
JavaScript是一门动态类型的语言
JavaScript是一门基于对象的语言
JavaScript是一门弱类型语言

JavaScript的组成

各组成部分的兼容性，兼容性问题的由来
1.ECMAScript标准（ECMA，欧洲计算机制造联合会）
2.BOM（ Browser Object Model ）------浏览器对象模型提供与浏览器交互的方法和接口；BOM B—browser（浏览器） O—object（对象） M—model（模型）
3.DOM（Document Object Model）------文档对象模型提供访问和操作网页内容的方法和接口

DOM D—document（文档） O—object（对象） M—model（模型）

JS能做什么：

1.JavaScript 能可以将动态的文本放入html页面；
2.JavaScript 能可以读写html元素；
3.JavaScript 可被用来验证数据；
4.JavaScript 可以对事件做出响应；

JS的使用方式

1.行内式---------------------顾名思义，就是写在标签上
2.写在script标签中---------------------script标签要在body标签下面
3.导入式--------------------------外部创建js文件，在页面中导入

JS的输出方式

1.alert();-----------------------------在页面中弹出提示框
2.console.log();-------------------在控制台中显示信息
3.document.write();--------------在页面中显示出信息
4.prompt();-------------------------接收用户输入的信息

变量类型(1)

类型：typeof运算符
一个变量应该只存放一种类型数据

JS的数据类型

简单数据类型
1.Number----------------数字类型
2.String------------------字符串类型
3.Boolean--------------布尔类型（true/false）
4.Undefined-----------未定义类型
表示声明了没有赋值的变量
5.Null-------------------空类型
表示一个空

复杂数据类型
Object-------------------对象类型
Function-----------------函数类型
Array---------------------数组类型

变量类型（2）

案例：计算两个文本框的和

 </head>
 <body>
	<input type="text"/><br />
	<input type="text"/><br />
	<input type="button" value="求和" onclick="f1()"/>

 <script> 
		function f1(){
			var num1 = document.getElementsByTagName('input')[0].value;
			var num2 = document.getElementsByTagName('input')[1].value;
			var sum = parseInt(num1)+parseInt(num2);
			alert('和为:'+ sum);
		}
		//-->
  </script>
 </body>

一、显示类型的转换（强制类型转换）
（1）ParseInt() 、ParseFolat()、
（2）NaN的意义和检测
二、隐式类型转换
（1）== 、===
（2）减法

变量作用域和闭包

一、变量作用域（作用范围）
（1）局部变量、全局变量
二、什么是闭包
（1）子函数可以使用父函数中的局部变量
（2）之前一直在使用闭包
（3）对于闭包的定义

命名规范（1）

一、命名规范及必要性
（1）可读性–能看懂
（2）规范性–复合规划
二、匈利亚命名法
（1）类型前缀
（2）首字母大写

运算符

一、算数运算符
（1）+加、-减、乘、/除、%取余
二、赋值运算符
（1）=、+=、-=、=、/=、%=
三、关系
四、逻辑
五、逻辑：&&与、|| 或、！否
六、运算符优先级：括号

JS获取元素

1.通过ID获取（getElementById）

  document.getElementById(‘id’)

2.通过name属性（getElementsByName）

   document.getElementsByName(‘name’)

3.通过标签名（getElementsByTagName）

document.getElementsByTagName(‘p’);

4.通过类名（getElementsByClassName）

document.getElementsByClassName(‘active’);

5.获取html的方法（document.documentElement）

document.documentElement是专门获取html这个标签的。

6.获取body的方法（document.body）

document.body是专门获取body这个标签的。

7.通过选择器获取一个元素（querySelector）

  document .querySelector(’.animated’)

8.通过选择器获取一组元素（querySelectorAll）**

创建

创建一个节点: document.createElement(‘标签名’)

var oDiv = document.createElement(‘div’);//创建一个div标签

追加

追加一个节点：父节点.append(‘子节点’)

插入

insertBefore(节点,原有节点) 在已有元素前插入

删除DOM元素

removeChild(节点) 删除一个节点

JS变量

什么是变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

如何使用变量
var 声明变量

var i;

变量的赋值

*var* i=10;

变量的命名

1.由字母，数字，下划线，$符号组成，不能以数字开头
2.不能是关键字和保留字
3.区分大小写
4.遵守驼峰命名法

后文：后面会在更新js相关的小知识点哦😀

Mo沫

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Javascript基础（浅谈js基础与类型）

为什么学习 JavaScript?JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：HTML ------------------------定义了网页的内容CSS--------------------------描述了网页的布局JavaScript------------------网页的行为什么是JavaScript（简称JS）JavaScript是一门脚本语言JavaScript是一门解释性语言JavaScript是一门动态类型的语言JavaScript是一
复制链接

扫一扫