标签：function console log age JavaScript alert var

JavaScript

JS基础语法

1.JS三部分：

ECMAScript：规定了基础语法

DOM: 文档对象模型

BOM: 浏览器对象模型

2.书写位置：

内嵌式：所以的js中的代码都是单引号
行内式
外部式：链接式引入

3.注释

单行注释 ctrl + /
多行注释 shift alt a

4.输入输出

prompt(info) 输入框用户输入数据
alert(msg) 弹出警示框展示给用户的
console.log 浏览器控制台打印输出信

    <script>
        // 输入框
        prompt('请输入你的年龄');
        // alert 弹出警示框 展示给用户的
        alert('计算的结果是');
     // console 控制台 浏览器控制台打印输出信息 供程序员使用的
        console.log('hello world');
         // alert("helloworld!");
    </script>

5.变量

1.概述

白话：装东西的盒子

通俗：用来存放数据的容器，存储数据

本质：内存中申请的一块用来存放数据的空间

回忆C语言中的内存管理知识

2.变量使用

声明变量

var age; // 声明一个名称为age的变量 var 是JS中的关键词

 var age;

 age = 10;

 alert(age); // 弹出

3.初始化

		var myage = 10;
 		console.log(myage);

案例1：

      	//声明多个变量
		var myname = '张三';
        var age = '22';
        var email = '[email protected]';
        console.log(myname);
        console.log(age);
        console.log(email);

案例1升级:

		//一次声明多个变量 用逗号分隔	
	    var ages = 18,
        	mynames = '李四';
        console.log(mynames);
        console.log(ages);

案例2：

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

4.命名规范

由字母、数字、下划线、$组成
严格区分大小写
遵守驼峰命名法 myFirstName

5.逻辑交换

        var a1 = '青苹果';
        var a2 = '白苹果';
        var temp;
        temp = a1;
        a1 = a2;
        a2 = temp;
        alert(a1);
        alert(a2);

6.数据类型

1.简介

数据和数据的存储空间有关，js中也有不同的数据类型

JS是一种弱类型语言或者是一种动态语言

java : int num = 10; num 一定为整型

JS : var num; // js的变量数据类型只有程序在运行过程中，根据等号右边的值来确定的

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

var x = 10; // x为数字型

x = ‘red’; // x是字符型

2.简单数据类型

简单数据类型	说明
Number	数字型，包含整数和浮点数值
Boolean	布尔值类型
String	字符串类型，字符串都是是引号的一般用单引号
Undefined	var a; 声明但是没有给值
Null	var a = null;声明了变量a为空

isNaN() 判断一个变量是否是数字和字符串

alert(isNaN(22)); 返回false
字符串嵌套：var str = '我想去"南方"看看';

外双内单和外单内双
转义符：\n 换行都是用 \ 开头

3.检测字符串长度

1.检测获取字符串的长度

	var str = 'my name is zhangsan';
    alert(str.length);

2.字符串的拼接

	alert('hello'+'world');
	helloworld

alert('12'+12) // '1212' 数值字符串+数值 还是字符串

 		var age = 20;
        console.log('张三'+age+'岁');
//变量和字符串相连口诀 引引加加 变量不能加引号通过+连接

3.案例分析

交互：

用户输入
内部拼接
输出结果

        var age = prompt('请输入你的年龄');
    
        alert('张三'+age+'岁');

		var age = prompt('请输入你的年龄');
        var str = '张三'+age+'岁';
        alert(str);

4.获取变量数据类型

typeof 关键字

		var name = 'chenyi';
        alert(typeof name);

5.数据类型转换

转字符串型

toString
String
加号拼接字符串

//变量.toString

var num = 10;

var str = num.toString();

alert(typeof str);

//String(num)

alert(String(num));

//拼接

alert(num + ' ');

转数字型 parseInt

//1. parseInt(变量)

var age = prompt('请输入你的年龄');

console.log(parseInt(age));

// alert(parseInt(age));

console.log(parseInt('120px')); //120

//2. number

var str = '123';

console.log(Number(str));

console.log(Number('12'));

案例：

 var year = prompt('请输入你的初生年');//输入的是字符型
        var age = 2022 - year;//隐式转换 -year变成了数值型
        var str = '您的年龄是'+(year-age)+'岁';
        alert(str);

转换布尔类型 boolean（）函数

空的个否定的为假

6.解释型语言和编译型语言

7.运算符

看菜鸟文档了解即可

算术运算符

	 console.log(1 + 1);
    // js-css-html formatter插件 保存自动更新格式

表达式和返回值

递增和递减运算符

比较运算符

逻辑运算符

短路运算与

1.表达式1&& 表达式2

表达式1为真则返回表达式2

表达式1为假则返回表达式1

短路运算或

表达式1为真则返回表达式1

表达式1为假则返回表达式2

赋值元素符

运算符优先级

8.分支

1.流程控制

顺序结构
选择结构
循环结构

//判断是否为闰年
        var year = prompt('请输入年份');
        if ((year % 4 == 0) && (year % 100 != 0) || year % 400 == 0) {
            alert('是闰年');
        } else {
            alert('不是闰年');
        }

三元运算符

var res = num > 5 ? ‘是的’：‘不是的’；

9.switch

10.循环

 var str = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                // 1 x 2 = 2
                str += j + 'x' + i + '=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);

11.浏览器断点调试

12.数组

1.创建

1.利用new创建数组

2.利用[]

//利用new
        var arr = new Array();
        //利用[]创建数组
        var arr = [];
        //数组中的类型是任意型的
        var arr1 = [1, 2, 3, 'hello', true]; //初始化

2.索引

通过索引号来获取和修改数组元素

3.遍历数组

 var arr1 = [1, 2, 3, 'hello', true]; //初始化
        for (var i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);
        }

求和

var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var sum = 0;

for (var i = 0; i < num.length; i++) {

sum += num[i];

}

var avg = sum / num.length;

console.log('和为：' + sum);

console.log('均值为:' + avg);

console.log(sum, avg);

4.新增数组元素

1.修改length长度（通过手动修改）

2.修改索引号，追加数组元素

 // 删选数组
        var arr2 = [1, 2, 34, 6, 7, 810, 10, 23, 43];
        var newArr = [];
        var j = 0;
        for (var i = 0; i < arr2.length; i++) {
            if (arr2[i] >= 10) {
                newArr[j++] = arr2[i];
            } else {
                continue;
            }
        }
        console.log(newArr);

        for (var i = 0; i < arr2.length; i++) {
            if (arr2[i] >= 10) {
                newArr[newArr.length] = arr2[i];
            }
        }
        console.log(newArr);

5.冒泡排序

//冒泡排序
        var nums = [5, 4, 3, 2, 1];
        for (var i = 0; i <= nums.length - 1; i++) {
            for (var j = 0; j <= nums.length - i - 1; j++) {
                if (nums[j] > nums[j + 1]) {
                    var temp = nums[j];
                    nums[j] = nums[j + 1];
                    nums[j + 1] = temp;
                }
            }
        }
        console.log(nums);

13.函数

1.声明函数

function 函数名（）{

函数体；

}

//函数
        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i < num2; i++) {
                sum += i;
            }
            console.log(sum);
        }

        getSum(1, 100);

2.函数的封装

函数的封装就是把一个或者多个功能的函数的方式封装起来，对外提供一个简单的接口
简单理解：封装类似于将电脑配件整合组装到机箱中（类似快递打包）

函数返回值：return

function 函数名（）{

函数体；

return 返回值；

}

//函数
        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i < num2; i++) {
                sum += i;
            }
            return sum;
        }

        var sum2 = getSum(1, 100);
        console.log(sum2);

3.arguments的使用

作用：存储了传递的所有实参

只要定义了函数就有arguments

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

伪数组

具有length的属性
按照索引存储的
没有真正的数组的一些方法 pop() push()等

function f() {
            console.log(arguments);
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        f(1, 2, 3);

求最大值：

 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, 2, 3, 4));
        console.log(getMax(2, 3, 42, 423, 43));
        console.log(getMax(22, 5));

数组翻转封装实现：

 //数组翻转
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([1, 2, 3, 4, 54]);
        console.log(arr1);

4.函数声明方式

1.自定义

2.函数表达式(匿名函数)

var fun = function() {

console.log('函数表达式');

}

fun();

// fun是变量名不是函数名

// 函数表达式声明方式跟声明变量差不多，不过变量里面存的是值。而函数表达式里面存的是函数

//也可以用来传参

14.作用域

在某个范围起效果

全局作用域

局部作用域

15.预解析

1.预解析

js引擎会把js里面所有的var 还有 function 提升到当前作用遇到最前面

（1）变量提升

（2）函数提升

2.代码执行

按照代码书写的顺序从上到下依次执行

16.对象

对象是由属性和方法组成

属性：事物的特征

方法：事物的行为

1.三种方式创建对象

1.字面量

/对象
        //字面量 {}
        var object = {}; //空对象
        var obj = {
            name: '张三',
            age: 18,
            sex: '男',
            sahai: function() {
                console.log('hi~');
            }
        }

里面的属性或者方法才去键值对的形式键属性名：值
多个属性或者方法中间用逗号隔开
方法冒号后面跟的是一个匿名函数

使用对象：

1.对象名.属性名

2.对象名[‘属性名’]
```
		console.log(obj.name);
        console.log(obj['age']);
        obj.sahai(); //调用方法
```

案例：

  var dog = {
            name: 'koko',
            type: '阿拉斯加犬',
            age: 5,
            color: '棕红色',
            bark() {
                console.log('汪汪汪');
            }
            showFilm() {
                console.log('演电影');
            }
        }

2.利用 new object 创建对象


        var obj = new Object();
        obj.name = '张三';
        obj.age = 18;
        obj.sex = '男';
        obj.sayhi = function() {
            console.log('hi~');
        }

        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);

3.利用构造函数创建对象

里面封装的是对象 把对象中相同的属性和方法抽象出来封装到函数里面


        //构造函数
        //因为前面两种只能一次创建一个对象
        //里面封装的是对象  把对象中相同的属性和方法抽象出来封装到函数里面
        //寻找相同的属性和方法
        // function 构造函数名（）{
        //     this.属性 = 值；
        //     this.方法 = function(){

        //     }
        // }
        // new 构造函数名（）;

        function Star(name, age, sex) { //1构造函数名首字母大写
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 19, '男'); //2不需要函数就可以返回结果
        console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('张需要', 22, '女');
        console.log(zxy.name);
        console.log(zxy.sex);
        zxy.sing('李香兰');
        //3构造函数必须要用 new 调用函数就创建的了一个对象
        //4我们的属性和方法必须添加this

练习案例：

 //英雄创建
        //共同属性
        function Hero(name, type, blood) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(play) {
                console.log(play);
            }
        }
        var lianpo = new Hero('廉颇', '力量型', 150);
        console.log(lianpo.name);
        console.log(lianpo.type);
        console.log(lianpo.blood);
        lianpo.attack('近战');
        var houyi = new Hero('后裔', '射手型', 100);
        console.log(houyi.name);
        console.log(houyi.type);
        console.log(houyi.blood);
        houyi.attack('近战');

2.变量、属性、函数、方法的区别

变量和属性是相同的都是用来存数据的

1.变量单独声明并且赋值使用的时候自己写变量名单独存在

2.属性在对象里面的不需要声明使用的时候是对象.属性

函数和方法的的相同点

1.函数是单独声明的并且调用的函数名（）单独存在的

2.方法在对象里面调用的时候对象.方法（）

3.构造函数和对象区别

1.构造函数泛指的某一大类类似于java语言里面的类

2.对象特指是一个具体的事物

3.利用构造函数创建对象的过程称之为对象的实例化

4.new 关键字执行过程

1.new 构造函数可以再内存里面创建一个空的对象

2.this 就好指向刚才创建的空对象

3.执行构造函数里面的代码，给这个新对象添加属性和方法

4.返回这个新对象（所有构造函数里面不需要return）

5.遍历对象

for in遍历

for( var k in ..){

}

   var obj = new Object();
        obj.name = '陈默默';
        obj.age = 18;
        obj.sex = '男';
        obj.sayhi = function() {
            console.log('hi~');
        }

        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);

        //遍历 for in 对数组和对象遍历
        for (var k in obj) {
            console.log(k); // k 变量 输出  得到的属性名
            console.log(obj[k]); //obj[k]得到的属性值
        }

6.简易计算器制作

方法1：

      var num1;
        var num2;

        function getSum1(num1, num2) {
            return num1 + num2;
        }

        function getCha(num1, num2) {
            return num1 > num2 ? num1 - num2 : num2 - num1;

        }

        function getJi(num1, num2) {
            return num1 * num2;
        }

        function getChu(num1, num2) {
            return num1 / num2;
        }

        function print() {
            num1 = parseInt(prompt('请输入第一个数的值：'));
            num2 = parseInt(prompt('请输入第二个数的值：'));
        }
        while (true) {
            //简易计算器
            var n = prompt('欢迎使用简易计算器：\n' + '1.加法运算\n' + '2.减法运算\n' + '3.乘法运算\n' + '4.除法运算\n' + '5.退出')
                // var n = prompt('请输入你的选项');

            switch (parseInt(n)) {
                case 1:
                    print();
                    alert(getSum1(num1, num2));
                    break;
                case 2:
                    print();
                    alert(getCha(num1, num2));
                    break;
                case 3:
                    print();
                    alert(getJi(num1, num2));
                    brerk;
                case 4:
                    print();
                    alert(getChu(num1, num2));
                    break;
                case 5:
                    exit(-1);
            }

方法2：
// 计算器
        var tan = prompt('1.+运算\n2.减法运算\n3.乘法运算\n4.除法运算\n5.退出');
        //函数的特点，因为本身的特性，函数调用执行完毕，就垃圾回收
        function jisuan(shuzi) {
            var num1 = parseInt(prompt('第一个数字'));
            var num2 = parseInt(prompt('第二个数字'));
            var result;
            switch (parseInt(shuzi)) {
                // 判断要输入的状态
                case 1:
                    result = num1 + num2;
                    break;
                case 2:
                    result = num1 - num2;
                    break;
                case 3:
                    result = num1 * num2;
                    break;
                case 4:
                    result = num1 / num2;
                    break;
                case 5:
                    break;
            }
            alert(result);
            tan = prompt('1.+运算\n2.减法运算\n3.乘法运算\n4.除法运算\n5.退出');

        }

        // 我们只能让他重复的输入，重复的调用函数
        // 2.接下来交给函数来完成，包装在一个函数中，需要的时候，我们就调用函数

        while (1 == 1) {
            if (tan == '1') {
                jisuan('1');
            }
            if (tan == '2') {
                jisuan('2');
            }
            if (tan == '3') {
                jisuan('3');
            }
            if (tan == '4') {
                jisuan('4');
            }
            if (tan == '5') {
                break;
            }
        }

17.内置对象

1.概述

自定义对象
内置对象：自带对象常用的属性和方法
浏览器对象

2.查阅文档

MDN和W3C 学习内置对象怎么用

查阅该方法的功能
查看里面参数的意义和类型
查看返回值的意义和类型
通过demo进行测试

MDN地址

通过demo进行测试

3.Math对象

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

Math 用于 Number 类型。它不支持 BigInt。

//Math
        console.log(Math.PI);
        console.log(Math.max(1, 3, 6, 43, 6363, 2));

MDN很详细

案例解析:

//利用对象封装自己的数学对象 
        var myMath = {
            PI: 3.14,
            max: function() {
                var max = arguments[0];
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            }, //写完用逗号个开
            min: function() {
                var min = arguments[0];
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            },
        }
        console.log(myMath.PI);
        console.log(myMath.max(1, 5, 2, 3));
        console.log(myMath.min(-1, 32, 43, 41));

其他方法：

 //绝对值
        console.log(Math.abs(-1));
        console.log(Math.abs('-1')); //隐式转换
        //取整方法
        console.log(Math.floor(1.1)); //1 向下
        console.log(Math.ceil(1.9)); //2 向下
        console.log(Math.round(1.5)); // 四舍五入

随机数 random

        //随机数
        console.log(Math.random());

        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        var num = getRandom(1, 10);
        console.log(num);

案例：

//随机点名
        var arr = ['张三', '李四', '王五'];
        console.log(arr[getRandom(0, arr.length)]);

        //猜数字游戏
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        var random = getRandom(1, 10);
        while (true) {
            var num = prompt('输入1~10的数字：');
            if (num > random) {
                alert('大了');
            } else if (num < random) {
                alert('小了');
            } else {
                alert('对了');
                break;
            }
        }

用户猜数字

 //用户猜数字 1-50之间 但是只有10次的机会
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 50);
        var nums = 10;
        while (nums) {
            var num = prompt('输入1-50之间的数字，你来猜：');
            if (num > random) {
                alert('大了');
            } else if (num < random) {
                alert('小了');
            } else {
                alert('对了');
                break;
            }
            --nums;
            alert('你还剩' + nums + '次机会');
        }
        alert('抱歉，你没机会了！');

4.Date对象

标签：function,console,log,age,JavaScript,alert,var
From： https://www.cnblogs.com/hhhcy/p/16871591.html

JavaScript

JavaScript

JS基础语法

1.JS三部分：

2.书写位置：

3.注释

4.输入输出

5.变量

1.概述

2.变量使用

3.初始化

4.命名规范

5.逻辑交换

6.数据类型

1.简介

2.简单数据类型

3.检测字符串长度

4.获取变量数据类型

5.数据类型转换

6.解释型语言和编译型语言

7.运算符

8.分支

1.流程控制

9.switch

10.循环

11.浏览器断点调试

12.数组

1.创建

2.索引

3.遍历数组

4.新增数组元素

5.冒泡排序

13.函数

1.声明函数

2.函数的封装

3.arguments的使用

4.函数声明方式

14.作用域

15.预解析

16.对象

1.三种方式创建对象

2.变量、属性、函数、方法的区别

3.构造函数和对象区别

4.new 关键字执行过程

5.遍历对象

6.简易计算器制作

17.内置对象

1.概述

2.查阅文档

3.Math对象

4.Date对象

相关文章

赞助商

阅读排行