JavaScript 基础

最新推荐文章于 2023-08-18 15:13:16 发布

zy13955413303

最新推荐文章于 2023-08-18 15:13:16 发布

阅读量318

点赞数

JavaScript 基础

引用方式
语法关键词保留字
数据类型

应用领域

页面的交互效果比如轮播选项卡淘宝放大镜
页面的局部刷新不需要手动刷新网页比如股票网站天气预报
vue.js react.js
混合app webapp

引用方式

js 是 JavaScript 的简称只要你有浏览器就可以运行js

行内

<a href="javascript:函数名" ">test</a>
<a href="#" onclick="alert('1234')">test</a>

内联
可以放head 也可以放 body 注意执行顺序问题

<script type="text/javascript">
            alert('123');
</script>

外链

<script type="text/javascript" src="js/test.js"> 标签内部不能写内容 
</script>

语法

严格区分大小写 test Text
每一行语句结束的时候必须加；
虽然js是弱类型语言如果语句单独一行 var box=123 不加分号不报错
但是 var box=123 var test=456；这个时候box不加；分号就报错

要求: 不管在不在一行上只要语句结束必须加分号

标识符

变量、函数名字、属性的名字函数的参数

标识符命名规则:

第一个字母必须是字母、下划线、$
第一个字母不能是数字 1abc 错
其它字符可以是字母数字下划线$
不能用关键字保留字命名

变量命名

var test123;  只声明  不赋值  
alert(test123); 会弹出  undefined  未定义  

var test=123; 声明并赋值  
alert(test);

var box = test;隐式声明  将test的值赋给 box  
alert(box) #123
= 赋值的意思   

var a=123,b=456,c=789; 同时声明多个变量

注释

// 单行注释    
/*多行注释*/

js 内容输出方式

alert()
- 弹出字面量 alert(10)
- 什么是字面量
  - 100 数值
  - ‘libai’ 字符串
  - null 空
  - true false 布尔
  - /js/
- 弹出变量
document.write() 将内容输出到页面上不弹窗
console.log() 控制台显示不显示在页面上也不弹窗一般程序员测试常用
每一行代码结束加；号

错误类型

Uncaught SyntaxError: Invalid or unexpected token   语法错误   
404 找不到的意思  你的文件引入路径有问题 导致找不到  
Uncaught ReferenceError: kangbazi is not defined 变量不存在

## 数据类型

undefined 未定义
null 空
boolean 布尔类型
string 字符串
number 类型
object 类型对象
function类型
typeof 查看数据类型

typeof 写法 typeof 空格变量名

var test = 123;
test = '123';
console.log(typeof test) 返回 number 
console.log(typeof test) 返回 string

undefined

var test; 这个叫只声明 没有赋值  赋值也叫做初始化  console.log(test);返回 undefined   
console.log(kangbazi);返回 Uncaught ReferenceError: kangbazi is not defined

未初始化、不存在的变量区别:

未初始化是声明了但是没有赋值

不存在就是直接没声明

null 是一个特殊的对象（object）类型

var box = null;
console.log(typeof box);返回 object

一般用它来做判断用 

var box = null;
if(box != null){
alert('对象已经存在');
}else{
alert('对象不存在');
}

undefined 是从null 派生出来的

= 赋值 == 值相等返回的结果是 true 和false === 表示值和类型都相等 true 和false

var test = 123;

var box = ‘123’;

test == box true

test === box false

var box; //undefined
var test = null; //null
console.log(undefined == null); //true

boolean类型

两个字面量 true 和false true 不一定等于1 false 不一定等于0 js 严格区分大小写 true和false 必须是小写

True Flase 都不是 boolean 类型的值

var box = true;
console.log(typeof box); 返回boolean 


var test = 'hello,world';
var test1 = Boolean(test);
alert(typeof test); string
alert(typeof test1); boolean 
其它类型的都可以通过  Boolean转化为 boolean类型  
        var test = 'hello'; 执行true
        var test = '';  空字符串 执行false 
        第一步首相将 test 由string类型转化成boolean类型 
        if(test){
            alert('如果条件为true执行我');
        }else{
            alert('如果条件为false 执行我');
        }

其它类型转成 boolean 类型的规则重要

数据类型	转成true的情况	转成false的情况
boolean	true	false
string	任何非空字符串	空字符串
number	任何非零数值包括无穷大	NaN (not a number)、 0
object	任何对象	null
undefined		undefined

number类型

number包含两周类型:

整型
浮点型

var box = 100; 最基本的数值字面量 是十进制的整数    

二进制  0~1 
八进制  0~7 
16进制  0~9 A~F 
十进制 0~9

八进制整数在js中 0开头的表示八进制

var box = 017;
var box = 070; 56
box = 08;    无效八进制  直接返回8 
box = 010;   返回8

十六进制以 0x开头

var box  = 0xA; 返回10
          0x1f；返回31

浮点类型最高精度 17位算术运算不是100%精确

console.log(0.1+0.2) //0.30000000000000004 写代码的时候注意判断一下

    var box = 8.17;
    box =  .8; 不爆错 但是 不能这么写 

    var box = 8.16e10;//相当于 8.16乘以 10的10次方     指数次幂 
    box = 8.16e-5;

    查看浮点类型的范围   
        alert(Number.MAX_VALUE); 最大值
        alert(Number.MIN_VALUE); 最小值  

    var box = 100e1000; //Infinity 无穷大 
        box = -100e1000; //-Infinity 无穷小 

        var box = 100e1000;
        alert(box < Number.MAX_VALUE);

NaN

var box = 0/0;
alert(box);  //NaN
var box = 10/0;  //Infinity 
var box = 10/0*0;  //NaN

alert(Number.NaN);  //NaN

任何与NaN运算的结果肯定是 NaN 
alert(NaN+1); //NaN

alert(NaN == NaN); //NaN自己也不相等   返回false 

判断一个值 是否是NaN 系统提供了一个函数    isNaN() 是NaN返回true  'abc' 否则false 123   

alert(isNaN('123'));//'123'可以转成数值123 所以不是NaN 返回false
alert(isNaN('abc')); // abc不能转化成数值 所以是NaN 返回true 
alert(isNaN(true));//因为 true 会转化成1 1不是NAN 所以返回false 
alert(isNaN(NaN));//返回true

非数值转成数值

Number() 注意大小写
parseInt()
parseFloat()

Number()

alert(Number(true));//1
alert(Number('123'));//123
alert(Number(null));//0
alert(Number(undefined)); //NaN*/
alert(Number(25));//25
alert(Number('070'));//70 去掉0
alert(Number('456'));//456
alert(Number('08.90'));//去掉0 8.9 
alert(Number(''));//0*/
alert(Number('abc123'));//NaN
alert(Number('123abc'));//NaN

parseInt()

console.log(parseInt('0xA')); //10
console.log(parseInt('AF')); //NaN
console.log(parseInt('AF',16)); //175
console.log(parseInt('0xAGao'));//Gao给多虑掉了 10
console.log(parseInt('123ABC'));//123 ABC被过滤掉
console.log(parseInt('ABC123'));//开始是个ABC 就停止 直接返回NaN
console.log(parseInt('123ABC123'));//123到ABC就停止  
console.log(parseInt('12.13'));//12 遇到.停止 
console.log(parseInt(''));//NaN
console.log(parseInt('070'));//70
console.log(parseInt('101010'));//101010
console.log(parseInt('101010',2));//42 以2进制转化 最后转成10进制 
console.log(parseInt('070',8));//56

parseFloat()

console.log(parseFloat('123abc'));//123
console.log(parseFloat('0xA'));//0 不认16进制 
console.log(parseFloat('12.3.4'));//12.3
console.log(parseFloat('0123.45'));//123.45 0忽略掉
console.log(parseFloat('1.23e7'));//12300000

string类型字符串

原字符串永不改变会生成新的结果给你

单引号 ”
双引号 “”
单引号包裹双引号双引号包裹单引号绝对不能穿插使用

var box = '123';
    box = "test";效果一样 
    test = ' "str"';
    '" 报错

特殊字符	说明
\n	换行
\b	空格
\r	回车
\t	制表

拼接字符串 +

var test = 'kangbazi';
test = test + "1806";
console.log(test);

值转化成字符串

变量.toString() undefined null 报错

var box = true;
console.log(typeof box); //boolean
console.log(typeof box.toString()); //string 
alert(typeof box.toString());//10
console.log(box.toString(2)); //先将10转成2进制然后转成字符串
console.log(box.toString(8));//12
console.log(box.toString(10));//10
console.log(box.toString(16));//a

String(变量) 任意类型都可以转化包括 undefined null

var box;
//console.log(box.toString()); //报错
console.log(String(box));//undefined

var test=null;
//console.log(test.toString()); //保存 
console.log(String(test)); //null

object 类型

数组和对象统称为 object

var test = [1,2,3,4,5];
alert(typeof test);//object

var box = new Object();

var box = new Object(10);//对象类型 值是10
var age = box + 100;
console.log(age);  //110

new Object()
new Number()
new String()
new Boolean()

        var box = new Number();
        console.log(typeof box);

        var box1 = new String();
        console.log(typeof box1);

        var box2 = new Boolean();
        console.log(typeof box2);

以上知道对象是这么命名就可以后期又详细的解释

数据类型分类:

基本类型
- string number boolean undefined null function 栈内存中
引用类型
- object 堆内存中

运算符

表达式
一元运算符
算术运算符
逻辑运算符
关系运算符
位运算符
赋值运算符
其它运算符
优先级

表达式

就是字面量或者变量

56 
true 
'abc'
//正则表达式   
var box；

box + 1 
typeof(box)
box>100

一元运算符

var box =100;
box++ 相当于  box = box+1；
++box;
box++;
--box;
box--;

var box = 100;
box = box +１;
console.log(box++);//100       101
console.log(++box);//102       102 
console.log(box--);//102       101
console.log(--box);//100       100

前置运算先赋值后运算

box++; 
box--;

后置运算先运算后赋值

++box;
--box;

思考？

var a=10;
var b=a++---a;
console.log(a);
console.log（b）；
第一步:先赋值a  也就是把10先拿出来   
第二步:a+1     a的值变成了 11 
第三步 先运算a-1 a的值变成了 10  
第四步 : 将拿出来的10 - 10 
结果0

var a=5;
b = ++a + a++; b=12
    6     6    a = 7
c = b-- - --b;   b=10 c=2
    12    10

其它类型一元运算符的应用

var box = '123';//先把字符串转化成数值 
box = 'abc';   //NaN
box = false; //将false转化成0
box = 1.2; 


+
var box=100;
box='100'; //先把100转成数值
box='abc';//NaN
console.log(+box);

-

var box=100;
//box='100'; //先把100转成数值
//box='abc';//NaN
console.log(-box);

算术运算符 true 转为1 false 0 空字符串转化为 0 null 0

NaN跟任何值运算都得NaN

1+2 
1+NaN //NaN
Infinity+Infinity //Infinity
-Infinity-Infinity//-Infinity
Infinity+-Infinity //NaN 

var box = 'test';
console.log(100+box); //只要有字符串 就是拼接  100test
box='100';
console.log(100+box); //100100 由字符串就不是加法 
console.log('您的余额是'+10+2000);//您的余额是102000
console.log('您的余额是'+(10+2000));//您的余额是2010
console.log(10+2000+'您的余额');//2010您的余额


    var box = new Object();
    console.log(100-true);//99 将true转化为1 
    console.log(100-'');//100将空字符串转化为0
    console.log(100-'60');//40 将字符串60 转为60 
    console.log(100-box);//NaN

关系运算符返回的结果是boolean类型

运算符	说明
>
<
=
!=
=
<=
==
===
!==

console.log(undefined == null);//true
console.log('NaN'== NaN);//false
console.log(5== NaN);//false
console.log(NaN== NaN);//false
console.log(0 == false);//true
console.log(1 == true);//true
console.log(0 == undefined);//false
console.log(0 == null);//false
console.log(1 == '1');//true
console.log(1 === '1');//false

逻辑运算符

&& 逻辑与 and
|| 逻辑或 or
！逻辑非 not

逻辑与表达式1 && 表达式2 两边表达式的结果都是true 返回true 有一个false 最终结果false 记住

var box = (3>4) && (5>3);

console.log(box); //false

var box = new Object();
console.log(box && (5>4)); //true 第一个是对象的时候 返回第二个操作数 
console.log((5<4)&& box);//[object Object] 第二个操作数是对象 如果第一个为true 则返回第二个对象 如果第一个为false 直接返回false
console.log((5<4)&& null);//false   
了解

逻辑或 (5>3) || (3<4); true 两边表达式只要有一个为真最终结果就是真两个都为假最终才是假记住重要

var box = new Object();
console.log(box || (3>4));//[object Object]
console.log((3>4)|| box );//[object Object]
console.log((3<4)|| box );//true
console.log(null|| null);//null
console.log(undefined|| undefined );//undefined

了解

逻辑非！

var box = !(5>4);
var test = new Object();
console.log(box);//false
console.log(!'');//true
console.log(!'abc');//false
console.log(!null);//true
console.log(!undefined);//true
console.log(!NaN);//true
console.log(!0);//true
console.log(!test);//false
console.log(!!0);//!!跟没写一样一样的

位运算符了解

先转成2进制

位与两个都是1 得1 有一个0 得0

位或有一个1就是1 都是0 得 0

赋值运算符

=

var box=100;
box +=10; //box = box+10;
box -= 10; //box = box-10;
console.log(box);

其它运算符

, 逗号运算符
var box = [1,2,3];
var a=1,b=2,c=3;

三元运算符也叫三目运算符很重要

var box = 5;
if（box>4）{
    alert('对');
}else{
    alert('错');
}
(5>4)?'对':'错';
表达式?'1'：'2';
？前面表达式如果为真选择:前面的  如果为假 选择 :后面的

优先级

()[]   > 
一元运算符(++ --)   >    
乘法除法求余 >   
== !== !== ===     >
&&    >  
|| >
?： > 
赋值=  >
   ,

流程控制语句

if else
switch
do while
while
for
for in
with
break continue

if else

if（50>40）alert('真');
if(50>40)
   alert('真');
if(表达式){
    业务逻辑
}


var box = 100;
if(box >=100){
alert('状元')
}else if(box >=90){
alert('榜眼');
}else if(box >=80){
alert('探花');
}else if(box >=70){
alert('秀才');
}else if(box >=60){
alert('进士');
}else{
alert('各回各家');
}

switch

switch (表达式){
        case 结果:
            break;
        default:  相当于if 里边的else 
            break;
    }

var box=80;
    switch (box){  结果只能是 100 90 80 70 60 除了这个五个 走 default 
        case 100:
            console.log('状元');
            break; 防止向下穿透 遇到break 跳出所有循环
        case 90:
            console.log('榜眼');
            break;
        case 80:
            console.log('探花');
            break;
        case 70:
            console.log('进士');
            break;
        case 60:
            console.log('举人');
            break;
        default: 相当于我们if elseif  else 中的  else  
            console.log('落榜');
            break;
    }

for 循环

var box = 1;
if(box <=5 ){
box++;
console.log(box); //2  这种情况只能出来1个值
}
需求是: 
1 2 3 4 5 启用for 
for(var box=1;box<=5;box++){
console.log(box);
}

作业

1.有边框的九九乘法表正立倒立

2.金三角正立倒立 *

3.菱形

zy13955413303

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础

JavaScript 基础引用方式语法关键词保留字数据类型应用领域页面的交互效果比如轮播选项卡淘宝放大镜页面的局部刷新不需要手动刷新网页比如股票网站天气预报vue.js react.js 混合app webapp 引用方式 js 是 JavaScript 的简称只要你有浏览器就可以运行js ...
复制链接

扫一扫