JavaScript(一)

wuchangjian2021-11-03 12:27:15编程学习

一、JS三种书写位置

1、行内式JS

<input type="button" value="点击" onclick="alert('HelloWorld')">
  • 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如:onclick

  • 注意单双引号的使用,在HTML中推荐使用双引号,JS中推荐使用单引号

  • 可读性差,在HTML中编写JS大量代码时,不方便阅读

  • 引号易错,引号多层嵌套匹配时,非常容易混淆

2、内嵌式JS

    <script>
        alert('HelloWorld');
    </script>
  • 可以将多行JS代码写到<script>标签中

3、外部JS文件

<script src="my.js"></script>
  • 利用HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观也方便文件级别的复用

  • 引用外部JS文件的script标签中间不可以写代码

  • 适合于JS代码量比较大的情况

二、注释

1、单行注释

// 单行注释

2、多行注释

快捷键:alt+shift+a

/* 多行注释 */

三、输入输出语句

alert(msg)

浏览器弹出警示框

浏览器

console.log(msg)

浏览器控制台打印输出信息

浏览器

prompt(info)

浏览器弹出输入框,用户可以输入

浏览器

1、prompt

    <script>
        prompt("请输入您的年龄");
    </script>

2、alert(msg)

    <script>
        alert("请输入您的年龄");
    </script>

3、console.log(msg)

    <script>
        alert("请输入您的年龄");
    </script>

四、变量

1、变量

变量就是一个装东西的盒子

本质:变量是程序在内存中申请的一块用来存放数据的空间

2、变量的使用

(1)、声明变量

var age:	//声明一个名称为age的变量
  • var是一个JS关键字,用来声明变量(variable变量的意思)。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管

  • age是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间

(2)、赋值

age=10;		//给age这个变量赋值为0
  • =用来把右边的值赋给左边的变量空间中

  • 变量值是程序员保存到变量空间里的值

(3)、输出结果

console.log(age)

3、变量语法扩展

(1)、更新变量量

一个变量被重新赋值后,它原有的值就会被覆盖,变量值将是最后一次赋的值为准

    <script>
        var myname = '原值';
        console.log(myname);
        myname = '更新值';
        console.log(myname);
    </script>

(2)、同时声明多个变量

中间用英文逗号隔开即可

        var age = 18,
            address = 'LanZhou',
            tel = 908787;

(3)、声明变量特殊情况

var age;console.log(age);

只声明不赋值

undefined

console.log(age)

不声明不赋值直接使用

报错

age = 10,console.log(age);

不声明只赋值

1

(4)、变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线()、美元符号($)组成,如:usrAge,pum01,_name

  • 严格区分大小写。var app;和 var App;是两个变量

  • 不能以数字开头。18age 是错误的

  • 不能是关键字、保留字。例如:var、for、while

  • 变量名必须有意义。

  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName

五、数据类型

1、变量的数据类型

JavaScript是动态语言,变量的数据类型是可以变化的

    <script>
        var a = 10,
            b = 0.123,
            c = 'abc';
    </script>

2、数据类型的分类

  • 简单数据类型(string、number、Boolean、underfined、null)

  • 杂数据类型(object)

number

数字型,包含整数型和浮点型值

0

Boolean

布尔值类型

false

string

字符串类型

""

undefined

声明变量未赋值

undefined

null

声明变量为空值

null

3、获取检测变量的数据类型

    <script>
        var a = 10,
            b = 0.123,
            c = 'abc';
        console.log(typeof a);
    </script>

4、字面量

字面量是源代码中一个固定值的表示法

  • 数字字面量:8、9、10

  • 字符串字面量:”string“

  • 布尔字面量:true、false

5、数据类型转换

(1)、转换为字符串

toString()

转换成字符串

var num=1;alert(num.toString());

String()强制转换

转换成字符串

var num=1;alert(String(num));

加号拼接字符串

和字符串拼接的结果都是字符串

var num=1;alert(num+"我是字符串")

  • toString()和String()使用方法不一样

    <script>
        //1、把数字类型转换成字符串类型 toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        //2、利用String()
        console.log(String(num));
        //3、利用 + 拼接字符串的方法实现拼接效果
        console.log(num + '');
    </script>

(2)、转换为数字型

parseInt(string)函数

将string类型转换为整数数值型

parseInt('78')

parseFloat(string)函数

将string类型转换为浮点数值型

parseFloat('78,21')

Number()强制转换函数

将string类型转换为数值型

Number('12')

js隐式转换

利用算术运算隐式转换为数值型

'12'-0

举例:

    <script>
        var age = prompt('请输入您的年龄');
        //1、parseInt(变量)可以把字符型转换为数字型 得到的是整数
        console.log(parseInt(age));
        console.log(parseInt('3.14')); //取整
        console.log(parseInt('120px')); //120 会去掉px单位
        console.log(parseInt('EM120px')); //NAN

        //2、parseFloat(变量)可以把 字符型的转换为数字型 得到的是小数 浮点数
        console.log(parseFloat('3.14'));
        console.log(parseFloat('120PX')); //120 会去掉px单位
        console.log(parseFloat('EM120PX')); //NAN

        //3、利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));

        //利用了算术运算实现隐式转换
        console.log('12' - 0); //12
        console.log('123' - '120'); //3
        console.log('12' * 1); //123
    </script>

(3)、转换为布尔型

Boolean()函数

其他类型转成布尔值

Boolean('true')

  • 代表空、否定的值会被转换为false。比如:''、0、NaN、null、undefined 其余值都会被转换为true

    <script>
        console.log(Boolean('')); //false 
        console.log(Boolean(0)); //false
        console.log(Boolean(NaN)); //false
        console.log(Boolean(null)); //fasle
        console.log(Boolean(undefined)); //false
        console.log(Boolean('123')); //true
        console.log(Boolean('abc')); //true
    </script>

六、运算符

1、算术运算符

  • +加

  • -减

  • *乘

  • /除

  • %取余

2、递增运算符

    <script>
        //前置递增运算符
        var num = 0;
        console.log(++num);
        //后置递增运算符
        var age = 0;
        console.log(age++);
    </script>

3、比较运算符

    <script>
        console.log(3 >= 5); //false
        console.log(2 <= 5); //true
        console.log(2 = '0'); //赋值
        console.log(2 == '0'); //判断
        console.log(2 === '0'); //全等
    </script>

4、逻辑运算符

    <script>
        console.log(3 > 1 && 1 < 8); //true
        console.log(3 > 1 || 1 < 8); //ture
        console.log(!true); //false
    </script>

七、流程控制

1、顺序流程控制

顺序流程控制是最简单最基本的流程控制,没有特定的语法结构,程序按照代码的先后顺序依次执行

2、分支流程控制

(1)、if 语句

if(条件表达式){
	//执行语句
}

(2)、if else 语句

if(条件表达式){
	//执行语句
} else {
	//执行语句
} 

(3)、if else if 语句

if(条件表达式1){ 
 	//执行语句 
} else if(条件表达式2){ 
  	//执行语句 
} else if(条件表达式3){
  	//执行语句
} else {
  	//执行语句
}

(4)、三元表达式

语法:

条件表达式 ? 表达式1:表达式2

举例:

    <script>
        var num = 10;
        var result = num > 5 ? '是的' : '不是';
    </script>

(5)、switch语句

语法:

switch(表达式){
	case value1:
      //执行语句1
      break;
    case value2: 
      //执行语句2
      break;
  	.......
    default:
      //执行最后的语句
}

3、循环流程控制

(1)、for 循环

for (var i = 1;i<=100;i++){
	console.log('string');
}

(2)、双重for循环

for (var i = 1;i<=100;i++){ 
	console.log('string'); 
	for (var k= 1;k<=100;k++){
		console.log('abc');
	}
}

(3)、while循环

while(条件表达式){
	//循环体
}

(4)、do while循环

do {
	//循环体
} while (条件表达式)

(5)、continue、break关键字

continue关键字用于立即跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)

break关键字用于立即跳出整个循环(循环结束)

八、数组

1、创建数组

  • 利用new创建数组

  • 利用数组字面量创建数组

    <script>
        //1、利用new创建数组
        var arr = new Array();  //创建空的数组
        //2、利用数组字面量创建数组
        var Array = [];     //创建空的数组
    </script>

2、数组元素的类型

数组中可以存放任意类型的数据

var arrStrus = ['小白',12,true,28.9];

3、获取数组元素

    <script>
        var Array = []; //创建空的数组
        var arrStrus = ['小白', 12, true, 28.9];
        console.log(arrStrus);
        console.log(arrStrus[2]);
    </script>

4、遍历数组

通过“数组名[索引号]”的方式一项一项的取出来

    <script>
        var arrStrus = ['小白', 12, true, 28.9];
        for (var i = 0; i < 4; i++) {
            console.log(arrStrus[i]);
        }
</script>

5、数组长度

    <script>
        var arrStrus = ['小白', 12, true, 28.9];
        console.log(arrStrus.length);
    </script>

6、数组新增元素

    <script>
        //修改length长度来实现数组扩容
        var arr = ['小白', 12, true, 28.9];
        console.log(arr.length);
        arr.length = 5;
        console.log(arr.length);
        //修改索引号来实现数组扩容
        var arr = ['小白', 12, true, 28.9];
        arr[4] = 'abc';
        arr[5] = 'def';
        console.log(arr);
    </script>

九、函数

1、函数的声明

  <script>
          //1、利用函数关键字自定义函数(命名函数)
          function 函数名() {
              //函数体 
          }
          //2、函数表达式(匿名函数)
          var 变量名 = function() {};
          var fun = function() { //fun是变量名不是函数名
              console.log('函数表达式');
          }
  </script>

2、函数的使用

先声明函数后调用函数。语法:

function 函数名() {
	//函数体
}
//调用函数
函数名();

3、函数封装

函数封装就是八一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口

    <script>
        function getSum() {
            var sum = 0;
            for (var i = 1; i <= 100; i++) {
                sum += i;
            }
            console.log(sum);
        }
        getSum();
</script>

4、函数的参数

function 函数名(形参1、 形参2....) {   //在声明函数的小括号内是形参           
	//函数体        
}        
函数名(实参、 实参2....);   //在函数调用的小括号里是实参

举例:

    <script>
        function getSum(sum) {
            for (var i = 1; i <= 100; i++) {
                sum += i;
            }
            console.log(sum);
        }
        getSum(0);
</script>

5、函数的返回值

    <script>
        function getSum(sum) {
            for (var i = 1; i <= 100; i++) {
                sum += i;
            }
            return sum;
        }
        console.log(getSum(0));
</script>

6、arguments的使用

arguments是一个伪数组,可以获取传入的参数数量

<script>
        function fn() {
            console.log(arguments);
        }
        fn(1, 2, 3);
</script>

十、作用域

1、变量的作用域

全局作用域:整个script标签,或者是一个单独的JS文件

局部作用域:在函数内部就是局部作用域,这个代码只在函数内部起作用

2、全局变量和局部变量

  • 全部变量在代码的任何位置都可以使用

  • 在全局作用域下var声明的变量是全局变量

  • 局部变量只能在该函数内部使用

  • 在函数内部var声明的变量是局部变量

<script>
        //1、全局变量
        var num = 10;
        console.log(num);

        function fn() {
            console.log(num);
        }
        fn();
        //2、局部变量
        function fun() {
            var num1 = 10;
            num2 = 20;
        }
        fun();
        console.log(num2);
</script>

3、作用域链

作用域链:内部函数访问外部函数的变量,采取的是链式查找的方式来决定取那个值

返回列表

上一篇:事务

下一篇:tke k8s 巡检脚本

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。