JavaScript自学

其他 2019-03-17 16:33:36 阅读次数: 0

感觉看过PHP会学起来更简单，在我看来有点类似。

一、了解JavaScript语言

1.在网页中使用JavaScript脚本语言。

<script>
……
</script>

上述代码在HTML5中可以直接使用，在HTML4中需要使用以下代码：

<script type="text/javascript">
……
</script>

2.导入外部JavaScript文件
具体使用方法如下

<script type="text/javascript" src="xxx.js"></script>

scr定义外部js文件的路径地址，路径可以为绝对路径。
3.JavaScript的调试，用浏览器打开你创建的网页，按F12进入开发者模式调试。
4.断点调试，在你想要设置的地方设置断点，按F11单步执行脚本，也可以按F5刷新页面将脚本执行完毕。
5.JavaScript常用输出流。先记住，要不然无法调试啊。
（1）使用 window.alert() 弹出警告框。

<script>
window.alert(5+6);
</script>

在这里插入图片描述

<script>
window.alert("这是一个警告框");		//也可以直接写成alert("这是一个警告框");
</script>

在这里插入图片描述
（2）使用 document.write() 方法将内容写到 HTML 文档中。

<script>
document.write("这句话在网页中显示");			//加不加;我发现都可以显示
</script>

在这里插入图片描述
（3）使用 innerHTML 写入到 HTML 元素。
我还没看到。
（4）使用 console.log() 写入到浏览器的控制台。
下面例子大多都是控制台，就不举例了。

二、JavaScript变量

1.JavaScript语法补充，同C语言
（1）大小写敏感。
（2）代码注释。
（3）空格缩进。
（4）反斜杠（\）对代码进行换行。
2.JavaScript变量需要以字母或者$或者_开头。
3.JavaScript分为全局变量和局部变量，且二者的定义方式、作用于和使用方法有明显区别。

<script type="text/javascript">
var a=1;
var b=2;
var c=a+b;
console.log(c);
</script>

第2、3行代码通过关键字var定义了两个变量，并进行了初始化复制操作。第4行定义了一个变量表达式。第五行代码通过console.log()函数向控制台输出调试信息。
4.变量在函数外定义，即为全局变量。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
5.变量定义演示：
（1）字符串变量

<script type="text/javascript">		
//单引号双引号都可以输出字符串
var v_str_a="Hello World!";
var v_str_b="Hello 'World!'";
var v_str_c='Hello "World!"';
console.log(v_str_a);
console.log(v_str_b);
console.log(v_str_c);
</script>

在这里插入图片描述
（2）数值变量

扫描二维码关注公众号，回复： 5562454 查看本文章 
<script type="text/javascript">
//数值变量
var v_i=123456;
var v_d=3.1415926;
var v_e_a=123e3;
var v_e_b=123e-3;
console.log(v_i);
console.log(v_d);
console.log(v_e_a);
console.log(v_e_b);
</script>

在这里插入图片描述
（3）布尔型变量

<script type="text/javascript">
//数值变量
//布尔型变量
var v_bool_t=true;
var v_bool_f=false;
console.log(v_bool_t);
console.log(v_bool_f);
</script>

在这里插入图片描述
（4）数组

//数组
var v_arr_a=new Array();
v_arr_a[0]="php";
v_arr_a[1]="mysql";
v_arr_a[2]="html";
console.log(v_arr_a);
var v_arr_b=new Array("php","mysql","html");
console.log(v_arr_b);
//JavaScript对象，类似C语言中的结构体
//调侃一下，谁都有对象，就C语言"单身"
var userinfo={
	id:001,		//注意是","
	username:"javascript",
	sex:"不详"
	};			//结尾加";"
console.log(userinfo);	
	
var userinfor=new Object();
userinfo.id=002;
userinfo.username="bujidao";
userinfo.sex="haishibujidao";
console.log(userinfo);
var len=Object.keys(userinfo);
console.log(len.length);

在这里插入图片描述

（5）对象

<script type="text/javascript">
//JavaScript对象，类似C语言中的结构体
//调侃一下，谁都有对象，就C语言"单身"
var userinfor={
	id:001,		//注意是","
	username:"javascript",
	sex:"不详"
	};			//结尾加";"
console.log(userinfor);	
	
var userinfo=new Object();
userinfo.id=002;
userinfo.username="bujidao";
userinfo.sex="haishibujidao";
console.log(userinfo);
var len=Object.keys(userinfo);
console.log(len.length);
</script>

在这里插入图片描述
访问对象属性：

userinfo.id;

或者

userinfo["id"];

对象方法：

id=userinfo.id();

或者

id=userinfo.id;

访问对象方法

methodName : function() { code lines }

或者

objectName.methodName()

（6）null和undefined数据类型。

<script type="text/javascript">
//null和undefined数据类型
var v_null=null;
var v_undefined=undefined;
console.log(v_null);
console.log(v_undefined);


if(v_null){
	console.log("true");
	}else{console.log("false");}
if(v_undefined){
	console.log("true");
	}else{console.log("false");}
if(null==undefined){
	console.log("true");
	}else{console.log("false");}
if(null===undefined){
	console.log("true");
	}else{console.log("false");}
</script>

在这里插入图片描述

<script>
console.log(typeof null);			//object
console.log(typeof undefined);		//undefined
</script>

通过typeof操作可以查看数据类型返回值。
null返回的是object对象类型，而undefined返回的就是undefined数据类型。

<script>
console.log(Number(null));
console.log(Number(undefined));
console.log(String(null));
console.log(String(undefined));
</script>

在这里插入图片描述
进行强制转化，可以看出null转化为数值为0，undefined转化为数值显示NaN为非数值类型。
（7）JavaScript保留关键字
https://www.cnblogs.com/moyuling/p/5009426.html
（8）JavaScript运算符与表达式
和C语言比较多了恒等（===） 不恒等 （!==）

三、流程控制语句

（和C语言几乎一模一样）
1.if…else…
2.switch(n){
case 1: … break;
case 2: … break;
…}
3.for循环
举个例子

<script>
for(var i=1;i<=9;i++){
	var v_space=" ";
	for(var j=1;j<=i;j++){
		v_space+=j+"*"+i+"="+j*i+" ";
		}
		console.log(v_space);
	}
</script>

在这里插入图片描述
4.break和continue
5.while语句

四、JavaScript函数

4.1)
1.函数声明定义方式
该方式是传统声明定义的方式，具体语法如下：

function 函数名（参数1，参数2，...）{
//函数体内具体定义的语句
}

使用类似C语言。
2.函数表达式方式
基本语法：

var 函数名=function（参数1，参数2，...）{
//函数体内定义的语句
}

其中函数名是声明语句的必需部分，其用途就如同变量一样，后面定义的函数对象会复制给这个变量。另外，function后面的函数名是可选的，即加上该函数名也不是前面传统声明定义方式中函数名了，二者功能完全不一样。

<script type="text/javascript">
var v_sum=function add(n1,n2){
	return n1+n2;
	};
	console.log(add(1,2));	
</script>

执行以上代码会在控制台输出一下信息，提示了add函数未定义，也就是说第2行中的add不是一个有效函数。
在这里插入图片描述
那么add是什么概念呢

<script type="text/javascript">
var v_sum=function add(n1,n2){
	console.log(add);
	return n1+n2;
	};
	console.log(v_sum(1,2));	
</script>

在这里插入图片描述
可以看出add是function类型的对象。
3.function构造函数方式（不常用）
具体语法：

var 变量名=new Function（“参数1”，“参数2”，...，“参数n”，“函数体”）；

<script type="text/javascript">
var v_sum=new Function("n1","n2","return n1+n2");
console.log(v_sum(1,2));	
</script>

4.2)JavaScript系统函数
1.常规函数
alert：显示一个警告框，包括一个OK按钮。
confirm：显示一个确认对话框，包括OK和Cancel按钮。
prompt：显示一个输入对话框，提示等待用户输入。
eval：计算字符串的结果，执行JavaScript脚本代码（注意参数仅接受原始字符串）。
parseInt：将字符串转换成整形形式（可指定几进制）。
isNaN：判断是否为数字，null和true和空字符都视为0，返回数字；NaN,undefined视为非数字。
举例：
alert和confirm

var r_confirm=confirm("请确认您的选择");
if(r_confirm){
	alert("ok");
	}else{
	alert("cancle");
	}

eval：将会显示3

<script type="text/javascript">
eval("x=1;y=2;alert(eval(x+y))");
</script>

2.字符串函数
charAt:返回字符串中指定的某个字符。

stringObject.charAt(index)	
//index参数为必需参数，表示字符在字符串中的下标值

indexOf:返回字符串中第一个查找到的下标index

stringObject.indexOf(searchvalue,fromindex)
//searchvalue为必需参数，表示要检索的字符串值
//fromindex为可选参数，表示从第几个字符开始

lastIndex:从右边开始查找第一个下标index
substring:用于提取字符串中结余两个指定下标之间的字符

stringObject.substring(start,stop)
//start必需，为整数
//stop可选

substr：返回字符串中指定的几个字符

stringObject.substr(start,length)
 //start必需，为整数
 //length可选

3.数学函数
在这里插入图片描述
4.数组函数
join：转化病连接数组中的所有元素为一个字符串

arrayObject.join(separator)

reverse：将数组元素颠倒

arrayObject.reverse()

sort：将数组元素重新排序

arrayObject.sort(sortby)

length：返回数组的长度
5.日期函数
在这里插入图片描述

<script type="text/javascript">
var date=new Date();
document.write(date.getFullYear());		//显示2019，不要用getYear
</script>

五、文档对象编程

1.基础
对于HTML标签元素，通常可以定义id,name,class,value,style属性等，通过元素名称及其属性，就可以实现对HTMLDOM的访问删除更新和插入等功能的操作。
2通过id获取DOM元素

document.getElementById(id);				//注意Elements是单数，后面的都是复数

id只能编辑一次，若重复定义则只对第一个有效，同CSS。

<body>
<p id="1">
这个有效
</p>
<p id="1">
这个无效
</p>
<script type="text/javascript">
var id=document.getElementById("1");
console.log(id);
console.log(id.innerText);
</script
</body>

在这里插入图片描述
3.通过name获取DOM元素

document.getElementsByName(name);

name可以重复定义的。

<body>
<p name="1">
这是第一个
</p>
<p name="1">
这是第二个
</p>
<p name="1">
这是第三个
</p>
<script type="text/javascript">
var name=document.getElementsByName("1");
console.log(name);
var len=name.length;
for(var i=0;i<len;i++)
	console.log(name[i].innerText);
</script
</body>

在这里插入图片描述
4.通过tag标签获取DOM元素对象

document.getElementsByTagName(tagname);

类似name。
5.通过class获取DOM元素对象

document.getElementsByClassName(classname);

六、表单对象模型

1.基础
表单（form）对象模拟就是表示HTML表单，在HTML文档中通过<form>标签元素，就会创建一个form对象。
表单常用属性：id,name,action,method,target,acceptCharset,enctype。
标签常用元素的方法描述：reset,submit。
2.获取表单元素对象属性

<body>
<form id="form_id" name="form_name" action="#" method="get" target="_black">
<lable>空白表单</label>
<script type="text/javascript">
var form=document.forms["form_name"];
console.log(form.id);
console.log(form.name);
console.log(form.action);
console.log(form.method);
console.log(form.target);
</script>
</body>

在这里插入图片描述
3.获取表单（form）内元素方法

<body>
<form id="form_id" name="form_name" action="#" method="get" target="_black">
<lable>用户名</label>
<input type="text" value="admin"/><br><br>
<lable>密码</lable>
<input type="password" value="123456"/><br><br>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
var form=document.forms["form_name"];
var len=form.length;
console.log(len);
for(var i=0;i<len;i++)
	console.log(form.elements[i].value);
</script>
</body>

在这里插入图片描述

七、javascript事件基础（未整理）

猜你喜欢

转载自blog.csdn.net/qq_43597899/article/details/87924827
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022