JavaScript

 第一章

JS的三大组成

第一部分:核心语法  (JS代码)
第二部分:DOM文档对象模型  (JS可以控制HTML元素进行相关的操作)
第三部分:BOM 浏览器对象模型(JS可以控制浏览器元素进行相关的操作)
JS的特点

简单易用 (只需要用户安装浏览器即可使用)
跨平台    和上述一样。
支持面向对象
JS常见的开发工具

常见的两大开发工具
VSCode
HBuilderX
优点
1什么语言都可以用它编写
1.专注于前台设计
缺点
1.第一个优点导致的问题:界面设计不合理,安装的插件需要很多。需要联网等
2.功能较少
怎么使用HBuilderX

下载安装包并解压,将HbuilderX.exe生成快捷方式在桌面。
左上角:文件---新建---项目---普通项目---项目名称---存储路径---基本HTML项目
案例一:弹出警告框

打开网页,弹出一个警告框提示用户“请输入正确格式”;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
我的第一个HTML页面
<script>
alert("请输入正确的格式");
</script>
</body>
</html>
案例一 总结分析:

总结1:JS代码必须放在<script>标签内部。
总结2:script不能交叉嵌套。
总结3:script标签的摆放的顺序可以随意。但是推荐放在body标签内部的最下方。
HTML页面书写JS代码的常见两种方式

嵌入式:就是刚刚讲解的方法。将JS代码放在script标签中,将script标签放在HTML页面中。(和CSS代码很类似)适用于:JS代码较少。不会影响到我们阅读HTML代码。
外链式:适用于JS代码非常多,不适合放在HTML页面中,不然导致不方便阅读HTML代码。
如何使用外链式:

也是在适当的位置(body标签的最低部)引入script标签。
禁止在标签内部书写JS代码了
创建一个外部的JS文件了(后缀为.js文件)
这个外部js文件,就不要放script标签了。直接写代码
在A步骤中添加src=”xxx.js”路径即可使用。
JS最基础的几行代码

alert(“xxx”);作用:生成一个警告的弹窗
prompt(“xxxx”); 生成一个询问框,用户可以输入值。然后点击确定和取消。
点击确定:JS需要收集用户输入的信息(第二章讲解)。点击取消:无事发生。
confirm(“xxx”); 生成一个询问框,但是不需要输入,只需要选择确定或取消。
      以上三个就是JS内置的3个弹窗。(只有3个)
      根据不同场合使用不同的弹窗。
document.write(“xxxx”); 作用:在HTML页面输入一段内容。一般使用场景:用户执行了什么操作,才会显示什么内容。
console.log(“xxx”); 需要按一下F12才能打开浏览器的控制台。常用于调试BUG。、
第一章的注意事项

转义符:如果遇到特殊符号:需要对其进行转义操作。
/是斜杠,挨着shift的
\是反斜杠:挨着回车上面的   作为转义符使用。
JS中的注释

分为单行注释:  //xxx

多行注释:
/*
Xxx
Xxx
*/
第二章

JS变量

什么是变量:经常改变的量。
变量是程序在内存中申请的一块用来存放数据的空间。
变量由变量名和变量值组成,通过变量名可以访问变量的值。

回顾:Java的变量名的命名规则:
1.不能以数字开头
2.不能使用关键字(Java或JavaScript中自带的相关属性或方法。)
3.严格区分大小写
4.只能够由  数字  字母   下划线  $ 符号组成
5.见名知意  例如age   name  而不是 a  b  c  d
6.推荐使用驼峰命名法,例如studentName

正课:JS的变量名的命名规则,和Java完全一致。

下面哪个变量名式合法的。
number       合法、
88shout      不合法,数字开头
myScore      合法
&num         不合法
var          不合法  关键字
it123        合法 但是不推荐
$tuition     合法


常见的关键字:
if      else      switch   for    class  
do      while     case     break  contiue
return   default    new      var    void


预留关键字:现在还没有自带,但是未来有,已经提前预留了。
implements    package   public  interface

如何声明变量

扫盲: var 是varible(翻译:变量) 的缩学

回顾:Java是如何声明变量的:   数据类型   变量名   =   变量值   ; 
js如何声明变量:      var 变量名   =   变量值   ; 
潜台词:不管JS是什么数据类型,都用var.

JS中声明变量的2种方式:
1.先声明再赋值.例如:
var num ;
num = 10;
2.声明的同时也赋值,例如:
var age  = 20;


​​​​​​​
js基本数据类型 

回顾:Java中的数据类型分类:
A.基本数据类型
B.引用数据类型

Java中的基本数据类型:
1字节:byte  boolean
2字节:char  short
4字节: int   float
8字节:long  double
Java中的引用数据类型:
String   数组(Array)  任何Class,不管是你写的类还是JAVA自带的类。  

JavaScript的基本数据类型:
number  注意:number是数据类型但不是关键字
string  注意:string在java是引用,在JS是基本
boolean
null
undefined   
bigint
symbol

JavaScript的引用数据类型:
数组  Object  函数(方法) 等等
boolean,string和number

boolean读布尔
js的boolean和java的boolean完全一致
体现在:都是基本数据类型  都只有true和false
意义:用程序表示一件事成功或者失败,或表示一个条件成立或不成立。
JavaScript中严格区分大小写,因此true和false值只有全部为小写时才表示布尔型。

 


js中的number(读数值类型)讲解
一句话总结:即可以存放小数,也可以存储整数
var a = 123;
var b = 12.5;
a和b都是number类型.没有加引号


js中的string(读字符类型)讲解
这里要注意:
js的String和java的String不同之处1:
string在java是引用,在JS是基本
js的String和java的String不同之处2:
string在java中通过双引号声明
string在js  中既可以通过双引号也可以通过单引号声明
例如:
var str1 = "你好";
var str2 = '我好';
以上都是string的写法
转义符的使用

我想在页面输出:   你好,我的外号是"大聪明";
 document.write("你好,我的外号是"大聪明";");写法是错误的.不能同时存在多个双引号
做法1:我们需要知道  单引号里面可以包着双引号
 document.write('你好,我的外号是"大聪明";');
做法2:通过转义符--  反斜杠(enter上面的):\  斜杠:/ (shift左边的)
document.write("你好,我的外号是\"大聪明\";");


null和underfined

 null 表示空的意思 例如:
var str = null;
null的注意事项:没有任何属性或方法可言


undefined 表示未定义的意思 只声明了变量但是未赋值
例如:
var str123 ;//这个str123就是undefined
bigint和symbol

bigint 翻译:大数值
如果存在需求需要计算很大很大(不用去记,因为很大。)数字,那么number将无法实现
例如:下面的number绰绰有余
 var num1 = 1111111;
 var num2 = 2222222;
 console.log(num1+num2);
 var num1 = 11111111111111111111;//number
 var num2 = 11111111111111111111;//number
 console.log(num1+num2);//计算结果出现了误差
所以就需要借助于bigint
bigint类声明方法:
 var num3 = 1111111111111111111n;//只需要在最后加n即可
var num4 = 1111111111111111111n;//只需要在最后加n即可
 console.log(num3+num4);

symbol讲解:略 常用于独一无二的对象.
数据类型检查

以上写法:是我们可以看到的.所以可以知道是什么类型.
缺点但是1:不方便在控制台得知是什么类型


例如我们第一章节学习的prompt语法
 var money = prompt("请输入你的金额");//通过money变量接受用户在前台输入的值
 console.log(money);//所需我们就要学习如何识别xx变量是什么类型
总结:prompt的返回值都是string


如何判断一个变量是什么类型
语法:  typeof xxx 返回是一个数据类型
var str = 123;
console.log( typeof str);//number
str = "123";
console.log( typeof str);//string
类型数据转换

为什么要学习数据类型转换?
 var num1 = prompt("请输入第一个数");
 var num2 = prompt("请输入第二个数");
alert("两数之和为" + (num1 + num2));//这种写法是错误的  
原因:prompt返回的是一个string类型,两个string类型相加,是以拼接的形式


如何将字符串转成number类型.
// parseInt()
// parseFloat()
// Number()

parseInt 将一个字符串类型的数字解析成整数
 alert( parseInt("11.12")  );//11
 alert( parseInt("11.99")  );//11   总结1小数后面直接省略,不会四舍五入
 alert( parseInt("11.a12")  );//11     总结2小数后面直接省略
 alert( parseInt("11a.a12")  );//11    总结3:解析顺序从左到右,解析到非数字就停止.
 alert( parseInt("1a1a.a12")  );//1    总结4:只需要记住总结3
 alert( parseInt("a11a.a12")  );//NaN      NAN 翻译: not a   numnber  不是一个数字


parseFloat()和上面的语法完全一致,唯一区别保留小数
console.log(  parseFloat("11.11") );//11.11
console.log(  parseFloat("11.11a") );//11.11
console.log(  parseFloat("11.1a1a") );//11.1
console.log(  parseFloat("11a.11") );//11
console.log(  parseFloat("a11.11") );//NAN
console.log(  parseFloat("11.a") );//11   

Number()只能将真正的数字解析
console.log(  Number("11.11") );//11.11
console.log(  Number("11") );//11
console.log(  Number("11") );//NAN

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值