JavaScript (一) js的介绍及基本语法变量
个人博客网:https://wushaopei.github.io/ (你想要这里多有)
一、JS 的 介绍
1、JavaScript :简称 : js
js 分为三个部分:
1. ECMAScript 标准----js的基本的语法
2. DOM------Document Object Model 文档对象模型
3. BOM------Browser Object Model 浏览器对象模型
2、JavaScript 是什么?
①语言类型
是一门脚本语言,
是一门解释性语言,
是一门动态类型的语言,
是一门基于对象的语言。
②编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行
* 脚本语言:不需要编译,直接执行
* 常见的脚本语言:t-sql,cmd
③ 硬件与 js 的关系
电脑的硬件---->系统--->客户端的程序--->代码
电脑的硬件---->系统--->浏览器--->js代码
④ js的作用
解决用户和浏览器之间的交互的问题
在实际开发中的角色:
HTML:是标记语言,展示数据的
CSS:美化页面
JavaScript:用户和浏览器交互,
示例:
<script>
//js的代码了
alert("哈哈,我又变帅了");//在页面中弹出一个对话框
</script>
效果展示:
3、js 的 代码可以分三个地方写:
①在html 的文件中,script 的标签中写 js代码
<head>
<script>
//js代码
alert("锄禾日当午,地雷埋下土,小苏走过去,炸成二百五");//在页面中弹出对话框
</script>
</head>
②js 代码可以在html 的标签中写
<input type="button" value="按钮" onclick="alert('被点了');"/>
③在 js 文件中可以写 js 代码,但是需要在html 的页面中引入 script 的标签中的 src = " js 的路径 "
<script src="test.js"></script>
test.js 中的 js 代码 :
alert("我是外部的js文件中的代码");
执行效果:
4、js 代码的注意问题
1.在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行
2.如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行
3.script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以
但是,目前在我们的html页面中,type和language都可以省略,原因:html是遵循h5的标准
4.有可能会出现这种情况:script标签中可能同时出现type和language的写法.
5.script标签在页面中可以出现多对
6.script标签一般是放在body的标签的最后的,有的时候会在head标签中
7.如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码
1 和 2 的问题示例:
alert("哈哈; //少了一个括号,不执行
alert("嘎嘎"); // 正常执行
3 和 4 和 5 的实例:
<script type="text/javascript">
alert("又弹出来了");
</script>
<script type="text/javascript">
alert("又执行了");
</script>
6 和 7 的示例:
<body>
<script src="test.js"></script>
</body>
二、变量
1、变量的定义与内存地址:
①操作的数据都是在内存中操作
②js中存储数据使用变量的方式(名字,值--->数据)
③js中声明变量都用var---->存储数据,数据应该有对应的数据类型
④js中的字符串类型的值都用双引号或者单引号
示例---变量的声明与赋值:
//存储一个数字10
// 变量的声明及赋值
var num=10;
// 存储一个名字
var name='小黑';
2、变量的作用于初始化、声明:
①作用:
用来操作数据的(可以存储,可以读取)
②变量声明: 有 var 有变量名字,没有赋值
③变量初始化: 有var 有变量名字,有赋值
- 变量声明的方式:
var 变量名字;
- 声明与赋值:
var number;//变量的声明,此时是没有赋值的
//一次性声明多个变量
var x,yx,z,k,j;//都是声明,没有赋值
//变量的初始化(变量声明的同时并且赋值了)
= 的意义: 赋值的意义
- 初始化、声明示例:
// 存储一个数字10
var number = 10;
console.log(number);
//存储一个5
var number2 = 5;
console.log(number2);
//存储一个人的名字
var name = "文兴";
console.log(name);
//存储真 (true)
var boolean = true;
console.log(boolean);
//存储一个null --- > 相当于是空
var nll = null;
console.log(nll);
//存储一个对象
var obj = new Object();
console.log(obj);
浏览器查看效果:
3、变量的规范与注意问题:
①注意的基本的代码的规范
js中声明变量都用var
js中的每一行代码结束都应该有分号;(写代码有分号的习惯)
js中的大小写是区分的: var N=10; n
js中的字符串可以使用单引号,也可以使用双引号,目前我们暂时使用双引号
②变量名的注意问题---变量名的命名规范,要遵循驼峰命名法
1.变量的名字要有意义,
2.变量名有一定的规范:一般以字母,$符号,下划线开头,中间或者后面可以有$符号,字母,数字
3.变量名一般都是小写的
4.变量名如果是多个单词,第一个单词的首字母是小写的,后面的所有的单词的首字母都是大写的,这种命名方式称为:驼峰命名法
5.不能使用关键字(系统自带的一些单词,不能使用)
6.不会单词用拼音,拼音也要遵循驼峰命名法
示例:
(1)声明变量并初始化---变量的初始化----声明变量赋值
//声明了一个num的变量存储了一个数字100
var num = 100;
//输出这个变量的值
alert(num);//弹框
//浏览器的控制台在浏览器中的开发人员工具中(快捷键:F12)的console的选项中
console.log(num);//把内容输出在浏览器的控制台中
效果截图:
(2)声明多个变量然后一个一个的赋值
var num1,num2,num3;//声明
//一次的赋值
num1=10;
num2=20;
num3=30;
//声明多个变量并且赋值
// var num1=10,num2=20;num3=30;
4、变量的交换:
(1)扩展的变量的交换:只需要看代码,不需要理解---位运算
var num1 = 10;
var num2 = 20;
//把num1 这个变量的值取出来放在 temp 变量中
var temp = num1;
// 把 num2 这个变量的值取出来放在 num1 变量中
num1 = num2;
// 把 temp 变量的值取出来放在num2 变量中
num2 = temp ;
console.log(num1); // 20
console.log(num2); // 10
(2)第二种方式交换:一般适用于数字的交换
var num1 = 10;
var num2 = 20;
// //把num1的变量中的值和num2变量中的值,取出来相加,重新赋值给num1这个变量
num1 = num1 + num2 ; //30
// //num1变量的值和num2变量的值取出来,相减的结果重新赋值给num2
num2 = num1 - num2; //10
// //num1变量的值和num2变量的值取出来,相减的结果重新赋值给num1
num1 = num1 - num2; //20
console.log(num1,num2);
(3)扩展的变量的交换:了解 ---位运算
var num1 = 10;
var num2 = 20;
num1 = num1 ^ num2;
num2 = num1 ^ num2;
num1 = num1 ^ num2;
console.log(num1,num2);
5、快件键:
- 快捷键 : Ctrl+Alt+L----->格式化代码的(设置代码有很好的格式,代码是错误的,这个快捷键是没有效果)
三、注释
注释 : 是解释代码的含义,给其他的程序员看的
注释的方式:
1.单行注释 //
2.多行注释 /★★/
说明:
// 单行注释:一般用在一行代码的上面
/* 多行注释:一般是用在函数或者是一段代码的上面*/// 代码中如果没有注释,不规范,天天会被骂醒
// 注释后的代码不执行了
示例:
//console.log("哈哈,我又变帅了");
//console.log("第二行");
四、JS 的 数据类型
1、JS 的 数据类型有哪些?
js中的原始数据类型:number,string,boolean,null,undefined,object
- 说明:
number:数字类型(整数和小数)
string:字符串类型(的值一般都是用单引号或者是双引号括起来) "34"
boolean:布尔类型(值只有两个,true(真1),false(假0))
null:空类型,值只有一个:null,一个对象指向为空了,此时可以赋值为null
undefined:未定义,值只有一个:undefined
- 什么情况下的结果是undefined
变量声明了,没有赋值,结果是undefined
函数没有明确返回值,如果接收了,结果也是undefined
- 注意:
如果一个变量的结果是undefined和一个数字进行计算,结果:NaN不是一个数字,也没有意义
2、如何获取这个变量的数据类型是什么?
使用typeof 来获取
语法:
typeof 变量名
typeof(变量名)
3、数据类型 - - - 示例:
var num = 10;
var str = "文";
var flag = true;
var nll = null;
var undef;
var obj = new Object();
console.log(typeof num);
console.log(typeof str);
console.log(typeof flag);
console.log(typeof nll);
console.log(typeof undef);
console.log(typeof obj);
console.log(typeof num);
console.log("10");
console.log(10);
4、数字类型: 整数和小数
num=20;整数
num=98.76;小数(其他的语言中,浮点型---单精度,双精度浮点)
所有的数字都是属于number类型
其他的语言:
整数类型:int
单精度浮点型:float
双精度浮点型:double
(1)数字进制:
二进制:遇到2进一
00000001-----1
00000010-----2
00000011-----3
00000100-----4
00000101----5
00000110----6
00000111-----7
00001000-----8
00001001----9
八进制:遇到8进一
00000001
00000002
00000003
00000004
00000005
00000006
00000007
00000010-----8
00000011-----9
00000012-----10
十进制:遇到10进一
0
1
2
3
4
5
6
7
8
9
10
十六进制:遇到f进一
00000001
00000002
00000003
00000004
00000005
00000006
00000007
00000008
00000009
0000000a----10
0000000b---11
0000000c----12
0000000d---13
0000000e---14
0000000f---15
00000010---16
00000011---17
00000012---18
0f12a
(2) 示例:
js中可以表示的进制有:
var num=10;//十进制
var num2=012;//八进制
var num3=0x123;//十六进制
var num=12;//十进制
console.log(num);
var num2=012;//八进制
console.log(num2);
var num3=0x1a;//十六进制
console.log(num3);
(3)数字类型 的 范围 及 验证方式:
①范围 --- 最值:
//数字类型有范围: 最小值和最大值
console.log(Number.MAX_VALUE);//数字的最大值
console.log(Number.MIN_VALUE);//数字的最小值
②验证: NaN 、isNaN
- 不要用小数去验证小数.
var x=0.1;
var y=0.2;
var sum=x+y;
console.log(sum==0.3);
- 不要用小数去验证小数.
var x=0.1;
var y=0.2;
var sum=x+y;
console.log(sum==0.3);
- 不要用NaN验证是不是NaN
var num;
console.log(num+10==NaN);
console.log("您好"=="我好");
- 正确的验证方式:使用 isNaN()
var num;//-----变量声明了,没有赋值,结果是:undefined
//是不是不是一个数字----->不是一个数字吗? NaN--->不是一个数字
console.log(isNaN(10));
示例:判断结果不是一个数字可以使用isNaN(变量名)
var str="您好";
var num;
var sum=num+10;//NaN
console.log(sum);
console.log(isNaN(sum));//不是数字为true,是数字结果为false
5、布尔类型
- 布尔类型:的值有两个,一个是true(真),一个是false(假)
var flag=1;
console.log(flag);
var fdf=null;
var num=0;
6、类型转换
主要有两种:① 转换为数字类型、②转换为字符串类型、③其他类型转布尔类型
(1) 其他类型转数字类型: 三种方式:
1.parseInt();//转整数
console.log(parseInt("10"));//10
console.log(parseInt("10afrswfdsf"));//10
console.log(parseInt("g10"));//NaN
console.log(parseInt("1fds0"));//1
console.log(parseInt("10.98"));//10
console.log(parseInt("10.98fdsfd"));//10
2.parseFloat()//转小数
console.log(parseFloat("10"));//10
console.log(parseFloat("10afrswfdsf"));//10
console.log(parseFloat("g10"));//NaN
console.log(parseFloat("1fds0"));//1
console.log(parseFloat("10.98"));//10.98
console.log(parseFloat("10.98fdsfd"));//10.98
3.Number();//转数字
console.log(Number("10"));//10
console.log(Number("10afrswfdsf"));//NaN
console.log(Number("g10"));//NaN
console.log(Number("1fds0"));//NaN
console.log(Number("10.98"));//10.98
console.log(Number("10.98fdsfd"));//NaN
总结 : 想要转整数用parseInt() , 想要转小数用parseFloat()
注意 : 想要转数字:Number();要比上面的两种方式严格
(2)其他类型转字符串类型
1 .toString()
var num=10;
console.log(num.toString());//字符串类型
2 String();
var num1=20;
console.log(String(num1));
注意:
如果变量有意义调用.toString()使用转换
如果变量没有意义使用String()转换
<script>
var num2;
console.log(num2.toString());
var num3=null;
console.log(num3.toString());
//这个可以
var num2;
console.log(String(num2));
var num3=null;
console.log(String(num3));
</script>
(3)其他类型转布尔类型
<script>
Boolean(值);
console.log(Boolean(1));//true
console.log(Boolean(0));//false
console.log(Boolean(11));//true
console.log(Boolean(-10));//true
console.log(Boolean("哈哈"));//true
console.log(Boolean(""));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
var str=10;
console.log(+str);
</script>
最新文章
- 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架(二)
- 配置TFS2010的用户截图
- 关于斐波拉契数列(Fibonacci)
- StringBuilder与StringBuffer的区别(转)
- iOS中的网络请求 和 网络监测
- Maya QT interfaces in a class
- Java中的流程控制(一)
- [BZOJ4008]亚瑟王
- Mac OSX下Sublime Text配置使用Ctags实现代码跳转
- 简单认识一下什么是vue-router
- 持续集成配置之Nuget
- Swift闭包(I) @autoclosure和@escaping的区别
- 当超强台风“山竹”即将冲进南海,Power BI 你怎么看?
- PowerDesigner最基础的使用方法入门学习(一)
- 基于jquery横向手风琴效果
- SQL SERVER 2008 R2安全配置与防暴力破解
- MySQL(存储过程,支持事务操作)
- Apache Commons工具集简介
- ADF控件ID变化引发JS无法定位控件的解决方法
- nohup、&、setsid、fork和fg、bg究竟有啥区别?