遵义市住房和城乡建设局官方网站,it行业公司排名,网络服务商都有哪些公司,长沙哪家网站公司学习来源#xff1a;尚硅谷JavaScript基础实战丨JS入门到精通全套完整版 文章目录 #x1f4da;JavaScript简介#x1f407; 实现#x1f407;JavaScript的特点 #x1f4da;基本知识#x1f407;编写位置#x1f525;方式一#xff1a;在标签中写#xff08;不推… 学习来源尚硅谷JavaScript基础实战丨JS入门到精通全套完整版 文章目录 JavaScript简介 实现JavaScript的特点 基本知识编写位置方式一在标签中写不推荐方式二script标签中方法三外联js样式推荐 JS基本语法变量与字面量标识符数据类型String字符串Number数值Boolean布尔值Null和undefined 强制类型转换将其他数据类型转换为String将其他数据类型转换为Number将其他数据类型转换为布尔类型其他进制的数字 算术运算符一元运算符自增与自减运算符逻辑运算符布尔判断非布尔判断判断运算符转义字符相等运算符三目运算符运算符优先级 代码块流程控制if语句switch语句while循环for循环break和continue配合label JavaScript简介 实现 ECMAScript是一个标准而这个标准需要由各个厂商去实现。 我们已经知道ECMAScript是JavaScript标准所以一般情况下这两个词我们认为是一个意思。但是实际上JavaScript的含义却要更大一些。 一个完整的JavaScript实现应该由以下三个部分构成
JavaScript的特点 解释型语言 不需要被编译为机器码再执行。开发起来轻松但运行较慢。解释型语言中使用了JIT技术使得运行速度得以改善。 类似于 C 和 Java 的语法结构 动态语言可以暂时理解为在语言中一切内容都是不确定的。 基于原型的面向对象
基本知识
编写位置
JS代码需要编写到script标签中。我们一般将script标签写到head中。和style标签有点像属性 type默认值text/javascript可以不写不写也是这个值。src当需要引入一个外部的js文件时使用该属性指向文件的地址。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleDocument/title!-- JS代码需要编写到script标签中 --script typetext/javascript// 控制浏览器弹出一个警告框alert(这是我的第一行js代码);// 让计算机在页面中输出一个内容document.write(我是js写在body里的输出喔~~)// 向控制台输出一个内容console.log(我只会出现在控制台喔);/script
/head
body
/body
/html方式一在标签中写不推荐
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleDocument/title
/head
body!-- 注意虽然可以写在标签的属性中但是它们属于结构与行为耦合不方便维护不推荐 --!-- 可以将js代码编写到标签的onclick属性中当点击按钮时执行--button onclickalert(么么哒可霸总可不霸总版)点我一下/button!-- 可以将js代码写在超链接的href属性中 --a hrefjavascript:alert(许沁真是恋爱脑);你也点我一下/a
/body
/html方式二script标签中
script typetext/javascriptalert(方法二);
/script方法三外联js样式推荐
script typetext/javascript src外部的js文件.js/scriptscript标签一旦用于引用外部文件就不能再编写代码即使编写了浏览器也会忽略。如下wuwuwu是不会出现的。 script srca.jsalert(wuwuwu)/script 如果你还需要则可以再创建一个新的script标签用于编写内部代码。 script typetext/javascript src外部的js文件.js/script
script typetext/javascriptalert(我是内部的js代码);
/scriptJS基本语法
严格区分大小写注释 单行注释//注释内容多行注释/*多行注释*/ 以;号结尾会忽略多个空格和换行。
变量与字面量 字面量不可变。可以直接使用当我们一般不会直接用。 变量用var来声明一个变量。用变量去保存一个字面量。 var num123;//把字面量赋值给变量标识符
在JS中所有的可以由我们自主命名的都可以称为标识符。例如变量名、函数名、属性名。标识符命名规则 标识符中可以含字母、数字、_、$标识符不能以数字开头标识符不能是ES中的关键字或保留字标识符一般用驼峰命名JS底层保存标识符实际上采用Unicode编码所以 理论上讲所有的 utf-8中含的内容都可以作为标识符
数据类型 基本数据类型 String字符串Number数值Boolean布尔值Null空值Undefined未定义 引用数据类型Object对象 String字符串
在JS中字符串需要使用引号引起来使用双引号或单引号都可以但是不要混着用引号不能嵌套双引号不能放双引号单引号不能放单引号在字符串中我们可以使用\作为转义字符当表示一些特殊符号时可以使用\进行转义 \ 表示 \ 表示 ’\n 表示换行\t 制表符\\ 表示\
Number数值
在JS中所有的数值都是Number类型包括整数和浮点数小数JS中可以表示的数字的最大值Number.MAX_VALUE1.7976931348623157e308Number.MIN_VALUE大于0的最小值5e-324如果使用Number表示的数字超过了最大值则会返回 Infinity 表示正无穷-Infinity 表示负无穷 使用typeof检查Infinity也会返回numberNaN 是一个特殊的数字表示Not A Number使用typeof检查一个NaN也会返回number。在JS中整数的运算基本可以保证精确如果使用JS进行浮点运算可能得到一个不精确的结果所以千万不要使用JS进行对精确度要求比较高的运算 typeof检查一个变量的类型 Boolean布尔值
布尔值只有两个主要用来做逻辑判断 true表示真false表示假 使用typeof检查一个布尔值时会返回boolean
Null和undefined
Null(空值)类型的值只有一个就是null
null这个值专门用来表示一个为空的对象使用typeof检查一个null值时返回object undefined(未定义)类型的值只有一个就undefind当声明一个变量但是并不给变量赋值时它的值就是undefined使用typeof检查一个undefined时也是undefined
强制类型转换
将其他数据类型转换为String
方式一
调用被转换数据类型的toString()方法该方法不会影响到原变量它会将转换的结果返回但是注意null和undefined这两个值没有toString()方法如果调用他们的方法会报错
方式二
调用String()函数并将被转换的数据作为参数传递给函数使用String()函数做强制类型转换时对于Number和Boolean实际上就是调用的toString()方法但是对于null和undefined就不会调用toString()方法它会将 null 直接转换为 “null”将 undefined 直接转换为 “undefined”
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascriptvar a 123;a a.toString();var b null;b String(a);var c undefined;console.log(c);c String(c);console.log(typeof a);console.log(typeof b);console.log(typeof c);console.log(c);/script/headbody/body
/html将其他数据类型转换为Number
方式一使用Number()函数
字符串 -- 数字 1.如果是纯数字的字符串则直接将其转换为数字2.如果字符串中有非数字的内容则转换为NaN3.如果字符串是一个空串或者是一个全是空格的字符串则转换为0 布尔 -- 数字 true 转成 1false 转成 0 null -- 数字 0undefined -- 数字 NaN
方式二这种方式专门用来对付字符串
parseInt() 把一个字符串转换为一个整数可以将一个字符串中的有效的整数内容取出来parseFloat() 把一个字符串转换为一个浮点数和parseInt()类似不同的是它可以获得有效的小数
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascriptvar a 123;console.log(a);a Number(a);console.log(typeof a);var b 123px;b Number(b);console.log(b);var c false;c Number(c);console.log(c);var d null;d Number(d);console.log(d);var e undefined;e Number(e);console.log(e);a 123567a567px;a parseInt(a);console.log(a);a 123.456.789px;a parseFloat(a);console.log(a)/script/headbody/body
/html将其他数据类型转换为布尔类型
使用Boolean()函数
数字 -- 布尔除了0和NaN其余的都是true字符串 -- 布尔除了空串其余的都是truenull和undefined都会转换为false对象也会转换为true
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascriptvar a 123; //truea -123; //truea 0; //falsea Infinity; //truea NaN; //false//调用Boolean()函数来将a转换为布尔值a Boolean(a);// 空串为falsea a Boolean(a);console.log(a);// 空格不是空串a ;a Boolean(a);console.log(a);a null; a Boolean(a);console.log(a);a undefined; a Boolean(a);console.log(a);/script/headbody/body
/html其他进制的数字
在js中如果需要表示16进制的数字则需要以0x开头如果需要表示8进制的数字则需要以0开头如果要要表示2进制的数字则需要以0b开头但是不是所有的浏览器都支持。如你想解析字符串为数字070有些浏览器会当成8进制解析有些则会当成10进制解析。为了避免以上情况我们在使用parseInt()时一般指定进制。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascriptvar a 123;//十六进制a 0x10;a 0xff;a 0xCafe;//八进制数字a 070;//二进制数字//a 0b10;//向070这种字符串有些浏览器会当成8进制解析有些会当成10进制解析a 070;//可以在parseInt()中传递一个第二个参数来指定数字的进制a parseInt(a,10);console.log(typeof a);console.log(a);/script/headbody/body
/html
算术运算符 运算符也叫操作符 通过运算符可以对一个或多个值进行运算,并获取运算结果比如typeof就是运算符可以来获得一个值的类型它会将该值的类型以字符串的形式返回 算术运算符当对非Number类型的值进行运算时会将这些值转换为Number然后再运算任何值和NaN做运算都得NaN。
可以对两个值进行加法运算并将结果返回。 如果对两个字符串进行加法运算则会做拼串会将两个字符串拼接为一个字符串并返回。任何的值和字符串做加法运算都会先转换为字符串然后再和字符串做拼串的操作。 - 可以对两个值进行减法运算并将结果返回。* 可以对两个值进行乘法运算。/ 可以对两个值进行除法运算。% 取模运算取余数 任何值和字符串相加都会转换为字符串并做拼串操作我们可以利用这一特点来将一个任意的数据类型转换为String。 我们只需要为任意的数据类型 一个 即可将其转换为String。这是一种隐式的类型转换由浏览器自动完成实际上它也是调用String()函数。 任何值做- * /运算时都会自动转换为Number我们可以利用这一特点做隐式的类型转换。 可以通过为一个值 -0 *1 /1来将其转换为Number。原理和Number()函数一样使用起来更加简单。 一元运算符
一元运算符只需要一个操作数 正号正号不会对数字产生任何影响。- 负号负号可以对数字进行负号的取反。对于非Number类型的值它会将先转换为Number然后再运算。可以对一个其他的数据类型使用,来将其转换为number它的原理和Number()函数一样。
!DOCTYPE html
html langen
headmeta charsetUTF-8title一元运算符/titlescriptvar a true;a -a;console.log(a)//-1var b 123;b b;console.log(b);//123var c 1 23 4;console.log(c)//10/script
/head
body
/body
/html自增与自减运算符 逻辑运算符 确切感受到语言之间的通用性——都一样哇 布尔判断 非布尔判断 与 || 非布尔值的情况对于非布尔值进行与或运算时会对其转换为布尔值然后再运算并且返回原值
与运算 如果第一个值时true则必然返回第二个值如果第一个值时false则之间返回第一个值 或运算 如果第一个值是true直接返回第一个值如果第一个值是false则返回第二个值 //false false
//第一个为false了不用看第二个直接返回第一个
var result NaN 0;
console.log(result)
var c 0 NaN;
console.log(c)
//TRUE FALSE
//第一个是正确的那么整段逻辑表达式取决于第二个值所以它会直接返回第二个值
var a true false;
console.log(a);判断运算符
非数值的情况 对于非数值进行比较时会将其转换为数字然后再比较如果符号两侧都是字符串是不会将其转换为数字进行比较而是会分别比较字符串中字符的Unicode编码一个字符一个符的比
转义字符
在HTML中转义用#编码;在JS中用\u\代表转义u指明输出的字符集
h1 stylefont-size: 1000px aligncenter#9760;/h1var a \u2620;//\为转义u标明输出为unicode字符集
console.log(a);相等运算符
相等运算符用来比较两个值是否相等如果相等会返回true否则返回false 使用来做相等运算 用来比较两个值如果值的类型不同则会继续自动类型转换将其转换为相同的类型然后比较 不相等 不相等用来判断两个值是否不相等如果不相等返回true否则返回false使用来做不相等运算不相等也会对变量进行自动类型转换如果转换后相等则返回false不相等则返回true 全等 用来判断两个值是否相等它和相等类似不同的是它不会做自动类型转换如果两个值的类型不同直接返回false。 不全等 用来判断两个值是否不全等 和不等类似不同的是它也不会自动转换类型。如果两个值的类型不同直接返回true。 NaN不和任何值相等包括他本身。undefined衍生自null所以这两个值做相等判断时会返回true。我们在做变量值是否为NaN时不能用 而是用isNaN()函数。尽量不要用 来做严格判断类型不一样值一样也会返回true。
三目运算符
条件表达式语句1语句2
条件运算符在执行时首先对条件表达式进行求值如果条件的表达式的求值结果是一个非布尔值会将其 转换为布尔值然后再运算 如果该值为true则执行语句1并返回执行结果如果该值为false则执行语句2并返回执行结果
运算符优先级
运算符优先级
代码块
我们的程序由一条条语句构成的语句是按照自上而下的顺序一条条执行。在JS中可以使用{}来进行分组它们要么都执行要么都不执行。一个{}中的语句我们称为一个代码块在代码块后不需要写;了。JS的代码块只具有分组作用没有其他用途。
流程控制 和C一样一样的 if语句
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascriptvar age 50;/*if(age 60){alert(你已经退休了~~);}else{alert(你还没退休~~~);}*/age 200;/*if(age 100){alert(活着挺没意思的~~);}else if(age 80){alert(你也老大不小的了~~); }else if(age 60){alert(你也退休了~~);}else if(age 30){alert(你已经中年了~~);}else if(age 17){alert(你已经成年了);}else{alert(你还是个小孩子~~);}*/age 90;if(age 17 age 30){alert(你已经成年了);}else if(age 30 age 60){alert(你已经中年了);}else if(age 60 age 80){alert(你已经退休了);}else{alert(你岁数挺大的了~~);}/script/headbody/body
/htmlswitch语句
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript/** 条件分支语句也叫switch语句* 语法* switch(条件表达式){* case 表达式:* 语句...* break;* case 表达式:* 语句...* break;* default:* 语句...* break;* }* * 执行流程* switch...case..语句* 在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较* 如果比较结果为true则从当前case处开始执行代码。* 当前case后的所有的代码都会执行我们可以在case的后边跟着一个break关键字* 这样可以确保只会执行当前case后的语句而不会执行其他的case* 如果比较结果为false则继续向下比较* 如果所有的比较结果都为false则只执行default后的语句* * switch语句和if语句的功能实际上有重复的使用switch可以实现if的功能* 同样使用if也可以实现switch的功能所以我们使用时可以根据自己的习惯选择。*/num hello;switch(num){case 1:console.log(壹);//使用break可以来退出switch语句break;case 2:console.log(贰);break;case 3:console.log(叁);break;default:console.log(非法数字~~);break;}/script/headbody/body
/htmlwhile循环
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript/** 循环语句* 通过循环语句可以反复的执行一段代码多次* * while循环* - 语法* while(条件表达式){* 语句...* }* * - while语句在执行时* 先对条件表达式进行求值判断* 如果值为true则执行循环体* 循环体执行完毕以后继续对表达式进行判断* 如果为true则继续执行循环体以此类推* 如果值为false则终止循环* * do...while循环* - 语法* do{* 语句...* }while(条件表达式)* * - 执行流程* do...while语句在执行时会先执行循环体* 循环体执行完毕以后在对while后的条件表达式进行判断* 如果结果为true则继续执行循环体执行完毕继续判断以此类推* 如果结果为false则终止循环* * 实际上这两个语句功能类似不同的是while是先判断后执行* 而do...while会先执行后判断* do...while可以保证循环体至少执行一次* 而while不能*/var n 1;//向这种将条件表达式写死为true的循环叫做死循环//该循环不会停止除非浏览器关闭死循环在开发中慎用//可以使用break来终止循环/*while(true){alert(n);}*///创建一个循环往往需要三个步骤//1.创初始化一个变量var i 1;//2.在循环中设置一个条件表达式while(i 10){//3.定义一个更新表达式每次更新初始化变量document.write(i br /)}/script/headbody/body
/htmlfor循环
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript/** for语句也是一个循环语句也称为for循环* 在for循环中为我们提供了专门的位置用来放三个表达式* 1.初始化表达式* 2.条件表达式* 3.更新表达式* * for循环的语法* for(①初始化表达式;②条件表达式;④更新表达式){* ③语句...* }* * for循环的执行流程* ①执行初始化表达式初始化变量初始化表达式只会执行一次* ②执行条件表达式判断是否执行循环。* 如果为true则执行循环③* 如果为false终止循环* ④执行更新表达式更新表达式执行完毕继续重复②*/for(var i 0 ; i 10 ; i ){alert(i);}/** for循环中的三个部分都可以省略也可以写在外部* 如果在for循环中不写任何的表达式只写两个;* 此时循环是一个死循环会一直执行下去慎用* for(;;){alert(hello);}*/ /script/headbody/body
/htmlbreak和continue配合label
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript/** break关键字可以用来退出switch或循环语句* 不能在if语句中使用break和continue* break关键字会立即终止离他最近的那个循环语句*/for(var i0 ; i5 ; i){console.log(i);if(i 2){break;}}for(var i0 ; i5 ; i){console.log(外层循环i)for(var j0 ; j5; j){break;console.log(内层循环:j);}}/** 可以为循环语句创建一个label来标识当前的循环* label:循环语句* 使用break语句时可以在break后跟着一个label* 这样break将会结束指定的循环而不是最近的*/outer:for(var i0 ; i5 ; i){console.log(外层循环i)for(var j0 ; j5; j){break outer;console.log(内层循环:j);}}/** continue关键字可以用来跳过当次循环* 同样continue也是默认只会对离他最近的循环循环起作用*/for(var i0 ; i5 ; i){if(i2){continue;}console.log(i);}outer:for(var i0 ; i5 ; i){for(var j0 ; j5 ; j){continue;console.log(--j);}console.log(---i);}/script/headbody/body
/html
