首页 > 编程入门 文章详情

js基本语法（输入、输出、变量类型、运算符、类型转换、流程控制、函数、作用域）

编程入门 行业动态 更新时间:2024-10-28 07:22:22

js基本语法（输入、输出、变量<a href=https://www.elefans.com/category/jswz/34/1771355.html style=类型、运算符、类型转换、流程控制、函数、作用域）"/>

js基本语法（输入、输出、变量类型、运算符、类型转换、流程控制、函数、作用域）

js基本语法

  • 为什么要学习JavaScript
  • JavaScript概述（了解）
    • 发展诞生
    • JavaScript的组成(掌握)
    • JS和H5的关系
  • JavaScript初体验
    • js的引入(记忆)
      • 外联
      • 内联
      • 行内：
      • js的位置
  • JavaScript基本语法
    • 命名规则
    • 声明变量
    • js的输入
      • prompt()方法
    • js的输出
      • 输出到页面中
      • 输出到控制台中
      • 输出错误
      • 弹出框
    • js的注释
    • 变量类型
      • 基本数据类型
      • 复合数据类型
      • 特殊数据类型
        • NaN非数字
          • 产生情景
          • 如何判定NaN
      • 获取数据类型
    • 运算符
      • 算术运算符
      • 赋值运算符
      • 关系运算符
      • 逻辑运算符
      • 双目鱼表达式
    • 类型转换
      • 其它类型转化为数字
      • 数字转换为字符串
      • 其他值转化为布尔值
    • 流程控制
      • 顺序结构
      • 分支结构
        • if的使用
        • if-else的使用
        • if-elseif的使用
        • switch的使用
      • 循环结构
        • while循环
        • for循环
        • do-while循环
      • Debug工具的使用
    • 函数
      • 函数的概念
      • 函数的好处
      • 函数的定义
      • 函数调用
      • 函数的参数
      • 函数的声明
      • 函数的返回值
      • 参数默认值
      • 函数自执行
      • 扩展
      • 作用域
        • 全局作用域
        • 局部作用域
        • 变量生命周期

为什么要学习JavaScript

  • 网页三部分

    HTML：控制网页的结构

    CSS：控制网页的样式

    JavaScript：控制网页的行为

    不同于HTML和css，JavaScript是一门编程语言，因此要比html和css要复杂一些。

  • 最初的JavaScript

    1. 用于判断客户的输入

  • 现在的JavaScript：现在的js无所不能

    ​ 1.异步与服务器交互(AJAX)

    ​ 2.网页和特效(演示)

    ​ 3.服务器开发(nodejs)

    ​ 4.命令行开发工具(nodejs)

    ​ 5.桌面程序(Electron)

    ​ 6.app开发(reactNative)

    ​ 7.控制硬件-物联网(Ruff)

    ​ 8.游戏开发(canvas,coco2d.js)

  • 网页特效:

    相册

    canvas游戏

    JavaScript概述（了解）

    发展诞生

JavaScript的组成(掌握)

三部分：ECMAScript、BOM、DOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMqXrZ7J-1654480197913)(C:\Users\qwq\Desktop\R-C (1)].jpg)

  • ​ ECMAScript： 是JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准，与具体实现无关
  • DOM：一套操作网页元素的API(方法)
  • BOM:一款操作浏览器功能的API（方法）

JS和H5的关系

​

HTML5是一种新的技术，就目前而言，我们所知的HTML5都是一些标签，但是有了JS之后，这些标签深层的扩展功能才得以实现

JavaScript初体验

js的引入(记忆)

可以有两种方式在HTML页面进行引入，一种是外联，一种是内部标签

外联

<script src="js文件路径"></script>
这是一对HTML标签，原则上可以放在HTML页面的任意位置，src后链接的是JavaScript文件，文件的扩展名为.js,如Index.js,在里面直接写JS文件即可<script type="text/javascript" src="js文件路径"></script>
注意：一般是将js代码放在body之后的(因为这种情况是当html加载完成在执行js)，多以当执行js代码时，html页面都已载入完成，避免找不到元素而报错

内联

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>alert("你是天边最美的云彩")</script>
</body>
</html>

行内：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p onclick="alert(123)">见过你的美，还能爱上谁？</p></body>
</html>

js的位置

​ 1.在head中

​

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="example.js"></script>
</head>

不足：

​ js文件过大时，加载时间长，影响后续的html代码执行

​ js可能要获取页面中的html节点，js先执行则无法获取

2.body后面

JavaScript基本语法

命名规则

由数字、字母、_、$组成

不能以数字开头

区分大小写

不能使用系统关键字

提倡：

多个单词组成使用驼峰命名法，第二个单词首字母大写

命名要有含义

声明变量

基本语法：

//声明变量的同时赋值
var 变量名=赋值
例如：
var age=18
//先声明，在赋值
var info;
info="猪肉"//一次声明多个值
var user1="user1",age1=22//不使用var，直接声明
user2="1111"

js的输入

prompt()方法

语法：window.prompt(“弹出的输入框提示信息”,“弹出的输入框默认信息”)

描述：打开网页弹出一个输入框

//弹出输入框
var str=window.prompt("请输入一个数字","1");
document.write(str);

注意：

  1. prompt()是window对象的方法
  2. prompt()有两个参数，参数之间用逗号隔开
  3. prompt()方法会返回用户的输入信息
  4. 参数也可不写

js的输出

输出到页面中

​

document.write("何以解忧，唯有杜康")

输出到控制台中

console.log("何以解忧，唯有杜康")

输出错误

console.error("何以解忧，唯有杜康")

弹出框

alert("何以解忧，唯有杜康")

确认框

confirm(222)

js的注释

单行注释：//

多行注释：/* */

变量类型

1.变量中的数据是需要存储在计算机中的

2.计算机底层只能识别0和1，所以需要对不同类型的数据进行转换

3.转换的结果会导致所需空间不足，所以JS中分成多种数据类型，以方便计算机的存储

基本数据类型

数据类型描述示例
数字类型：number表示一个数字、可以是整数或者是小数如：十进制10
字符串型：string用单引号或双引号引起来的一个字符串如：“abc”，“张三”
布尔型：boolean真值或者假值true，false

复合数据类型

可以存放多个值

数据类型描述示例
数组(array)用于存储多个值，，后面单独讲arr=[1,2]
对象：objectvar obj=new Object();//创建一个空对象

特殊数据类型

数据类型描述示例
空类型：null表示空值，空对象指针，定义要保存对象值得变量var obj=null；
NaN非数字特殊的数据类型，不是一个数字，任何两个NaN都是不相等的
未定义类型：undefined没有定义变量的值var other;consolo.log(other)
符号类型：symbolES6新增的符号类型sym=Symbol();consolo.log(sym)
NaN非数字
产生情景

运算产生：

var num=12;
var str='abc';
console.log(num-str);

转化失败产生

var str='abc';
console.log(parseInt(str));
如何判定NaN

isNaN():是NaN返回true，不是返回false；

var res=prompt("请输入成绩：");
console.log(isNaN(res));
isNaN转化的工作原理和Number一致

获取数据类型

typeof：获取数据类型，只能获取基本数据类型。
var user="abc";
console.log(typeof user);//思考：
age=18;
console.log(typeof typeof age);
这种情况是字符串数据类型。

运算符

js中的运算符

算术/赋值/关系/逻辑/字符串

算术运算符

算术运算符：+加法   -减法  *乘法  /除法  %取余
var a=1,b=2;
a+b=3;
a-b=-1;
a*b=2;
a/b=0.5
a%b=1;

+:即可以当数学运算符，又可以当字符串连接符

赋值运算符

运算符例子等价于运算结果
=y=6y=6
+=y+=1y=y+1y=7
-=y-=1y=y-1y=5
*=y*=2y=y*2y=12
/=y/=2y=y/2y=3
%=y%=4y=y%4y=2

关系运算符

结果是bool值，用于判断

< <= > >= == != ===

运算符说明例子运算结果
==等于，只比较值2==3false
===恒等于，值和类型都做比较2=2 2=“2”true false
！=不等于2！=3true
>大于2>3false
<小于2<3true

逻辑运算符

运算符说明例子运算结果
&&逻辑与 andx=2;y=6;x>5&&y>5false
||逻辑或x=2；y=6；x>5||y>5true
!逻辑非，取逻辑的反面x=2;y=6;!(x>y)true

前置++和后置++的区别：

后置++：先使用值，在加1

前置++：先加1，再使用值

双目鱼表达式

表达式？值1：值2

表达式成立，则执行值1，不成立则使用值2.

类型转换

为什么转化？

1.服务器返回的数字，一般是string

2.从页面中获取的数字是String

其它类型转化为数字

Number()

//基本数据的类型获取
var num=12;
var num1='12';
console.log(typeof num);
console.log(typeof num1);//其它类型转化为number
console.log(Number(num1))

parseInt()

用于将字符串类型的整数，转化为数字类型

var str1='12abc';
var num1='12'
console.log(parseInt(str1));
console.log(parseInt(num1));var str2='abc12'
console.log(parseInt(str2));//NaNvar str3='uui';
console.log(parseInt(str3));//NaNvar str4='12.34';
console.log(parseInt(str4));//NaN工作原理：从左到右取出字符串中的数字，遇到非数字就停止，如果第一位是非数字，那么久返回NaN

parseFloat()工作原理和parseInt一样，但是遇到.会继续向下。

隐式转换

str=12；
console.log(+str);//12
console.log(str-0);//12

数字转换为字符串

.toString()

var num=12;
var res=num.toString();
console.log(typeof res);

String()

var res1=String(num);
console.log(typeof res1);

连接空字符串

var res2=num+"";
console.log(typeof res2);

其他值转化为布尔值

0 null undefined NaN ’ ‘ 转化为布尔值是false，其他的转化是true；

!取反

console.log(!!0);
console.log(!!null);

使用Boolean()

流程控制

顺序结构

  • 从上到下执行的代码就是顺序结构
  • ​ 程序默认就是从上到下，一行一行的顺序执行
console.log("haha1");
console.log("haha2");
console.log("haha3");输出：
haha1
haha2
haha3

分支结构

也叫选择结构，根据不同的情况，执行对应的代码。

if的使用
if(表达式){
//表达式成立，返回true，则执行语句
语句
}
if-else的使用
if(表达式1){
语句1
}else{
语句2
}
if-elseif的使用
if(表达式1){
语句1；
}else if(表达式2){
语句2；
}
switch的使用
Switch(res){
case 情况1:语句1;break;
case 情况2:语句2;break;
default:语句3;break;
}

循环结构

重复做一件事情

问题

如果输出一句hello word，可以document.write(“hello word”);

思考：现在要输出10次，应该怎么办？

写10次，……

分析

此时，就要用到循环结构了
while循环

​

while(判断语句){
循环语句1;
}
for循环
for(初始值，判断条件，增值){
语句1;
}
do-while循环
do{
语句1；
}while(判断语句)

Debug工具的使用

函数

函数的概念

​ 函数就是代码块，可以多次调用，很容易实现模块化编程

函数的好处

​

1) 减少代码开发时间
2) 模块化编程
3) 可以重复使用

函数的定义

形式1  function fn(){
语句
}
function:函数关键词
fn：函数名字,字母  数字  下划线 $组成，不能以数字开头，区分大小写
():函数的参数，多个参数使用逗号隔开
{}：放置函数体，用于执行时，所编译的代码块

函数调用

函数名();
例：fn();

直接写函数名，加上小括号

函数的参数

function fn(参数1,参数2,...,参数N){
语句
}
调用：fn(实参1，实参2，......,实参N)
例如：
function fn(str1,str2,str3){
console.log(str1,str2,str3);
}
调用：
fn('a','b','c')

函数的声明

直接声明

funtion fn(){
console.log("111111")
}
fn();

赋值式声明：也称匿名函数

var fn=funtion(str){
console.log(str)
}
fn(str);

总结：直接声明的函数，可以先使用，再声明；而匿名函数不能先使用，在声明。

函数的返回值

使用关键词return

1 返回函数处理的结果，可以是任何类型

2 结束函数的执行

3 在哪里调用，结果就返回哪里

函数返回值：

1.直接输出

2.使用变量

参数默认值

给函数的参数设置默认值，代用函数的时候，这个参数是不用传值的

//参数的默认值：就是在设置参数的时候给一个值
//当后面调用函数，这个参数可以不用传参
function fn(name,age=15,sex='女'){
document.write('我叫'+name+',年龄是'+age+',性别是'+sex);
}
fn('贾玲')注意：有默认值的最好在后面

关键词：arguments传递实参，但是没有形参接收

function fn3(){
console.log(arguments)
}
fn3(11,22,33,44)输出结果为：
arguments(4)[11,22,33,44,callee:f]

函数自执行

<script>(function (){console.log('这是自执行。。。')
})();
//()() 第一个括号，包含自执行函数，第二个括号，调用自执行函数
//传参
(function (str1){console.log('这是自执行。。。'=str1)
})('aa');//使用！直接执行
!function(){console.log('这是自执行。。。')
}
</script>

扩展

函数可以作为参数

通常，我们把作为参数传递的函数叫做回调函数

function fn1(fn){
document.write('热不热')
fn();
}
var bear=function(){
alert('好热，喝杯饮料')
}
fn1(bear)

作用域

全局作用域

函数以外的地方就是全局作用域（全局变量），可以在任意地方调用，包含函数的内部

var info="111";//这个就是全局变量
function fn(){
//这个就是局部变量
var str=111;}

隐式全局变量

function fn2(){
str1="1111";
}
//函数不调用，里面的代码不被执行
fn2();
console.log(str1);//可以执行，为什么呢？因为在函数内部声明变量不写var，就会变成全局变量。
局部作用域

函数以内的地方就是局部作用域，只能在函数内部调用

function fn(){
//这个就是局部变量
var str=111;}
变量生命周期

局部变量：函数开始声明，函数结束销毁

全局变量：代码开始声明，代码结束销毁

var num1=1;//全局变量
num2=2;//全局，不提倡
function fn3(){
var num3=3;//局部
num4=4;//隐式全局
console.log(num1,num2,num3,num4)
}
fn3();
console.log(num1,num2,num3,num4)执行结果：
1 2 3 4
在第二个log中，会错，因为num3不会输出

更多推荐

js基本语法（输入、输出、变量类型、运算符、类型转换、流程控制、函数、作用域）

本文发布于:2024-02-06 16:37:20，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1750489.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：类型   变量   语法   函数   运算符

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表