JavaScript概念

JavaScript除了名字与’java’相似,其余并没有联系.但是开发JavaScript的人员中有开发过Java的人员参与,因此JavaScript的许多语法同Java类似.

和HTML的结合方式

JavaScript和HTML有两种结合方式
注意:1.JavaScrpit与HTML结合时,不管是内部结合还是外部结合,都离不开’script’围堵式标签.
2.可以在HTML的任意位置中用’script’围堵标签进行结合.哪怕写在html文件的第一行也是可以的.
3.javaScript是存在’执行流程’这一概念的.也就是说,javaScript代码在html中到底何时执行,需要看该javaScript的代码在第几行.如果javaScript的代码在第一行,那么打开这个网页先执行的代码javaScript的代码.

4.'script’标签可以在html文件中定义多个

1.内部结合

直接在html文件中的script标签内写入javaScript的代码
格式:<script> </script>
列如:

<script>alert("china yichibang"); </script>

2.外部结合

将’.js’后缀格式的文件引入到html文件中,js后缀格式的文件内容直接写javaScript代码即可.
格式:<script src="js文件的相对路径"></script>
列如:

<script src="test.js"></script>

注释相关

javaScript的注释语法跟java一样,都是两个杠的’//’,或者一个斜杠配上星号的’/* */’
但要注意,若在js文件中,可以直接用该注释语法.
若在html文件中,则只可以在script标签内使用.

数据类型

一/原始数据类型(基本数据类型)

1. number：数字。
整数:

小数:

NaN(not a number 一个不是数字的数字类型):

2. string：字符串。
字符串可以是用双引号也可以是用单引号表达.

3. boolean布尔类型
:true和false

4. null：一个对象为空的占位符

5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

二/引用数据类型

定义对象,和java一样.
格式:new 对象名();
列如:

var objOfTest = new Date();

三/变量定义

在JavaScript中,对于变量这个概念,是强调为’弱类型’的.
变量的类型是没有’绝对性’的,你既可以把一个已经定义了的变量当作字符串类型使用,也可以把它当作整数或引用数据类型使用.

一.定义局部变量

固定格式一:var 自定义变量名 = 初始值;
固定格式二:var 自定义变量名;
列如:

var variable = 1001;
variable = '你好!'
alert(variable);

二.定义全局变量(不建议使用)
不建议使用该方法,因为完全可以在Function(用于定义局部方法等局部用途的标签)标签外的上一行定义一个’var’局部变量,再在该标签内引用.
固定格式:自定义变量名 = 初始化值;
列如:

 testVariable = 1;

JavaScript的运算符

JavaScript的运算符同java的运算符基本没什么区别.

对其它类型进行运算符操作

因为JavaScript的’弱类型’之特性,因此当你对一个非’number’数字类型的变量进行运算符操作时(如对String类型的变量使用自增运算符),那么会将’被用于运算符操作的非number型变量强制转换为number型变量.
但是转换规则需要注意,
一.String类型被用于运算符操作.
假如被用于运算符操作的变量为’String’类型,那么将会根据两种情况来进行转换,
第一种是如果String类型的字符串的全部内容都为数字字符串,那么直接将其’数字字符串’转换为number数字来运算.
第二种是,假如String类型的字符串内容不为数字字符串,虽然会强制转换为Number类型,但其内容则为’Nan’,即:不是数字的数字.
列如:

//对非Number类型的变量进行运算符操作
//一.String强转Number
// 1.依照数字字符串内容进行运算
var strVariable = "123";
document.write('字符串strVariable的内容为:'+strVariable+'<br>');
strVariable++;
document.write('经过自增运算符强制转换为Number类型后,内容为'+strVariable+'<br>');
// 2.对非数字的字符串内容进行运算
var strVariableTwo = "中国第一";
document.write('字符串strVariableTwo的内容为:'+strVariableTwo+'<br>');
strVariableTwo++;
document.write('经过自增运算符强制转换为Number类型后,内容为'+strVariableTwo+'<br>');

二.Boolean布尔类型被用于运算符操作.
Boolean也可以用于强转Number.但分两种情况
1.Boolean类型被’+"或’/'号的正负运算符进行初始化强转时,会得到True和False的默认值,Ture的默认值为1,False的默认值为0,对应着计算机的01.
在JS中,0或NaN为假,如果不是0或者NaN,那么就为真

2.Boolean类型被直接用运算符赋值时,则Number的数值结果依所赋的值和运算符类型为基准.

一元运算符

一元运算符就是自增,同Java的语法一致,且存在先自增自减还是后自增自减的逻辑.
1.自增:前++/后++
格式:变量名++; / ++变量名;
列如:

var numInfo = 1;
numInfo++; //自增

2.自减:前–/后–
格式: 变量名--; / --变量名;
列如:

numInfo--;

3.正负运算符 直接指定变量为某个正数值或负数值
注意:这是直接指定一个正负值,而不是去让他们加减乘除.
格式1: var 自定义变量名 = +自定义正数值; / var 自定义变量名 = -自定义负数值;
格式2:变量名 = +自定义正数值; / 变量名 = -自定义负数值;

加减乘除模运算符

加+,减-,乘*,除/,模%运算符
跟Java语法完全一致,没什么区别.
列如:

var suanshuMath = 12;
suanshuMath = suanshuMath+100*2/50%3;
document.write("算数运算符:"+suanshuMath);

比较运算符

在Java中,数字可以比大小,比是否对等,而字符串只能比是否对等.
但在JavaScript中,数字也一样,但是字符串不仅能用来比对等,也能用来比大小.
1.比较是否对等(相等)
用于比较是否对等时,用’=='号即可,跟java用法一样,这里忽略.
2.数字比大小:
数字比大小跟Java完全一致.
列如:

//比较运算符
document.write((10>15)+'<br>');
document.write((10<15)+'<br>');

注意:当要在打印语句内进行运算时,应将参与运算的数据以小括号’()'包起来,这样才能配合br标签进行换行.
3.字符串比大小:
字符串是依照每个字母的ASCII码表值来判断大小,它的对比逻辑较为特殊.
它会将被比较的两个字符串中位置对等的各个字母进行比较,注意,是位置对等!!!而比较规则是根据其对应的ASCII码的大小(也可以理解为从a到z的字母顺序)来判断谁大谁小.
而更要注意的是,只要两个位置对等的字母不是一样的ASCII数值,那么将该两个数值进行大小对比,从而产生false或true结果,这将产生’短路’效果进而忽略后面的字符串内容.

比如

document.write(('d'>'cb')+'<br>');
document.write(('bbcd'>'agkbc')+'<br>');
document.write(('abcdefg'>'abcdekg')+'<br>');

4.不同类型间的比较

在JavaScript中,不同之间的类型数据可以相互比较,但会具有一个’隐性的数据转换’.具体要转为哪种类型,依照你要比较什么为基准.
比如当一个字符串数据比较整数型数据时,会先将字符串的数据转为整数,再来进行比较.
当然,前提是该字符串的内容必须全部为整数内容才可以.
列如:

//字符串对比整数
document.write(("123">123)+'<br>');//结果为false
document.write(("123"==123)+'<br>');//结果为true

5.全等于’===’ 判断两者数据类型是否相同.
由于JavaScript数据弱类型,因此理论上来讲,任何不同的类型都可以进行相互比较,但是正常情况下,程序员往往只对数据类型相同的进行比较.
那么这里就出现了一个问题,如何确定两个被比较的数据是相同的数据类型呢?
这时候就需要用到一个JavaScript中独有的比较运算符,那就是'==='.
逻辑:当两个数据不为同一个类型时,直接返回false.
格式:数值A === 数值B;
列如:

 document.write((321==="321")+'<br>');

逻辑运算符

JavaScript的逻辑运算符同样和Java中的逻辑运算符一致.
分别为:
&& 且
|| 或
! 非
用法一致,所以就略过叙事.
但是介于JavaScript是一个’弱类型’语言,因此任何类型是可以相互用于不同的数据的.
那么就会出现一种情况,假如某个变量的数据内容并非是true或者false,但是却要将其以逻辑运算符的[且’&&’],[或’||’],[非’!’]进行运算,该如何得出该变量是true还是false?
要通过逻辑运算符得出某个非布尔值数据的变量是否为true或false,则要依照变量的数据类型而定.
一.将number数字的数据用于逻辑运算符
在JS中,0或NaN为假,如果不是0或者NaN,那么就全部默认为真.
二.将string字符串的数据用于逻辑运算符
除了空字符串("")为false，其他都是true
三.null&undefined的值都为false
所谓’null’值,即:初始化变量内容为null.用于逻辑运算符中,则为false.
所谓’undefined’值,即:不声明初始化的变量内容,用于逻辑运算符中也是为false.
四. 对象：所有对象都为true
意义:防止对象内容为空所造成的’空指针异常’.
而空指针异常,意味着这个’用于定义对象的变量’的值为null或者undefined,而这两者在逻辑运算符中都为’fase’.因此,只要该对象是一个’实实在在的,带有对象值的对象’,那么就为true.
也正因此,当在JavaScript中用判断语句时,只需要在判断括号内输入对象的变量名即可.
意思就是,默认判断它是否为true.如果是true,则执行语句内的代码.
列如:

var objOfTest = new Date(); //定义一个data对象的变量.
if(objOfTest){
document.write('对象的布尔值为true'+'<br>');
}
if (objOfTest = null) {
document.write('对象的布尔值为false'+'<br>');
}

五.将Number数字应用于if,while等判断语句
因为在JavaScript的逻辑符号体系中,number数字类型的’0’表示为假的’false’,其它表示为真的’true’.因此可以用数字来代替’true’和’false’.
列如:

while(2){
document.write('中国第一');
}

三元运算符

JavaScript的三元运算符格式跟Java一摸一样.
格式:? : 表达式;
列如:

var a = 3;
var b = 4;
var c = a > b ? 1:0;
alert(c);

流程控制语句

一. if…else…
跟Java无区别,略过
格式:if(条件) {语句体} else{语句体}
二. switch:
原本在java中，switch语句小括号’()'内的数据类型是有限制的,只能是以下几种byte int shor char,枚举(1.5) ,String(1.7).

而在JavaScript中,switch语句小括号’()'内可以是任意的基本数据类型
格式:
switch(变量){
case 值:
对应值的语句体;
}
列如:

var switchOfVariable = 3;
switch (switchOfVariable) {
case 1:
document.write("执行到了本行,它对应的值为:"+switchOfVariable+'<br>');
break;
case 2:
document.write("执行到了本行,它对应的值为:"+switchOfVariable+'<br>');
break;
case 3:
document.write("执行到了本行,它对应的值为:"+switchOfVariable+'<br>');
break;
}

三. while
死循环,跟java无区别,略过.
格式:while(循环条件){

语句体;
}
列如:

while(2){
document.write('中国第一');
}

四. do…while
带do的死循环,跟java无区别.
列如:

do {
alert("死循环开始!该提示框来自do语句体");
} while (true);

五. for循环
跟java无区别
列如:

for (var i = 1; i <= 10; i++) {
document.write('当前正在for循环,循环十次,当前循环到了第'+i+'次<br>');
}

JavaScript中的方法

JvaScript中,调用方法的格式同Java一样.
如:方法名(形式参数);

1.提示框 alert

用于弹出一个网页提示框,显示出字符串内容.
格式:alert(字符串内容);
列如:

alert(variable);

2.网页文本打印 document.write

用于将字符串内容显示以文本形式显示在网页中
格式:document.write(字符串内容);
列如:

document.write(param);
document.write('世界第一!');

注意:javaScript不存在’带换行符作用’的文本打印方法,因此如果直接使用’document.write()'方法,则会造成多个文本都在一行显示.
此时,可以直接在括号’()'内加上html语言中用于换行的标签’br’来实现’换行符’
格式:document.write(字符串内容+"<br>");
列如:

document.write(param+"<br>");
document.write('世界第一!'+'<br>');

3.获取数据类型 typeof

获取一个变量的数据类型,因为其javaScript强调’弱类型’的因素,所以会依据该变量最后的数据内容之类型来判断.
注意:因为数据值’null’为’对象’的占位符,因此当数据的内容为’null’时,通过’typeof’方法获取到的数据类型则为’Object’
格式:typeof(变量名/数据内容);
列如:

//通过数据内容来判断数据类型,并打印
document.write(typeof(12));
//通过一个变量名来判断数据类型,并打印
document.write(typeof(param));

JavaScript对象与方法定义

Script中定义方法的格式

一.
在JavaScript中,定义方法的形式参数时**,不需要填写形参的数据类型,只需要填写形参的自定义名称.**

二.
JavaScript中的方法可以直接理解为对象. 因此,一个已经定义了其它方法的’方法名’,还可以再次定义其它方法,此时会覆盖之前定义的方法.
即:方法是一个对象，如果定义名称相同的方法，会覆盖
格式:

已经被用于定义方法的自定义方法名 = 对象名(形参){
//方法体
};

列如:

function functionObjTwo(variableA,variableB){
document.write('传递的参数为:'+variableA+variableB);
}
//调用
functionObjTwo('武汉','加油'+'<br>');
//
functionObjTwo = function (b) {
document.write(b+'<br>')
};
functionObjTwo(15+30);

三.
在JS中，方法的调用只与方法的名称有关，和参数列表无关
即:调用方法时,其括号内的实参数量可以和方法括号的形参数量不一致.甚至于,调用处的实参可以为空

四.
在JS中,即使方法体存在return返回语句,也不需要定义方法返回值类型.
列如:

functionObjRetrun = function (a,b) {
return a+b;
};
var sum =functionObjRetrun(10,10);
document.write(sum+'<br>');

五.

在方法声明中有一个隐藏的内置’数组对象’，这就是’arguments’数组对象,它会将方法接收到的以数组形式封装. 数组索引值以0为起点.
即:定义方法时可以不定义形参列表,但可以用’arguments’数组对象来接收调用处传来的参数.
注意:arguments的数组长度,是依照你传递了多少个参数而定.如果调用的元素索引值超出长度范围,将会出现undefined.

列如:

var functionObjArray = function () {
document.write(arguments[0]+'<br>');
document.write(arguments[1]+'<br>');
document.write(arguments[2]+'<br>');
};
functionObjArray(12,345,'中国');

1.Function函数(方法)对象.

JavaScript中,函授式编程同Java有所不同,具体体现在格式上.下面就列出格式.有三种格式.

第一种格式 不推荐 不常用:
需要注意的是,在该格式下,不管是定义Function函授对象的形式参数名称还是方法体.都需要用字符串的单引号或双引号之形式去定义

格式:var 自定义函授方法名 = new Function('自定义形参名称','自定义方法体');
列如:

//格式一
var funtionObj = new Function('a','b','alert(a+b)');
//调用
funtionObj('中国','第一');

第二种格式 常用
格式:

function 自定义函数方法称(自定义形参名称){
//方法体
}

列如:

//格式二
function functionObjTwo(variableA,variableB){
document.write('传递的参数为:'+variableA+variableB);
}
//调用
functionObjTwo('武汉','加油');

第三种格式 常用
格式:

var 自定义函数方法名 = function(a,b){
//方法体
};

列如:

//格式三
var functionObjThree = function(a,b){
document.write(a+b+'<br>');
};
//调用
functionObjThree('世界','大同');

属性1: length 获取方法中的形参个数
格式:方法名.length

2.Array数组对象

注意:在JS中,在数组的元素内容中,可以存在多个不同类型的元素.

定义格式一:var 自定义对象实例名 = new Array(自定义元素内容);
列如:

 //定义格式一:var 自定义对象实例名 = new Array(自定义元素内容);
var arrayOne = new Array('你好!<br>','世界!<br>',1901+"<br>");
//调用
for(i=0;i<arrayOne.length;i++){
document.write(arrayOne[i]);
}
document.write("===================<br>");

定义格式二: var 自定义对象实例名 = new Array(自定义默认长度);

//
定义格式二. var 自定义对象实例名 = new Array(自定义默认长度);
var arrayTwo = new Array(6);
//为元素赋值并调用
arrayTwo[0] = '中国崛起!<br>';
arrayTwo[1] = '世界第一!<br>';
arrayTwo[2] = '华夏归真!<br>';
arrayTwo[3] = '世界大同!<br>';
arrayTwo[4] = '天下第一!<br>';
arrayTwo[5] = '唯我独尊!<br>';
for (i = 0;i<arrayTwo.length;i++){
document.write(arrayTwo[i]);
}

定义格式三: var 自定义对象实例名 = [自定义元素内容];

//
定义格式三. var 自定义对象实例名 = [自定义元素内容];
var arrayThree=['中国','最棒!','武汉','挺住!'];
//调用
for (i=0;i<arrayThree.length;i++){
document.write(arrayThree[i]+"<br>");
}

Array数组对象的 join() 方法
意义:用于以从左到右形式输出所有元素,
如果括号内不传入参数,则默认以逗号’,'分割元素.
如果传入参数,则以其传入的String类型参数来分割.

格式一:自定义对象实例名.join();
格式二:自定义对象实例名.join(自定义String类型之符号);

Array数组对象的 push() 方法
意义:给数组插入新的元素,同集合的’add’方法功能相同.
格式:自定义对象实例名.push(欲添加的元素内容);

3.Date日期对象

定义格式:var 自定义对象实例名 = new Date();
列如:

var dateObj = new Date();

toLocaleString()：日期格式转换方法
Date对象默认的日期格式是国外的日期格式.
当使用toLocaleString方法时,就可以通过date对象返回一个本地的日期格式.
定义格式:自定义对象实例名.toLocaleString();
列如:

document.write(dateObj.toLocaleString()+"<br>");

getTime(): 获取当前毫秒值方法
获取1970年1曰1日到当前时间的毫秒值.和Java没区别.
格式:自定义实例对象名.getTime();
列如:

// getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
document.write(dateObj.getTime());

4.Math数学对象

Math对象是一个静态对象,可以直接使用

格式:Math.random(); 返回 0 ~ 1 之间的随机小数。 含0不含1 如:0.41174330955011174
获取特定的范围数值之格式:Math.floor((Math.random()*最大范围的数值)+1);
如:

Math.floor((Math.random()*10)+1);

参考:https://www.runoob.com/jsref/jsref-random.html

格式:Math.ceil(自定义数值); 向上取整
格式:Math.floor(自定义数值); 向下取整
格式:Math.round(自定义数值); 四舍五入

属性格式:Math.PI; 获取圆周率

5.RegExp正则表达式对象

正则表达式的概念,自己也是理解的.只是要记住在正则表达式中,符号所代表的意义.

一.正则表达式的大致符号规则
1. 单个字符:[] 如： [a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符:
d:正则出单个任意数字字符
w:正则出单个任意数字,或单个任意大小写字母, 或单个下划线’_’

2. 量词符号：
?：表示正则出某存在0个或1个的符号
*：表示正则出某存在0个或多个的符号
+：表示正则出某存在1个或多个的符号.

3.长度符号
{m,n}:表示 m<= 数量 <= n 即:规定某种字符串的最小长度和最大长度.

• m如果缺省： {,n}:最多n次 即:规定某种字符串长度不得大于某个范围.
• n如果缺省：{m,} 最少m次 即:规定某某种字符串长度不得小于某个范围.
  列如:

var regThree = /^d{2,7}$/;

3. 开始结束符号
开始结束符号写在正则表达语句内的开头和结尾,符号’^‘为开始,符号’$'为结束
绝不能省略!.

二.创建正则表达式对象

格式一: var 自定义对象实例名 = new RegExp("\正则表达式的符号");
列如:

var regOne = new RegExp("^\w$");

注意,不要少了两个杠’’

格式二(推荐) var 自定义对象实例名 = /正则表达式/;
列如:

var regTwo = /^d+$/;

三.正则字符串的方法
验证指定的字符串是否符合正则定义的规范,并返回出一个boolean型结果
格式:自定义对象实例名.test(字符串参数):
列如:

//格式一	1. var 自定义对象实例名 = new RegExp("正则表达式的符号");
var regOne = new RegExp("^\d+$");
document.write("第一个正则对象结果为:"+regOne.test("d")+"<br>");
// 格式二 var 自定义对象实例名 = /正则表达式/;
var regTwo = /^d+$/;
document.write("第二个正则对象结果为:"+regTwo.test("d")+"<br>");

6.Global对象

Global对象是一个全局对象,所谓全局对象,就是说:可以直接输入该对象的方法名(如encodeURI() ),而不用以’对象名.方法名()'的形式调用.
也就是说:直接输入方法使用即可,不需要new对象,也不需要在前面加上’对象名.'

一 URL编码与解码方法 之 形式一
编码格式:encodeURI("URL字符串");
列如:

 var urlParamOfEn = encodeURI(Param);
document.write(urlParamOfEn+"<br>");

解码格式:decodeURI("URL字符串");
列如:

 var urlParamOfDe = decodeURI(urlParamOfEn);
document.write(urlParamOfDe+"<br>");

二 URL编码与解码方法 之 形式二
编码格式:encodeURIComponent("URL字符串");
列如:

var urlParamOfCoEn = encodeURIComponent(Param);
document.write(urlParamOfCoEn+"<br>");

解码格式:decodeURIComponent("URL字符串");
列如:

var urlParamOfCoDe = decodeURIComponent(urlParamOfCoEn);
document.write(urlParamOfCoDe+"<br>");

注意:编码形式一和编码形式二的区别在于,'encodeURIComponent’编码要长一点.

三 将字符串类型的数字转换成Number类型数字的方法
将字符串中的数字转成number类型的数字并返回.
格式:parseInt(字符串);
列如:

var numberOfString = parseInt("12341212中国我爱你2020");
document.write(numberOfString+"<br>");

注意:
1.如果字符串中存在非数字的字符,如字母.那么仅将第一个字母前面的所有数字转换并返回,字母后面的所有数字则不转换,也不返回.

2.如果字符串的开头便是非数字的符号,则直接返回Nan.

四.判断一个值是否为Nan
格式:isNaN();
意义:因为NaN六亲不认，连自己都不认。往常中,只要是NaN参与的’=='比较,返回的布尔值全部为false,因此需要该方法来判断某个值是否为Nan.

五.将内容为JS代码的字符串转换为真正的JS代码并执行.
这个听起来比较复杂,其实也没那么复杂.
假如我有一个文本,这个文本内容就是JS的代码.那么使用了该方法后就可以将该文本内的JS代码执行.
格式:eval(含有JS代码的字符串);
列如:

var jsInfoi = "document.write('你好世界!')";
var jsInfoiTwo = "alert('我爱中国')";
eval(jsInfoi);
eval(jsInfoiTwo);

最后

以上就是潇洒夕阳为你收集整理的总结23 前端之JavaScriptJavaScript概念和HTML的结合方式数据类型JavaScript的运算符JavaScript中的方法JavaScript对象与方法定义的全部内容，希望文章能够帮你解决总结23 前端之JavaScriptJavaScript概念和HTML的结合方式数据类型JavaScript的运算符JavaScript中的方法JavaScript对象与方法定义所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。