JavaScript基础

于 2019-07-19 14:57:21 发布
阅读量149 收藏
点赞数
分类专栏： 学习笔记 文章标签： JavaScipt基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40913582/article/details/96480833
版权

JavaScript

js的简介

javascript是基于对象和事件驱动的脚本语言，主要应用在客户端(浏览器)

js有什么用？

用来实现逻辑，动态网页

js的特点：

  • 交互性（信息的动态交互）

  • 安全性（不可以直接访问本硬盘）

  • 跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）

js和java不同（一点关系都没有）

Netscape(网景公司),之间是静态的效果。livescript(javascript的前身)

java诞生了，升级了，改名（javascript），火了。

巨头微软：自己开发了一套(jscript)

找一些公司推出的标准： SUN 微软 ECMA（欧洲计算机制造协会），联合推出现在的标准。

ECMAScript标准。基础上扩展。

js是基于对象，java是面向对象。

js解析就能执行，java要先编译再执行

js是弱类型的语言，java是强类型的语言

int a = 5;
a = "str"

js的组成

  • ECMAScript 标准（js的语法，变量，函数）
  • BOM （Browser Object Model）浏览器对象模型
  • DOM （Documen Object Model）文档对象模型

js的语法

把js和html结合(2种)

HTML的文件提供了一个标签script,标签能放在任意位置

<script type="text/javascript">
	// js的代码
	alert("hehe");		//弹出一个提示框	
</script>

引入外部文件，有一个外部文件。编写js文件

<script src="引入的文件（路径）"></script>

 如果script通过src的属性引入了外部文件，里面的js代码就不会执行了(重点,引入外部文件，就不再标签里面写代码了)

<script type="text/javascript" src="demo.js">
	// js的代码
	alert("hehe");		//弹出一个提示框
	//只会弹出文件的内容，alert("hehe")不应该写	
</script>

一个获取span的内容并弹出的内容

<span id="spanId">你好我是span</span>
<script type="text/javascript">
		//弹出span种的内容
	alert(document.getElementByI("spanId").innerHTML);	
</script>

script这里要放到span的后面。因为从上到下执行，可以用浏览器的f12调试

关键字

var 声明变量

标识符

和java一样

注释

和java一样

变量

声明变量，只使用一个关键字 var

var num = 1234;
var str = "aaa";
num = "aaa";

5种基本数据类型

  1. Undefined 未定义(声明变量，没有赋值)

  2. Null 空，给引用赋值的

  3. Boolean 布尔类型

  4. Number 不区分整数和小数

  5. String js中双引号和单引号代表的都是字符串

     var str = "aaa"		//字符串   var str ='abc';
 var num = 5;		//数字类型	var num = 5.5;
 var flag = true;	//布尔类型	var flag = false;
 
 var date = null;	//null,date就是引用类型
 var un;				//未定义

js中不同类型数据可以赋值

var num = 14;
alert(num)	
num = "aaa";
alert(num);

typeof() 判断当前变量是什么类型的数据

var num = 14;	
alert(typeof(num));
num = "aaa";
alert(typeof(num));

运算符

算术运算符

加减法

var num = 3710;
alert(num/1000*1000);   //3710
		 
var str = "12"
alert(str + 1 );	//121
alert(str -1 )		//11
alert("abc" -1 )   //NaN非法的数字

0或者null是false,非0或者非null是true,默认用1表示

alert(true + 1);		//2	现在true解释为1
alert(false + 1);		//1 现在false解释为0
if(5){
	alert("abc");		//能弹出来
}
赋值运算符

和java一样

比较运算符

== 比较值是否相同

=== 比较值和类型是否相同

var num = 15;
var str ="15";
if(num == str){
	alert("两等号");
}
		
if(num === str){
	alert("三等号");
}
逻辑运算符

和java中一样

三元运算符

条件?值1:值2

语句

判断语句
if(){
		 				
}else if(){
		 				
}else{
		 				
}

var num = 4;
if(5 == num){		//尽量把常量放在前面，可以检查错误
	alert("abc");
}
循环语句
for (var i =0 ; i<3; i++) {
	//alert(i);
	window.document.write("i = " + i + "<br />");
}
//while类似

九九乘法表，把表格输出到网页

document.write("<table border='1' width='100%' cellpadding='10'>");
		
//99乘法表
for(var i =1; i<=9 ;i++){
	document.write("<tr>");
	for(var j = 1 ; j<=i ;j ++){
		window.document.write("<td>" + j + " * " + i + " = " + (j*i) + "</td>");
				
	}
	//换行
	//window.document.write("<br />")
	document.write("</tr>");
}

js的数组(js唯一的容器)

java String [] str ={};
js var = [];

数组的声明

var arr=[11,22,33];
var arr = new Array(5);		//长度是5
var arr = new Array(2,3,4);	//元素是2 3 4

数组的属性

长度：length

数组的长度可变的

var arr = [12,22,33];
alert(arr.length)		//3
document.write(arr + "<br />");
		
arr[4] = 99;
arr[5] = "abc";
document.write(arr);

js的方法

java中 public String 方法名称（参数列表）{}
js中,通过关键字
	function 方法名称(参数列表num,str){	//参数列表不用写var
	方法体;
	return;
}

function add(){
	alert("你好");
}
		
add();
		
function add2(num1,num2){
	return num1 + num2;
}
		
window.document.write(add2(1,2));

js中没有重载

add2(1,2,3,4);	//3,参数不丢失也不报错，因为参数列表arguments是个数组，直接获取前两个
alert(arguments.length)	//2

方法也是对象

function getSum(){
	return 100;
}
		
var sum = getSum;	//拿到的是引用
alert(sum);		//弹出方法体

js的动态函数和匿名函数

动态函数

js提供了内置的对象 Function

var param1 = "x,y";
var param2 = "var sum;sum = x+y;return sum";
var param3 = "var mut;mut = x*y;return mut";
var add = new Function(param1,param2);
alert(add(4,5));
add = new Function(param1,param3);
alert(add(4,5));

匿名函数

var getSum = function(){
	return 100;
}

js的全局变量和局部变量

全局变量

//在<script>内部定义的变量，就是全局变量
<script type="text/javascript">
		for (var i = 0;i<3;i++) {
			document.write(i+"<br />");
		}
		
		document.write("i=" + i);
		
	</script>
	
	<script type="text/javascript">
		document.write("i==" + i);
	</script>
</body>
</html>

<script type="text/javascript">
	document.write("i===" + i);
</script>//i全都能打印出来

局部变量:在函数的内部定义的变量

function add(){
	var y = 50;//局部变量
}
document.write(y); //不能打印出来

js的对象和API

String对象

声明

String

var str = "abc";
var str = new String("abc");

属性：length:字符串的长度

方法：

和HTML相关的方法（没有提示）

bold()		//使用粗体显示
fontcolor(color)		//设置字体颜色
fontsize(size)	//设置字体的大小(1-7)
italics()	//斜体
link(url)	//设置连接
sub()		//下标
sup()		//上标

println(str.fontcolor("red"));
println(str.link("www.baidu.com"));	
println("3"+"2".sup());

和java中类型的方法

charAt(index)	//返回指定位置的字符
concat()	//连接字符串
indexOf(searchvalue[,fromindex])	//检索字符串，没有返回-1
lastIndexOf(searchvalue[,fromindex])	//从后到前检索
replace(要替换的字符串,替换成啥)	//替换
substring(start,stop)		//截取字符串，从哪里开始结束
substr(start,len)		//截取字符串，从哪开始，多长

编写myTrim(str)方法

function myTrim(str){
	//0位置的下表
	var start = 0 ;
	//最后位置的下表
	var end = str.length -1 ;
	// start 和 end 一直变化，查找下表值字符是否是空格
	while(start<=end && charAt(start) == " "){
		start ++ ;
	}
			
	while(start<=end && charAt(end) == " "){
		end-- ;
	}
			
	var res =str.substring(start,end +1);
	return res;
}

Array对象

声明

var arr =[12,22];
var arr = new Array(12,22);

属性:length
方法：

concat(数组/元素)
join(s)		//通过s标识，进行分割，返回字符串
pop()		//弹栈(末尾)
push()		//压栈(末尾)
shift()		//弹栈(头部)
unshift()	//压栈(头部)
sort()		//排序


var arr = ["NBA","CBA","HBA"];
document.write(arr.concat("WWE")+"<br />"); //NBA,CBA,HBA,WWE
var arr2 = ["NEW","NEW2"];
document.write(arr.concat(arr2)+"<br />");//NBA,CBA,HBA,NEW,NEW2
		
document.write(arr.join("-"));	//用"-"分割  NBA-CBA-HBA

Date日期对象

方法

toLocaleString();		//转换为本地的日期格式
toLocaleDateString();	//本地日期月日
toLocaleTimeString();	//本地日期时分秒
	 	
getDate()		//返回一个月中的某一天(0-31)
getDay()		//返回一周中的某一天(0-6)
getMonth()		//返回月(0-11)   +1
getFullYear()	//返回月份

getTime()	//返回毫秒数
setTime()	//通过毫秒数获得日期

parse(str)  //解析字符串，返回毫秒数
	 		str:
	 			2014-11-14  不能解析
	 			
	 			11/14/2014	可以解析
	 			2014,11,14

//自己拼接一个日期
	var date = new Date();
	var year = date.getFullYear();
	var month = date.getMonth()+1;
	var day = date.getDate();
	var week = date.getDay();
	
	document.write(year+ "年"+ month+"月" +day +"日" +"星期" +week);

Math对象

方法

ceil(x)			//上舍入
floor(x)		//下摄入
round(x)		//四舍五入
fandom()		//0-1随机数

RegExp正则表达式对象

应用:编写注册的表单,对表单输入的内容进行校验

var reg = new RegExp("表达式");	//不常用
var reg = /表达式/	//常用
var reg = /^表达式$/		//常用

方法:

exec(str)	//不常用	
	//如果匹配，返回匹配的结果
test(str)	//常用
	//如果匹配，返回的是true,如果不匹配，返回false

if(reg.test("abc"){
//匹配上了
}else{
//没匹配上
}

全局函数

不需要任何对象

全局函数可以拿过来使用

global帮着管理全局函数

eval()		//解析字符串。执行字符串中间的js代码
isNaN()	//检查是否是非法数字
parseInt()	//解析字符
		 
encodeURI()	//进行编码，中文直接传出可能乱码（参数）
decodeURI()	//解码
		 
encodeURIComponent		//编解码范围不一样(整体连接)
decodeURICompinent
		 
escape()		编解码范围不一样
unescape()



var str2 = encodeURI("abc张三");
document.write(str2 + "<br />");	//abc%E5%BC%A0%E4%B8%89
		
var str3 = decodeURI(str2);
document.write(str3);	//abc张三

BOM浏览器对象模型

一打开浏览器就有一些对象存在

  • DOM Window //窗口对象，一个窗口就是一个Window对象
  • DOM Navigator //和浏览器版本相关
  • DOM Screen //和屏幕相关的对象
  • DOM History //和浏览器历史相关，比如实现上一页下一页
  • DOM Location //和浏览器地址相关的对象
  • Document //文档对象

Navigator userAgent //获取浏览器相关的信息

<input type="button" value="我是按钮" onclick="run()"/>

<script type="text/javascript">
	
	function run(){
		//alert("hehe");
		alert(window.navigator.userAgent);
	}
</script>

History

back()	//返回上一个页面
forward()	//去下一个页面

go()
	go(1)	//等于forward()
	go(-1)	//等于back()


<input type="button" value="上一页" onclick="run2()"/>
<input type="button" value="下一页" onclick="run3()"/>
//返回上一页

<script type="text/javascript">
		//返回上一页
	function run2(){
		window.history.back();
	}
		//去下一页
	function run3(){
		window.history.go(1);
	}
</script>

Location

href	获取URL的完整路径
protocol	获取协议


<input type="button" value="链接" onclick="run4()"/>
<script type="text/javascript">
function run4(){
		//location.href = "http://www.baidu.com";
		alert(location.protocol);
	}
</script>

Window

alert()	//弹出提示框
confirm()	//询问框

提供两按钮，确定和取消
如果点确定，返回true，如果点击取消，返回false


moveBy()	移动浏览器
	 
setInterval("函数",毫秒值)	定时相关的
	 	每个毫秒值执行一次函数
setTimeout("函数"，毫秒值)
	 	到了毫秒值后执行一次函数

clearInterval()	清楚定时
clearTimeout()

clearInterval()	清楚定时
clearTimeout()
	 
open(URL,name,features,replace)	打开浏览器窗口
close()	关闭浏览器窗口
//window.open("www.baidu.com","","'width = 200,heigth = 100'")

属性：
	opener 返回对创建此窗口的窗口引用
	win open() 弹出baidu的窗口

		在baidu窗口中 baidu.opener得到lwin的引用



<input type="button" value="删除" onclick="del()" />
<input type="button" value="移动" onclick="run1()" />
<input type="button" value="定时循环" onclick="run2()" />
<input type="button" value="定时" onclick="run3()" />


function del(){
	if(window.confirm("确定删除吗？")){
		//点击确定，执行
		//删除数据ajax
		alert("删除成功");
	}else{
		//点击取消执行
		alert("怎么这么不小心呢")
	}
}
	
function run1(){
	window.moveBy(20,20);	//chrome和ie为了安全不起作用
}
	
function run2(){
	window.setInterval("run4()",3000);		
}
	
function run3(){
	window.setTimeout("run4()",3000);
}
	
function run4(){
	alert("heeh");
}

一个window案例

windos.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	用户编号：<input type="text" id="numId" name="usernum" /><br />
	用户姓名：<input type="text" id="nameId" name="usernum" /><br />
	<input type="button" value="选择" onclick="show()" />
</body>
<script type="text/javascript">
	/*
	 	弹出新的窗口
	 * */
	function show(){
		window.open("user.html","","width = 400 , height =200"); 
	}
</script>
</html>

user.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<table border="1" width="90%">
		<tr>
			<th>操作</th>
			<th>编号</th>
			<th>姓名</th>
		</tr>
		<tr align="center">
			<td>
				<input type="button" value="选择" onclick="run('001','张三')"/>
			</td>
			<td>001</td>
			<td>张三</td>
		</tr >
		<tr align="center">
			<td>
				<input type="button" value="选择" onclick="run('002','李四')" />
			</td>
			<td>002</td>
			<td>李四</td>
		</tr>
		<tr align="center">
			<td>
				<input type="button" value="选择" onclick="run('003','王五')"/>
			</td>
			<td>003</td>
			<td>王五</td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	
	/*
	 点击按钮，拿到编号和姓名
	 把值赋值在windows的窗口文本框
	 关闭窗口
	 * */
	function run(num,name){
		var windows = window.opener;	//那到user.html的引用
		windows.document.getElementById("numId").value = num;
		windows.document.getElementById("nameId").value = name;
		window.close();
	}
	
</script>
</html>
小竹节
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
window.setInterval做定时器和使用window.clearInterval()停止定时器
jaryle的专栏
01-13 8024
window.setInterval() 功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。 语法：setInterval(code,millisec)   解释：code：在定时时间到时要执行的JavaScript代码串。 millisec：设定的定时时间，用毫秒数表示。 返回值：定时器的ID值，可用于clearInterval()方法停止指定的定时器。
document.write里面调用js函数
loverong的专栏
05-27 3454
document.write("onMouseover={alert(this.innerText);classTemp=this.className;this.className=calendarHover} onMouseOut={alert(hello world);this.className=classTemp;}>");  document.write("");调用方法:   {函
JavaScript学习总结（二）
qq30211478的博客
05-09 802
JavaScript是面向对象的语言，但 JavaScript 不使用类。JavaScript 基于 prototype，而不是基于类的。 可以参考详解Javascript中prototype属性即上一篇博文。 一、JS使用 HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 1、<script>标签可以放在<body&gt...
js停止setInterval函数的运行
localhost
11-17 1580
在某些情况下，我们需要用到setInterval函数，让某方法在每隔固定时间段后自动执行。 可满足某些条件后我们需要将其终止，不再运行，做法如下： [code="js"] Auto=window.setInterval("InsertAutoPage();",1000); [/code] 这里要注意"Auto"是给该setInterval函数的命名，之后要通过这个来终止。 [code=...
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript 基础
02-16
主要为个人学习笔记 超详细
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
Matlab实现斑点鬣狗优化算法SHO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
[毕设]HTTP服务器开发与设计.zip
07-27
[毕设]HTTP服务器开发与设计
Delphi简介+demo程序
07-27
Delphi 是一种由 Embarcadero Technologies（原 Borland 公司）开发的编程语言和环境，它基于 Object Pascal 语言，并提供了丰富的类库和可视化的集成开发环境（IDE）。Delphi 特别适合于开发 Windows 桌面应用程序，同时也支持其他操作系统如 macOS、iOS 和 Android（通过 FireMonkey 框架）。 下面是一个简单的 Delphi Demo 程序，该程序将创建一个窗口，并在窗口中添加一个按钮。点击按钮时，会在窗口底部显示一条消息。
qmake2cmake-1.0.6-py3-none-any.whl
最新发布
07-27
qmake2cmake-1.0.6-py3-none-any
全国大学生电子设计大赛项目合集自动化控制资料基于模糊控制的智能车系统设计
07-27
全国大学生电子设计大赛项目合集自动化控制资料基于模糊控制的智能车系统设计
Matlab实现人工蜂群优化算法ABC-CNN-BiLSTM-Mutilhead-Attention多变量时序预测.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
JavaScript基础入门教程
本JavaScript基础教程旨在为初学者提供入门指导，内容覆盖了JavaScript的基础语法和概念，但不深入探讨与动态网页交互、不同浏览器间的差异等高级主题。教程结构清晰，兼顾教程与参考手册的特点，分为五个章节：前两...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值