JavaScript基础

tech2022-09-25  91

JavaScript

概念: 一门客户端脚本语言功能: JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)ECMAScript:客户端脚本语言的标准基本语法:与html结合方式注释数据类型:变量运算符流程控制语句:JS特殊语法:练习:99乘法表 基本对象:Function:函数(方法)对象创建:属性:特点:调用: Array:数组对象创建:方法属性特点: Boolean(不重要)Date:日期对象创建:方法: Math:数学对象创建:方法:属性: Number(不重要)String(不重要)RegExp:正则表达式对象!!1. 正则表达式:定义字符串的组成规则。2. 正则对象:创建方法 Global特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();方法:URL编码

概念: 一门客户端脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎脚本语言:不需要编译,直接就可以被浏览器解析执行了

功能:

可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。

JavaScript发展史:

1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C-- ,后来更名为:ScriptEase1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript1996年,微软抄袭JavaScript开发出JScript语言1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScript:客户端脚本语言的标准

基本语法:

与html结合方式

内部JS: 定义<script>,标签体内容就是js代码 <script> alert("放到HTML中 如果在body上面就会先执行提醒框再加载后面body的内容"); </script> 外部JS: 定义<script>,通过src属性引入外部的js文件 <script src="js/a.js"> </script> 注意: <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。<script>可以定义多个。

注释

单行注释://注释内容多行注释:/注释内容/

数据类型:

原始数据类型(基本数据类型):

number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)string:字符串。 字符串 “abc” “a” ‘abc’ 没有字符的概念boolean: true和falsenull:一个对象为空的占位符undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined

引用数据类型:对象

<script > //定义number类型 var num = 1; var num2 = 1.2; var num3 = NaN; //输出到页面上 document.write(num+"<br>"); 1 document.write(num2+"<br>"); 1.2 document.write(num3+"<br>"); NaN //定义string类型 var str = "abc"; var str2 = 'edf'; document.write(str+"<br>"); abc document.write(str2+"<br>"); edf //定义boolean var flag = true; document.write(flag+"<br>"); true // 定义null,undefined var obj = null; var obj2 = undefined; var obj3 ; document.write(obj+"<br>"); null document.write(obj2+"<br>"); undefined document.write(obj3+"<br>"); undefined </script>

变量

变量:一小块存储数据的内存空间

Java语言是强类型语言,而JavaScript是弱类型语言。

强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。

语法:

var 变量名 = 初始化值;

typeof运算符:获取变量的类型。

注:null运算后得到的是object //定义number类型 var num = 1; var num2 = 1.2; var num3 = NaN; //输出到页面上 document.write(num+"---"+typeof(num)+"<br>"); document.write(num2+"---"+typeof(num2)+"<br>"); document.write(num3+"---"+typeof(num3)+"<br>"); //定义string类型 var str = "abc"; var str2 = 'edf'; document.write(str+"---"+typeof(str)+"<br>"); document.write(str2+"---"+typeof(str2)+"<br>"); //定义boolean var flag = true; document.write(flag+"---"+typeof(flag)+"<br>"); // 定义null,undefined var obj = null; var obj2 = undefined; var obj3 ; document.write(obj+"---"+typeof(obj)+"<br>"); document.write(obj2+"---"+typeof(obj2)+"<br>"); document.write(obj3+"---"+typeof(obj3)+"<br>"); ------------------------------------------------------------- 1---number 1.2---number NaN---number abc---string edf---string true---boolean null---object undefined---undefined undefined---undefined

运算符

一元运算符:只有一个运算数的运算符 ++--+(正号) ++ --: 自增(自减) ++(--) 在前,先自增(自减),再运算 ++(--) 在后,先运算,再自增(自减) +(-):正负号(就是数学上的正负) 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换 其他类型转number: string转number:按照字面值转换。(如 var n=-"100" alert(b+1) 得到-99)如果字面值不是数字,则转为NaN(不是数字的数字)boolean转number:true转为1,false转为0

算数运算符(除法会出现小数) + - * / % ...

赋值运算符 = += -+....

比较运算符 > < >= <= == ===(全等于) 比较方式

类型相同:直接比较 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。 类型不同:先进行类型转换,再比较 ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false

逻辑运算符 && || ! 其他类型转boolean:

number:0或NaN为假,其他为真string:除了空字符串(""),其他都是truenull&undefined:都是false对象:所有对象都为true

三元运算符 ? : 表达式 语法:

表达式? 值1:值2;判断表达式的值,如果是true则取值1,如果是false则取值2; var a = 3; var b = 4; var c = a > b ? 1:0;

流程控制语句:

if…else…switch: 在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7) switch(变量){ case1: 代码; break; case2 ..... } * 在JS中,switch语句可以接受任意的原始数据类型 whiledo…whilefor

JS特殊语法:

语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)变量的定义使用var关键字,也可以不使用 用: 定义的变量是局部变量不用:定义的变量是全局变量(不建议)

练习:99乘法表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>99乘法表</title> <style> td{ border: 1px solid; } </style> <script> document.write("<table align='center'>"); //1.完成基本的for循环嵌套,展示乘法表 for (var i = 1; i <= 9 ; i++) { document.write("<tr>"); for (var j = 1; j <=i ; j++) { document.write("<td>"); //输出 1 * 1 = 1 document.write(j + " * " + i + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;"); document.write("</td>"); } /*//输出换行 document.write("<br>");*/ document.write("</tr>"); } //2.完成表格嵌套 document.write("</table>"); </script> </head> <body> </body> </html>

基本对象:

Function:函数(方法)对象

创建:
var fun = new Function(形式参数列表,方法体); //不重要 var fun1 = new Functiopn("a","b","alert(a);"); fun1(3,4); ================================================= 弹出提示框显示 3 function 方法名称(形式参数列表){ 方法体 } function fun2(a , b){ alert(a+b); } //调用 fun(1,2) ============================= 弹出提示框显示 3 var 方法名 = function(形式参数列表){ 方法体 } var fun3 = function(a, b){ alert(a+b); }
属性:

length:代表形参的个数

特点:
方法定义是,形参的类型不用写,返回值类型也不写。方法是一个对象,如果定义名称相同的方法,会覆盖在JS中,方法的调用只与方法的名称有关,和参数列表无关在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数 //求任意个数的和 //4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数 function add(){ var sum = 0; for(var i=0; i<arguments.length; i++){ sum += arguments[i]; } return sum; }
调用:

方法名称(实际参数列表); var a = add(1,2,3,4);

Array:数组对象

创建:
var arr = new Array(元素列表); var arr1 = new Array(1, 2, 3);var arr = new Array(默认长度); var arr2 = new Array(5); 会出现4个逗号var arr = [元素列表]; var arr3 = [1, 2, 3, 4, 5];
方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串push() 向数组的末尾添加一个或更多元素,并返回新的长度。
属性

length:数组的长度

特点:
JS中,数组元素的类型可变的。JS中,数组长度可变的。

Boolean(不重要)

Date:日期对象

创建:

var date = new Date(); document.write(date);

方法:
toLocaleString():返回当前date对象对应的时间本地字符串格式 document.write(date.toLocaleString() );2020/9/3 下午3:19:55getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

Math:数学对象

创建:

特点:Math对象不用创建,直接使用。 Math.方法名();

方法:
random():返回 0 ~ 1 之间的随机数。 含0不含1ceil(x):对数进行上舍入。floor(x):对数进行下舍入。round(x):把数四舍五入为最接近的整数。 //求1-100的随机数 var n = Math.floor(Math.random() * 100) + 1;
属性:

PI

Number(不重要)

String(不重要)

RegExp:正则表达式对象!!

1. 正则表达式:定义字符串的组成规则。
单个字符:[] 如: [a] [ab] [a-zA-Z0-9_] 特殊符号代表特殊含义的单个字符: \d:单个数字字符 [0-9] \w:单个单词字符[a-zA-Z0-9_] 量词符号: ?:表示出现0次或1次 *:表示出现0次或多次 +:出现1次或多次 {m,n}:表示 m<= 数量 <= n m如果缺省: {,n}:最多n次n如果缺省:{m,} 最少m次 开始结束符号 ^:开始$:结束
2. 正则对象:
创建
var reg = new RegExp(“正则表达式”); var reg = new RegExp("^\\w{6,12}$");字母开头字母结尾6-12位var reg = /正则表达式/; var reg2 = /^\w{6,12}\d$/;字母开头数字结尾共6-12位
方法
test(参数):验证指定的字符串是否符合正则定义的规范 var username = "reborn" var flag = reg.test(username);

Global

特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
方法:

encodeURI():url编码 decodeURI():url解码

var str = "东邦"; var encode = encodeURI(str); document.write(encode+"<br>");//%E4%B8%9C%E9%82%A6 document.write( decodeURI(encode)+"<br>" )//东邦

encodeURIComponent():url编码,编码的字符更多 decodeURIComponent():url解码

parseInt():将字符串转为数字

逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number document.write( parseInt("213A12")+1 +"<br>" );输出214 document.write( parseInt("A214A12")+1 +"<br>" );输出NaN

isNaN():判断一个值是否是NaN

NaN六亲不认,连自己都不认。NaN参与的==比较全部都是false var a = NaN; document.write( (a==NaN) + "<br>" );//false document.write( (isNaN(a)) + "<br>" );//true

eval(): 将JavaScript 字符串,并把它作为脚本代码来执行。

var s = "alert('eval()方法可以解析字符串变成js代码')"; eval(s);
URL编码

东邦 = %E4%B8%9C%E9%82%A6

最新回复(0)