JavaScript 基础01

184 阅读7分钟

开始了,从最简单的开始深入

云笔记也有,内容是一样的

js基础介绍--js是什么?

js:javascript 是直译型,弱类型的脚本语言。

  • 脚本语言 依赖其他程序
  • 弱类型 语法要求不严格,数据类型分类相对其他语言没有那么严格
  • 直译型 直接翻译

js的作用

  • js最早是为了解决表单验证的问题
  • js接收后端传来的数据
  • js给后端传数据(前后端交互)
  • 加强页面动画效果

js的引入方式

内部,外部,行内

内部js

<script> js代码 </script>

外部js

<script src="路径"></script>

行内

<body onclick="alert(666)"></body>

scrip写在最后面
  1. 先去找到这个对象,也就是div
  2. 然后对这个对象干点啥

三种输出语句

alert() 弹窗

document.write() 文档写入 只有这个方法识别标签

console.log() 用户看不到的,主要用于代码测试

js报错以后,后面的代码不会执行


alert()弹窗

alert 警告 页面弹窗效果

可以输入

数字 数字可以不打引号

字符串‘’ 字符串必须加引号,加了引号就是字符串

布尔值 true、false 不打引号

非数字(字符串) 必须打引号 单引号双引号都可以

可以识别空格

在js代码中,如果不输出,也就是没有对页面进行任何操作的时候,基本没啥用


js的write

document.write() 文档写入 可以识别标签

alert()弹窗 不在文档中,所以不识别标签,可以识别空格


js的console

document.write(666) document.write( '666')

document.write(666)
document.write( '666')

console 控制台

console.log(666)    蓝色的数字
console.log('666')  黑色的字符串
console.log(true)   蓝色布尔值

输出错误案例:

console.log(hehe);                    hehe is not defind
consol.log(888);                     consol is not defind 
console.logo(999);                 console.logo is not a function 
alerrt(33) ;                            alerrt is not defind 
document.writee(99);                document.writee is not a function 
console.log('999);                     invalid missing)

变量

变量:会改变的值

常量:不会改变的值

console.log('hehe') ; hehe常量


声明变量的方式

var x; x =1; 赋值
console.log(x) 1
x =2;
console.log(x) 2
x =3;
console.log(x) 3 
x ='haha';
console.log(x) haha 
x =true;
console.log(x) true

交换俩个变量的值

声明 var

赋值 = =是指把等号右边的值赋值给左边

变量不能加引号

var x ;
x= 1 ;
var y ;
y = 2 ;

交换x和y的值 x->2 y->1

x= y;×=2

y = x ;y = 2

拿一个空杯子

var z ;
Z= x ;
x=y ;
y = z ; //变量不能加引号
console.log(x);
console.log(y); 
console.log(a); // is not defined没有定义这个变量

变量的命名要求———底线

1,只能是数字,字母,下划线以及$

2,数字不能开头

3,不能使用关键字和保留字

关键字:js当中正在使用的具有特殊意义的单词

保留字:js将来肯定义为关键字的单词


变量命名规范———建议

1,不用拼音

2,建议使用驼峰命名或者组合

3,命名尽量做到见名知意

var var = 3 ;        
// user_name 组合命名
var user_name = '小花';
// 不推荐使用
var yong_hu_ming = '小花';
// 小驼峰
var userName = '小花'; 
// 大驼峰  不要使用 
var UserName = '小花';
var $a = 3 ;         
console.log($a);        
var _a = 2 ;         
var _var = 1 ;        
var _left = 1 ;        
var $left = 2 ;        
var x ;        
x = 1 ;        
var y = 2 ;        
var a , b ;       
var a = 1 , b = 2 ;

输出变量

  var p = 1 ; 
  // 变量输出时不能加引号
  // console.log(P);  
  // 区分带小写         
  var x = 1 , y = 2 ; 
  console.log(x , y);   // 可以写多个参数        
  alert(x , y);  // alert只有一个参数    
  document.write(x, y) ;  // 也可以有多个参数

数据类型

基本数据类型:数字 字符串 布尔值 null undefined

引用数据类型

基本数据类型的判断方法:typeof

var x= 1 ;                                            //js    //其他语司
console. log(typeof x);                       // number 数字    //int var y = 1.2 ;
console.log(typeof y);                        // number   // fLoat var user_name = 'yy" ;
console.log(typeof user_name);        // stringl /char var bool = true ;
console.log(typeof bool);                  // booLean var a ;
console.log(typeof a);                       // undefined 这种数据类型只有js有 var b = null ; 
console.log(typeof b);                       // object 空对象

数据类型之间的强制转化

其他数据类型转字符串(加“ ”)

数据类型之间可以相互转化

String()

把数字变成字符串

把布尔值转字符串

把nulL转字符串 'null'

把undefined转字符串 'undefined'

var x = 1 ;
console. log(x); // 1 
var str = String(×) ;
console.log(str); // ‘1’ 
var boo = true ;
var str2 = String(boo) ;
console.log(str2); // 'true' 
var n = null ; 
var str3 = String(n) ;
console.log(str3); //'nuLL' 
var u ;
var str3 = String(u);
console.log(str3); // 'uidefind'

其他数据类型转数字

Number()

字符串转数字

字符串都是数字 直接转数字

字符串包含非数字 NaN

空字符串和空格字符串都转为0

布尔值转数字

true 1

false 0

null 转数字 0

undefined 转数字 NaN

var str = '123' ;
var n= Number(str) ;
console.log(n); //123 

var str2 = "123q";
var m= Number(str2) ;
console.log(m); // NaN not a number不是一个数字 

var str3 = '' ;
var n2 = Number(str3) ;
console.log(n2);   // 0 

var str3 = ' ' ;
var n2 = Number(str3) ;
console.log(n2);   // 0 

var str3 = ' 1   ' ;
var n3 = Number(str3) ;
console.log(n3); //1 

var bool = false ;
var n4 = Number(bool) ;
console.log(n4); //0

var bool = null ;
var n4 = Number(bool) ;
console.log(n4); //0

var b ;
var n6 = Number(b) ; 
console.log(n6); //NaN

其他数据类型转布尔值

Boolean()

数字转布尔值

0;NaN为false,

其他数字都是true

字符转布尔值

字符串有东西就是 true

空字符串为 false

null 转布尔值 false

undefined 转布尔值 false

var x=2; 
var bool=Boolean(x);
console.log(bool);// true

字符串

带字母的字符串 ‘helLo'

纯数字字符串 '123'

数字

纯数字

带字母的数字NaN

var y = NaN ;
console.log(y); // NaN 
console. log(typeof y) ; // number 
var bool2 = Boolean(y) ; 
console.log(bool2); //false 
var str = 'hi' ;
var bool3 = Boolean(str);
console.log(bool3);//true
var str = "你好啊"; 
var bool3 = Boolean(str);
console.log(bool3);//false 
var n;
var bool3 = Boolean(n) ; 
console.log(bool3);//false

运算符

算数运算符

逻辑运算符

关系运算符

赋值运算符

比较运算符


算数运算符

+ - / %*

算术运算 只有数字

正常的数字 NaN Infinity

var x =1 +2 ;
var y = X+1 ;
var z = y -1 ;
var m= z* 2 ; 
var n = m/ 1 ;

1被除数 0除数 除数不能为0

var s = 1/0 ;
console.log(s); / / infinity无穷大

求余数 模

var a = 7 % 3 ; 
console.log(a);//1
var b = 3 %7 ;
console. log(b);//3 
var x = '1' ;
var y = 2 ; 
var z = x + y ;
console.log(z);//12

加号的俩种含义

遇到字符串就是拼接的意思

没有字符串就是求和的意思

var x = "hello’;
var y = " world " ;
console.log(x +y) ; //字符串拼接"hello world " 
var a = 1 ;
var b = 2 ; 
console.log(a + b); //数字求和 3 
var m = '1';
var n= 2 ; 
console.log(m + n); // 12字符串拼接 12 
var a1 = true ;
var a2 = false ;
console.1og(a1 + a2); //1  
var b1 = 'hi' ; 
var b2 = 2 ; 
console.log(b1 + b2);  // hi2

算数其他运算

只有数字可以做减法,乘法,除法,求模运算

var x = '23';
var y = 2 ;
consoLe.log(x-y); // 21 
var x = "hi" ;
var y = 2 ;
console.log(x * y); // NaN 
console. log(null + 2); // 2 
console.log(undefined + 2); // NaN
console.log(null + undefined); // NaN 
console.log(null + true); //1

隐式转化

其他转字符串

强制转化 String()

  • ' '

强制转化 Number()

-0 /1 *1 %更大的数

var x = 1 ; 
var str = X+' ';
consoLe.Log(str); //'1'
consoLe.Log (true +' '); //'true' 
var x = '123';
x= x-0 x =X/ 1 ;
x = x*1 ;
x=× % 100000000;
console.log(x); 
//123 
// 变量在使用的过程中,是值在做计算,不是变量在做计算 
// 变量只有通过赋值才会改变 
var m = '23' ;
var n = m * 1 ; 
// 看到的是m*1  实际上程序是先找到m对应的值,再做计算  '23'*1 
console.log(m);  // '23' 
console.log(n);  // 23

比较运算符

比较运算符 得到布尔值

'>

<

'>= 大于或等于

<= 小于或等于

==

===

!= 值不相等==反义词

!== 值或者数据类型不相等===反义词

大于或等于

小于或等于

等于== ===

关于等号

=赋值

==判断值相等

===值和数据类型都要相等

console. log( 3 >= 2);
console.log(3<= 3); //true
console. log( 3 >= 3); // true 
console. log( 3 == 3); // true 
console.1og(3 == '3'); // true 
console.1og(3 === '3'); //false

0< 10< 20

只有数学可以这么写

js不能这样写js没有连等式

consoLe.Log(e < 10< 2); 
// 解读:0< 10得到true true < 2得到true 
console.log(1 +2 +''); // '3'
//解读 
//1+2=3 
//3+''='3' 
console.log('" +1 + 2); 
//'12' 
//解读: 
//''+1='1' 
// '1'+2='12'

逻辑运算符

与 并且 多个条件同时满足 &&

或 只要有一个条件满足 ||

非 取反 !

逻辑与运算中 见假即假 见假就短路了

逻辑或运算中 见真即真 见真就短路了


赋值运算

=

+=

-=

*=

/=

%=

var x = 1 ; 
// x = x + 1 ;
x += 1 ;
var y = 2 ;
y *= 2 ;   
// y = y * 2 ; 
console.log(y); 
// 4 var m = '2' ;
m *= 1 ;

自增运算

++在前面,先自增再赋值,

++在后面,先赋值,再自增

++ 在后面

var x = 1 ;
x = x + 1 ;  
x += 1 ;   
x++ ; 
x = x ;
x = x + 1 ;  
console.log(x);  
var y = x++ ;   
//  y = x = 1 ;  
//  x = x + 1 = 2 ; 
console.log(y);  // 1   
console.log(x);  // 2

++在前

var m = 1 ; 
// ++m ;  
// m = m + 1 ;
m = m       
// console.log(m); // 2  
var n = ++ m ;    
//  m = m + 1 ;   
//  n = m       
console.log(n);  // 2      
console.log(m);  // 2
var a = 2 ;
var b = a++ + a ;
a++ 2 a=3 2 + 3 = 5
console.log(b); 
var c = ++a + a ;
// ++a a=3 3 
// 3 + 3 
console.log(c);
var d = a++ + ++a + a;   
// a++  2  a=3       
// ++a  a=4 4       
// 2+4   
console.log(d);

第一天的笔记 整理结束

看到最后,可以自我检测一下知识点有没有get 到~~~

题目
      1 页面的三种输出
        
        
        
      2 基本数据类型
        
        
      3 变量命名的要求和规范
        
        
        
      4 判断数据类型的方法 
      
      
      5  数据类型的强制转化  
      
      
      6  逻辑运算的短路操作
         
         
         
      7 算术运算符的隐式转化
      

粗略答案:

image.png

今天的分享就到这,觉得好就~

image.png

结束