前端学习第三课、JavaScript基础_从var stars = [{"name":"黄晓明"}]-CSDN博客

本文链接：https://blog.csdn.net/m0_46657040/article/details/106896153

JavaScript

一、JavaScript 和 html 代码的结合方式
- 内部方式
- 外部方式
二、控制台的输入输出
三、JS变量和数据类型

一、JavaScript 和 html 代码的结合方式

内部方式

只需要在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // alert 是 JavaScript 语 言 提 供 的 一 个 警 告 框 函 数 。
        // 它 可 以 接 收 任 意 类 型 的 参 数 ， 这 个 参 数 就 是 警 告 框 的 提 示 信 息 
        alert("hello javaScript!");
    </script>
</head>
<body>
</body>
</html>

外部方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> 
    <!--现在需要使用 script 引入外部的 js 文件来执行 src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径）
    script 标签可以用来定义 js 代码，也可以用来引入 js 文件 但是，两个功能二选一使用。不能同时使用两个功能
    -->
    <script type="text/javascript" src="1.js"></script>
</head>
<body>
</body>
</html>

二、控制台的输入输出

let name=prompt("请输入姓名：");//控制台输入

在这里插入图片描述
打开html,右击选择检查，进入console控制台就能看到结果

console.log(name);//控制台输出

在这里插入图片描述

三、JS变量和数据类型

定义变量格式：

什么是变量？变量是可以存放某些值的内存的命名。
（1）变量声明
①var varName; .
②let varName;
（2）赋值式确定变量的类型:
值类型决定变量类型：变量的类型随着赋值类型的不同且可以改变甚至变量可以不用声明，直接赋值使用
typeof（）可以知道数据类型

JavaScript 的数据类型：

数值类型： number

a = 5;
console.log(typeof (a));//number

字符串类型： string

a="张三"；
a='张三'；
//这两种方式都可以，js里面没有char这个类型

字符串的一些常用用法

var number = parseInt("2.33");//2 字符串转换为整数
var number1 = parseFloat("13.13215");//13.13215 字符串转
换为小数

var b = "1109552357@qq.com";
var number2 = b.indexOf("q", 11);
var number3 = b.indexOf("q", 13);
console.log(number2);//11 第一个q出现的下标位置
console.log(number3);//-1 从下标为13的位置开始找没找到。返回-1
var s = b.substring(0, 10);//分割字符串
console.log(s);//1109552357 包含0不包含10
var strings = b.split(".");//以.分割字符串并形成数组
console.log(strings);//Array(2)0: "1109552357@qq" 1: "com"

对象类型： object

数组
创建数组的最常用方式
vararr=[val,val2,va3,…];
参数可以是任意类型，并且数组是动态数组，也就是容量不够会自动扩容

//数组遍历
var names=["张三","李四","王五"];
for (var i = 0; i <names.length ; i++) {
    console.log(names[i])
}//"张三","李四","王五"

names.push("asda");//放元素
console.log(names);//["张三", "李四", "王五", "asda"]

names.splice(1,2,"阿瑟东","王www");//从下标1删除2个元素，并添加"阿瑟东","王www"
console.log(names);//["张三", "阿瑟东", "王www", "asda"]

names.pop()//获取并删除最后一个元素
console.log(names);//["张三", "阿瑟东", "王www"]

names.shift();//获取并删除第一个元素
console.log(names);//["阿瑟东", "王www"]

var s1 = names.join("--");//用特殊符号把数组连成一个字符串
console.log(s1);//阿瑟东--王www

日期

//日期
var date=new Date();
console.log(date);//Mon Jun 22 2020 11:44:33 GMT+0800 (中国标准时间)
console.log(date.getFullYear());//2020
console.log(date.getMonth()+1);//6
console.log(date.getDate());//22
console.log(date.getHours());//11
console.log(date.getMinutes());//47
console.log(date.getSeconds());//55
console.log(date.getMilliseconds());//164

函数

function f() {
    console.log("第一种创建函数方式")
}
f();//第一种创建函数方式

var f1=function () {
    console.log("第二种创建函数方式")
}
f1();//第二种创建函数方式

创建对象最常用方式

//json格式创建对象
var student={
    name:"黄晓明",
    age:22,
    gender:"男"
};
console.log(student);//{name: "黄晓明", age: 22, gender: "男"}

//访问对象的属性类似java中的反射
for(const field in student){
    console.log(field+"="+student[field]);
}//name=黄晓明 age=22 gender=男

//json对象转成json格式的字符串
console.log(JSON.stringify(student));//{"name":"黄晓明","age":22,"gender":"男"}

布尔类型： boolean

0,"",'',null，undefined作为false,其他都是true

函数类型： function

自定义函数
a. function funcName(param…){…}
b. var funcName = function(param…}
内置函数
parselnt
JSON.stringify
JSON.parseset
Timeout(func, time(ms));延时函数setInterval(func, time(ms)); 定时函数
构造函数
相当于java中的类
回调函数等

//回调函数。延时
function give(callback,begin,end) {
    return callback(begin,end);
}

console.log(give(add,1,100,));

var i=0,timer;
function show() {
    console.log(++i);
    if(i>=10){
        clearInterval(timer);
    }
}
//延迟五秒只执行一次
setTimeout(show,5000);
//定时函数
timer=setInterval(show,1000);