JavaScript基础入门

最新推荐文章于 2024-05-03 11:08:18 发布

VIP文章 s梦二

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量346

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_41292655/article/details/107047820

版权

JavaScript基础

1.概述

概念：客户端脚本语言（脚本语言：不需要编译，直接被浏览器解析执行）

作用：增强用户和html页面的交互过程，控制html元素，增强用户体验

2.基本语法

2.1内部js

<script>
    alert('hello world');
</script>

2.1外部js

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script src="js1.js"></script>
    
    <!--<script>
        alert('hello world');
    </script>-->
</head>

注意：

可以放任意位置但是会受位置影响在他前边的会先执行

script 可以定义多个

2.3注释

1.单行注释

//单行注释

2.多行注释

/*  多行*/

2.4数据类型

1.（原始）基本数据类型

a、number 整数、小数、NaN(not a number 一个不是数字的数字类型)

console.log(isNaN(12));//false

isNaN 判断是否为非数字结果为false 说明不是非数字即数字

可以验证用户输入的数据

b、string

①

alert('放，啦【积分是丰富\n的非暗示领导立刻拉多少；\n"阿萨德d"sF非空FE');

注意转义字符还有外双内单外单内双

②字符串拼接

字符串+任何类型=字符串

var as='abc de';
console.log((as.length));
var aw=as+123;
console.log(aw);

空格也算一个字符

console.log('10'+10);//1010

结果依然是字符串

c、boolean

d、null

e、undefined 未定义

2.引用数据类型

对象

2.3.1数据类型转换

1.把数字转为字符串

toString( )
String(变量)
拼接变量+’ ’

2.转化为数字类型

paserInt( ) 注意：取整了

paserFloat( ) 浮点数

Number（）强转

运用算数运算如 ’12‘ - 0 隐式转换 //12

2.4变量 *

一小块存储数据的内存空间

js不同于Java

Java是强类型语言在开辟变量存储空间的同时，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据

而JavaScript是弱类型。不定义数据类型可以存放任意类型的数据

var a=10;

输出到页面

br换行

var a=1;
var b=1.2;
var c=NaN;

document.write(a+'<br>');
document.write(b+'<br>');
document.write(c);

var a1='abc';
document.write(a1);

var a01=true;
document.write(a01+'<br>');

var b1=null;
var b01=undefined;
document.write(b1+'<br>');
document.write(b01+'<br>');

显示检测到的数据类型

ocument.write(a+'---'+typeof(a)+'<br>');
document.write(b+'<br>');
document.write(c+'<br>');


var a1='abc';
document.write(a1+'---'+typeof(a1)+'<br>');

var a01=true;
document.write(a01+'---'+typeof(a01)+'<br>');

var b1=null;
var b01=undefined;
document.write(b1+'---'+typeof(b1)+'<br>');
document.write(b01+'---'+typeof(b01)+'<br>');

在这里插入图片描述

这个object正常因为null相当于占位符
在这里插入图片描述

案例：

1.输入用户名并弹出显示用户名

var myname=prompt('请输入你的用户名');
alert(myname);

2.更新变量

var myname='smy';
console.log(myname);

此时myname为smy

myname='hhh';
console.log(myname);

此时为hhh

3.声明多个变量

用,

var age=18,
    address='baoding';

特殊情况：

3.1只声明不赋值

var sex;
console.log(sex);//undefined

3.2不声明不赋值会报错

3.3不声明直接赋值

aa=10;
console.log(aa);//10

2.5运算符

同Java

1.一元运算符：只有一个运算数的运算符

如：++ – +(正号)

在js中，如果运算数不是运算符所要求的的类型，那么js引擎会自动的将运算数进行类型转换

其他类型转number：

string按照字面值转换，如果不是数字，则转为NaN

boolean转，true为1 false为0

var a=1;
var b= -a;
document.write(b+'<br>');
document.write(a);

在这里插入图片描述

var a=+'123';
var b=1+a;
document.write(b+'<br>');
document.write(a);

在这里插入图片描述

var a=+'abc';
var b=1+a;
document.write(b+'<br>');
document.write(a);

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fXgXq9Kh-1593511979441)(C:\Users\68508\AppData\Roaming\Typora\typora-user-images\image-20200626102456081.png)]$

2.算数运算符

如：+ - * /等

3.赋值运算符

= += -= 。。。。

4.比较运算符

< > >= <= == ===(全等于)

类型相同的

不是数字，而是字符串的话，按照字典顺序比较，按位比较，直到得出大小位置

document.write('abc'>'acd'+'<br>')

//false

c比b大 d比c大

类型不同的。先进行类型转换，在比较

document.write(('123'>1)+'<br>')

true

5.逻辑运算符

&& || ！

6.三元运算符

？：

2.6分支语句等

同Java

3.数组

一组数据的集合，存储在单个变量下

3.1创建数组

1.new

var 数组名=new Array();

2.利用数组字面量( [ ] )创建

var 数组名=[ 1,2,23];

4.函数

函数是封装了一段可以被重复执行调用的代码块

目的：让大量代码重复使用

*注意：在js中如果实参的个数多于形参个数会取到形参个数

如果小于，因为形参看作是不用声明的变量，此时形参没有接受值定义为undefined 数字+undefined=NaN

4.1return

return是把结果返回给调用者且终止函数

只返回一个值，返回的结果是最后一个值；

可以通过数组返回多个结果：

function g(num1,num2){
   
    return [num1,num2];
}
console.log(g(1,2));

如果没有return 则返回undefined

4.2return，break，continue的区别

return：退出循环，返回值，同时结束当前函数体代码

break：结束当前循环体

continue:跳出本次循环，继续执行下次循环

4.3arguments

arguments是函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参

4.3.1使用

function f() {
   
    console.log(arguments);
}
f(1,2,3);

在这里插入图片描述
伪数组：

1.具有数组的length属性

2.按照索引方式进行存储

3.没有真正数组的一些方法如pop() push()等

例：

function getMax() {
   
    var max=arguments[0];
    for (var i=1;i<arguments.length;i++){
   
        if (arguments[i]>max){
   
            max=arguments[i];
        }
    }
    return max;
}
console.log(getMax(1,34,23,45));

4.4函数的声明

1.利用函数关键字自定义函数（命名函数

function f(){

}

2.函数表达式（匿名函数

var f=function(){

};

注意：函数表达式中的 f是变量名，不是函数名，里面存的是值，

而函数表达式中存的是函数

js内可以函数内定义函数

5.预解析*

1.js引擎运行js分为：预解析，代码执行

预解析 js引擎会把js里面所有的var 和function 提升到当前作用域的最前面

代码执行：从上往下

2.预解析分为：变量预解析（变量提升）和函数与解析（函数提升）

变量提升：就是把所有的变量声明提升到当前作用域最前面不提升赋值操作

console.log(num);//undefined
var num=10;

函数提升：就是把所有的函数声明提升到当前作用域最前面不调用函数

f();
function f(){
   
    console.log(22);
}//相当于先声明了把这整个函数提到前边去 之后在调用

案例：

var num=10;
f();  //undefined
function f() {
   

    console.log(num);
    var num=20;
}

相当于：

var num;
function f()

最低0.47元/天解锁文章

s梦二

关注

0
点赞
踩
0

收藏

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

JavaScript基础1.概述概念：客户端脚本语言（脚本语言：不需要编译，直接被浏览器解析执行）作用：增强用户和html页面的交互过程，控制html元素，增强用户体验2.基本语法2.1内部js<script> alert('hello world');</script>2.1外部js<head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫