javaScript基础

最新推荐文章于 2022-11-23 17:32:46 发布

王泽洋✿

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量305

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45624490/article/details/123056704

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

javaScript概述

● JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能
（javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运
行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
作用：
1.响应客户端鼠标和键盘事件
2.客户端页面表单数据验证
3.使用JavaScript动态的改变页面标签的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script src="js/out.js" type="text/javascript" charset="utf-8">
			// 此处不能写脚本
		</script>
		<script type="text/javascript">
			//这里可以写js脚本 这是单行注释
			/* 这是多行注释 */
			alert("你好JavaScript");//调用js中的全局变量,提示对话框		
		</script>
		<!-- <script src="js/out.js" type="text/javascript" charset="utf-8"></script>  脚本按照顺序执行-->
	</head>
	<body>
		
	</body>
</html>

基本语法

声明变量用var关键字
var name;
声明变量的同时对其赋值
var test=“这是一个变量”

数据类型

1、数值型(number)：
其中包括整型数和浮点型数。
2、布尔型(boolean)：
即逻辑值，true或flase。
3、字符串型：
由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。
（使用单引号来输入包含引号的字符串。）
4: undefined类型
5: Object类型

条件运算符

var result = (条件表达式)?结果1:结果2
当条件成立返回?后的内容，否则返回:后的内容

定义函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
			 虽然ja是面向对象的语言 单数函数可以独立的定义
			 函数：为完成某个特定的功能，定义函数，可以重复多次利用
			 java中的方法必须写在类中，对象调用
			 
			 如何定义函数
			 
			 调用函数
			 */
			function demo1(){
				alert("hello function");
			
			}
			
			function demo(a,b,c){
				alert(a+":"+b+":"+c);
			}	
			demo(10,"abc",true);
			
			function demo(a,b){
				return a+b;
			}
			var res=demo(10,5);
			console.log(res)
			
		</script>
	</head>
	<body>
		<input type="button" value="测试按钮" onclick="demo1()" />
	</body>
</html>

全局变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
			 js函数库总提供全局函数  函数库在浏览器中  可以直接用
			 parseInt("字符串")  把字符串转化为整数
			 */
			var a="10";
			// var a="10.5";  转化为10
			// var a="a10";  字母开头不可以转化  返回NAN
			// var a="1a0";   把字母之前的转化为整数
			console.log(parseInt(a)+5);
			
			var b=10.5;
			// var b="10.5";   
			//var b="a10.5";   字母开头不可以转化  返回NAN
			console.log(parseFloat(b)+5);
			/* 返回变量的数据类型 */
			console.log(typeof(10));
			console.log(typeof(true));
			console.log(typeof("aaa"));
			
			/* eval()  运算某一个字符串   可以把字符串当作脚本执行 */
			var a=10;
			console.log(eval("5+5"));
			console.log(eval("a+5"));		
		</script>	
	</head>
	<body>
	</body>
</html>

Html DOM

DOM是Document Object Model文档对象（网页中的标签）模型的缩写. 通过html dom，可用javaScript操作html文档的所有标签.

找到Html标签

通过 id 找到 HTML 标签
document.getElementById(“id");
通过标签名找到 HTML 标签
document.getElementsByTagName(“p”);
通过类名找到 HTML 标签
document.getElementsByClassName(“p”);
通过name找到 HTML 标签
document.getElementsByName(“name");

改变Html标签内容
改变 HTML 标签的属性
document.getElementById(“username").value=“new value";
document.getElementById(“image”).src=“new.jpg";
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
document.getElementById(“div”).innerHTML=new HTM
html dom允许 javaScript改变html标签的样式。
语法：
document.getElementById(“id”).style.property=new style;
例：
document.getElementById(“p2”).style.backgroundImage=“url(bg.jpg)”;

浏览器对象

window

它表示浏览器窗口。
● 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 html dom 的 document 也是 window 对象的属性之一。
window.document.getElementById(“header”);
Window对象常用的属性：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.parent获得父级窗口对象(父子级之间调用)
Window对象常用的方法
window.open(‘url’, ‘name’,’features’) - 打开新窗口
features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。
width=100,height=100,top=100,left=100

Location对象

● location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
● window.location 对象在编写时可不使用 window 这个前缀。
方法：
assign(url)加载一个新的文档
reload()重新加载当前文档
replace(url) 可用一个新文档取代当前文档。

计时

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
方法:
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval(

王泽洋✿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript基础

javaScript概述● JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能（javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。作用：1.响应客户端鼠标和键盘事件2.客户端页面表单数据验证3.使用JavaScript动态的改变页面标签的样式<!DOCTYPE html><html> <head> <meta charse
复制链接

扫一扫