前言
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
从今天开始就和大家一起分享JavaScript的基础知识,如果您有疑问可以在评论区留言或者私信我,感谢观看!
目录
前言
一、JavaScript是什么?
1.主要的功能:
2.语言的组成:
二、JS基础内容
1.js基础——hello world
2.js基础——js编写的位置
3.js基础——js基本语法
4.js基础——js字面量和变量
5.js基础——js标识符
6.js基础——js基本数据类型
7.js基础——js强制类型转换(转为String)
8.js基础——js强制类型转换(转为Number)
9.js基础——其他进制的数字
10.js基础——js强制类型转换(转为boolean)
11.js基础——js算术运算符
12.js基础——js一元运算符
13.js基础——js自增和自减
14.js基础——js逻辑运算符
15.js基础——js非布尔值的与或
16.js基础——js赋值运算符
17.js基础——js关系运算符
18.js基础——编码
19.js基础——js条件运算符(三元运算符)
20.js基础——js运算符的优先级
总结
提示:以下是文章正文内容,下面案例可供参考
一、JavaScript是什么?
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。
1.主要的功能:
嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。控制cookies,包括创建和修改等。
基于Node.js技术进行服务器端编程
2.语言的组成:
ECMAScript,描述了该语言的语法和基本对象。
文档对象模型(DOM),描述处理网页内容的方法和接口。
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。
二、JS基础内容
1.js基础——hello world
代码如下(示例):
Document // 控制浏览器弹出警告框alert("这是我的第一行js代码!");// 让计算机在页面输出内容document.write("Hello World!!!");// 向控制台输出内容console.log("你猜猜我在哪呢!!!");// alert("这是一个弹窗!!");// document.write("这是一个文本内容!!");// console.log("这是控制台输出内容");
运行效果(示例):
2.js基础——js编写的位置
js有三种编写位置的方式
第一种:直接在标签内部使用
第二种:在script标签内使用
第三种:在外部js文件中编写,通过script标签引入(推荐使用)
代码如下(示例):
js编写位置 <!-- 可以将代码编写到script标签内 alert("我是script标签内的js代码")--> 你也点我一下 你也点我一下
运行效果(示例):
3.js基础——js基本语法
js基本语法 /*多行注释JS注释多行注释:注释中的内容不会被执行,但可以在源代码中查看*/// 单行注释// alert("hello");/** 1.JS严格区分大小写* 2.JS中每一条语句中以;结尾* 3.JS中会自动忽略多个空格和换行,可以对代码进行格式化* *///Alert("该语法不会被执行");
4.js基础——js字面量和变量
/** 字面量:都是不可变的值* 比如: 1 2 3 4...* 字面量可以直接使用,但我们一般不会直接使用字面量* * 变量:变量可以用来保存字面量,而且变量可以任意改变*变量可以更加方便使用,在开发中都是使用变量保存一个字面量*而很少直接用字面量*可以通过变量对字面量描述*x=123546*///alert(123456)// 声明变量// 在js中使用var关键字声明一个变量var a;// 为变量赋值a = 123;a = 456;console.log(a);// 声明和赋值同时进行var b = 789 ;console.log(b);var age = 80;console.log(age);
5.js基础——js标识符
/*标识符:在js中所有可以由我们自主命名的都可以称为标识符例如:变量名、函数名、属性名都属于标识符命名要符合一下规则:1.标识符中可以含义字母、数字、_、$2.标识符不能以数字开头3.标识符不能是ES中的关键字和保留字4.标识符一般采用驼峰命名法--首字母小写,每个单词的首字母大写,其余小写*/ var a1_$ = 123;// var 22a1_$ = 123;(不能以数字开头)// var var = 123;(var是关键字)var helloWorld;
6.js基础——js基本数据类型
/*数据类型指的是字面量的类型在js中一共有8大基本数据类型String 字符串Number数值Boolean 布尔Null空值Undefined 未定义Object对象Array数组Function函数其中String、Number、Boolean、Null、Undefined 为基本数据类型Object、Array、Function为引用数据类型*//*String字符串在js中字符串需要使用引号引起来使用双引号和单引号都可以,但是不要混着用*/ /*在字符串中我们可以使用\作为转义字符当表示特殊符号时使用\转义\" 表示"\' 表示'\n 表示换行\t 表示制表符\\ 表示\*/ var str = "hello"; var str1 = "我说:\"今天是周二!\""; console.log(str1); // 我说:"今天是周二!" // 输出字面量 字符串str console.log(str);// hello // 输出变量str console.log("str");// str/*Number数值在js中所有的数值都是Number类型包括整数、小数(浮点数)js中可以表示的最大值Number.MAX_VALUEjs中最小的正值Number.MIN _VALUEInfinity表示正无穷-Infinity表示负无穷NaN 是一个特殊的数字使用typeof检查一个NaN也会返回一个number*///数值 123 var a = 123;//字符串 123 var b = "123";/*可以使用typeof来检查变量的数据类型语法:typeof 变量当检查字符串时 会返回string检查数值时 会返回 number*/ console.log(typeof a); //number console.log(a);// 123 console.log(b);// 123 console.log(typeof b);// string max = Number.MAX_VALUE; console.log(max);//使用js整数的运算基本是可以实现准确var num = 2 + 4 ;console.log(num); //6// 如果使用js进行浮点元素,可能得到一个不精确的结果var cc = 0.1 + 0.2 ;console.log(cc);//0.30000000000000004/*Boolean 布尔值布尔值只有两个,主要作为逻辑判断true真false假*/var bool = true;console.log(bool);//trueconsole.log(typeof bool);//boolean/*Null类型的值只有一个 就是nullnull这个值专门用来表示空对象使用typeof检查null时,返回一个object*/ var nul = null; console.log(nul); //null console.log(typeof nul); //object /*Undefined类型的值只有一个 就是Undefined当声明一个变量时,但是不给其变量赋值,它的值就是Undefined*/var und; console.log(und); //undefined console.log(typeof und); //undefined
7.js基础——js强制类型转换(转为String)
/*强制类型转换将一个数据类型转换为其他数据类型类型转换主要是:将其他的数据类型。转换为string 、 number 、boolean**/ /*将其他类型转为string方式一:调用被转换数据类型的toString()方法该方法不会影响到原变量,会将转换的结果返回null和undefined这两个值没有toString方法方式二:调用String()函数,并将被转换的数据作为参数传递给函数对于number和boolean实际上就是调用的toString()方法但是对于null和undefined,不会调用toString()它会将null转为"null"它会将undefined转为"undefined" */vara = 123;// 调a的toString()的方法// a = a.toString()// 调用String()函数a = null; a = undefined; a = String(a)console.log(a);console.log(typeof a);
8.js基础——js强制类型转换(转为Number)
/*强制类型转换将一个数据类型转换为其他数据类型类型转换主要是:将其他的数据类型。转换为string 、 number 、boolean**/ /*将其他类型转为number方式一:使用我们Number()函数--》字符串转 数字 1.如果是纯数字的字符串,则直接转换为数字 2.如果是非数字的字符串。则转为NaN 3.如果是空字符串,则转为0--》布尔值转 数字true,转为1,false转为0--》null转 数字null转数字为0--》undefined转 数字null转数字为NaN方式二:此方式专门对字符串parseInt() 将字符串转为一个整数parseFloat() 将字符串转为一个浮点数如果对非字符串使用,会将其先转为string,然后操作 */vara = "123";varb = "123px";varc = "3.1415926px";// 调用Number()函数将a转换为数值类型a = Number(a)console.log(a);console.log(typeof a);// 调用parseInt()函数将a转换为数值类型b = parseInt(b)console.log(b);console.log(typeof b);// 调用parseFloat()函数将a转换为数值类型c = parseFloat(c)console.log(c);console.log(typeof c);
9.js基础——其他进制的数字
var a = 123;/*在js中,如果需要表示16进制的数字,则要以0x开头如果需要表示8进制的数字,则以0开头如果需要表示2进制的数字,则要以0b开头,但不是所有的浏览器都支持*///16进制a = 0x10// 2进制a = 0b10// 8进制a = "070"a = parseInt(a,10)console.log(a);//表示以10进制的方式转换
10.js基础——js强制类型转换(转为boolean)
/*强制类型转换将一个数据类型转换为其他数据类型类型转换主要是:将其他的数据类型。转换为string 、 number 、boolean**/ /*将其他类型转为boolean调用Boolean()函数来转换数字--》布尔除了0和NaN都是true字符串--》布尔除了空串,其余都是truenull和undefined都是false对象也会转换为true */var a = 123;//truea = 0;//faslea = NaN; //faslea = Infinity; //truea = "66465"; //truea = ""; //faslea = null; //faslea = undefined; //faslea = Boolean(a);console.log(a);console.log(typeof a);
11.js基础——js算术运算符
/*运算符也叫操作符通过运算符可以对一个或者对个值进行运算比如:typeof就是运算符,可以来获取一个值的类型它会将该值的类型以字符串的形式返回 算术运算符+ 两个字符串相加等于拼接的数值true + false等于转为数值再相加任何数和NaN相加都是NaN任何值和字符串做加法运算都会先转为字符串,再拼接我们可以利用此特点,将任意数据类型加上空串,就可以变成字符串- 可以对两个数减法运算,并将结果返回*可以对两个数进行乘法/可以对两个数进行除法% 取余数*/var a = 123;var res = typeof a;// console.log(typeof res);a = a + 1; //124console.log(a);console.log(true + false);// 1console.log(1 + NaN); // NaNconsole.log("1" + "3"); // 13console.log( 1 + "3");// 13console.log( "he" + "llo");// helloconsole.log(1+2+"3"); //33console.log("1"+2+3); //123// 任何值做 - * % 都会转为number// 可以利用此特点进行类型转换console.log(100 - 99);//1console.log(100 - "99");//1console.log(2 * 2); //4console.log(2 * "2"); //4console.log(2 * null); //0console.log(2 * undefined); //NaNconsole.log(4 / 2); //2console.log(4 / undefined); //NaNconsole.log(9 % 3); //0console.log(9 % 2); //1
12.js基础——js一元运算符
/*一元运算符,只需要一个操作数+ 正号正号不会对数字产生任何影响- 负号负号可以对数字取反对于非number的值,先转为number再运算可以对其他数据类型进行+,就转为number */var a = 123;a = -a;a = true;a = "18";console.log(-a);console.log(1 + +"2" +3); //6
13.js基础——js自增和自减
/*自增通过自增可以使变量在自身基础上+1自增分为两种:后++(a++),前++(++a)无论是a++,还是++a,都会使原变量立即自增不同的是a++,++a的值不同a++的值等于自增之前的值(原变量的值)++a的值等于自增之后的值(原变量的新值)通过自减可以使变量在自身基础上-1无论是a--还是--a,都会立即使原变量自减1a--是变量的原值(自减前的值)--a是变量的新增(自减以后的值)*///var a = 1;// //使a自增+1// // a++;// // a++;// console.log(++a);// console.log(a);var c = 10;c++;//在10基础上自增console.log(c++); //11在11的基础上自增var d = 20;// console.log(++d); //21// console.log(++d); //22//20 + 22 +22// var res = d++ + ++d + d;// console.log(res); d = d++;console.log(d);var num = 10;--num;console.log(num); //9
14.js基础——js逻辑运算符
/*js中为我们提供三种逻辑运算符! 非!可以用来对一个值进行非运算非可以对布尔值进行取反true变false,false变true对于非布尔值,则会先转为布尔值,然后再取反可以利用此特点,来将其他数据类型转为布尔类型&& 与&&可以对符号的两侧的值进行与运算,并返回结果运算规则两个值中只要有一个值为false,就是fasle,反之true如果第一个值是false,则不会校验第二个值,直接false如果第一个值是true,则会校验第二个值|| 或可以对符号两侧的值进行运算并返回结果运算规则两个值只要有一个true就会返回true两个值都为false,会返回falseJS中的或,属于短路的或如果第一个值为true,不会检查第二个值如果第一个值为false,不会检查第二个值*/var res = true && false;console.log(res); //falsevar a = true;// 对a进行!运算a = !a;console.log(a); //falsevar b = 0;b = !b;console.log(b); //truevar ress = true && true; //truevar ress = false && false;//falsevar ress = false && true;//falseconsole.log(ress);var h = true || true; //truevar h = true || false;//truevar h = false || true;//truevar h = false || false;//falseconsole.log(h); true || alert('不会找到我')false || alert('会找到我')
15.js基础——js非布尔值的与或
/*&& || 非布尔值的情况对于非布尔值进行与或运算,先转为布尔值,再进行运算,并且返回原值与运算:如果第一个值为true,则必然返回第二个值如果第一个值为false,直接返回第一个值或如果第一个值true,直接返回第一个值如果第一个值false,直接返回第二个值*/// true && true;// 与运算,如果两个值都为true,则返回第二个值 var res = 1 && 2;// false && true;//如果有false,返回false res = 2 && 0;// false && false;//两个都为false,返回前面的值 res = NaN && 0;// true && true;// 如果第一个值true,直接返回第一个值 res = 1 || 2;// 如果第一个值false,直接返回第二个值 res = 0 || 2; res = "" || "hello"; res = -1 || "hello"; console.log(res);
16.js基础——js赋值运算符
/*=可以将符号右侧的值赋值给左侧的变量+=a += 5; ===> a = a + 5; -=a -= 5; ===> a = a - 5; *=a *= 5; ===> a = a * 5; /=a /= 5; ===> a = a / 5; %=a %= 5; ===> a = a % 5;*/var a = 10;// a += 5;// a -= 5;// a *= 5;// a /= 5;a %= 3;console.log(a);
17.js基础——js关系运算符
/*通过关系运算符,可以比较两个值之间的大小关系如果关系成立返回true,反之false对于非数字先转为数值,再进行比较任何值和NaN作比较都是false如果两边都是字符串,不会将其转为数值,而会转为字符串的unicode编码进行比较> 大于号=大于等于10);console.log(5true);console.log(1>NaN);console.log("5">"10");console.log(5<=10);console.log(undefined==null);console.log(NaN==NaN);console.log(5==10);console.log(5===5);console.log(5!=10);console.log(5!==10);
18.js基础——编码
/*在字符串中使用转译字符输入Unicode编码\u四位编码16进制编码*/console.log("\u2620");
19.js基础——js条件运算符(三元运算符)
/* 条件运算符也叫三元运算符语法:条件表达式" />20.js基础——js运算符的优先级 /*, 运算符使用,可以分割多个语句,一般可以在声明多个变量使用*///使用,声明多个变量var a , b , c;/*运算符的优先级比如先乘除后加减*/console.log(2 + 2*6);//var res = 1 || 2 && 3;console.log(res);
附:
21.js基础——js代码块
/*我们的程序是由一条条语句构成的语句是按照自上向下一条条执行同一个{}中的语句称为一条语句他们要么都执行,要么都不执行一个{}中的语句我们称之为一个代码块在代码块的后面不需要写分号js中的代码块只有分组的作用,没有其他作用代码块内容的内容,在外部是完全可见得*/{var a = 13;alert('hello');console.log(6666);document.write("语句")}console.log(a);{alert('hello');console.log(6666);document.write("语句")}
总结
如果您有疑问可以在评论区留言或者私信我,感谢观看!