JavaScript入门学习学习笔记（上）

最新推荐文章于 2024-06-26 09:51:03 发布

葛济维的博客

最新推荐文章于 2024-06-26 09:51:03 发布

阅读量217

点赞数 1

分类专栏： html 文章标签：字符串 javascript js java 1024程序员节

本文链接：https://blog.csdn.net/qq_26139541/article/details/109247898

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript学习笔记上

JAVAScript介绍
JavaScript入门学习ECMAScript

JAVAScript介绍

完整的JavaScript包括以下几个部分：
在这里插入图片描述

ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

JavaScript入门学习ECMAScript

六种数据类型

JS中一共分成六种数据类型 5个基本数据类型+object
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象

其中基本数据类型有 5个

String Number Boolean Null Undefined

还有一种数据类型是Object

typeof运算符检查数据类型

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

null和undefined值相等，类型不等。
可以用null和undefined来对清空对象，var a = null; 清空后，a的数据类型是object ，而var a = undefined; 清空后是undefined

引用数据类型： $对象 (O b j e c t) 、数组 (A r r a y) 、函数 (F u n c t i o n)$ 。

Array

创建：

var a = Array("t1","t2");
var b = Array(1,2,3,4);
var c = [1.2, 3.2, 9.3];

遍历：

for(int i=0; i<a.length; ++i){
    console.log(a[i]);
}
a.forEach(t => {
   console.log(t); 
});

对象

var user = {
            id: 123,
            name: "某某某",
            phone: "13232123"
        };
console.log(user.id);//输出到控制台
console.log(user["id"]);//两种方法均可

对象中自定义函数

var user = {
            id: 123,
            name: "某某某",
            phone: "13232123",
            fn: function(){
                return this.id+" "+this.name+" "+this.phone;
            }
        };
       console.log(user.id);
       console.log(user["id"]);
       console.log(user.fn());

在这里插入图片描述
遍历对象:
for(变量 in 对象)

var user = {
            id: 12,
            name: "xxx",
            phone: "12312312"
        };
        var x;
        var p = "";
        for(x in user){
            p += user[x];
        }
        console.log(p);

12xxx12312312

函数

简单的函数创建

function fn(){
            alert("hello javascript!");
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fn(){
            alert("hello javascript!");
        }
    </script>
</head>
<body>
    <h1>我的第一个JAVASCRIPT程序</h1>
    <button type="button" onclick="fn()">点我</button>
</body>
</html>

在这里插入图片描述

Date函数

          var date = new Date();  //Date 需要构造对象
        console.log(date.getFullYear());
        console.log(date.getMonth() + 1);   //getMonth() 返回的是当前月的上一个月，所以要加1
        console.log(date.getDate());
        console.log(date.getDay()); //这个返回的是星期几，如果是星期日 会返回0
        //返回时分秒
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds()); 
        //获取从1970.1.1到现在的毫秒数 (时间戳)
        var date = new Date();
        console.log(date.getTime());    //方法1
        console.log(date.valueOf());    //方法2
        console.log(Date.now());    //方法3
        //方法4
        var tmp = +new Date();
        console.log(tmp);

JavaScript 作用域

<script>
var a;
function fn(){
   	var b = "xxx";
}
console.log(a);
console.log(b);
</script>

在外部定义的是全局变量，函数内部定义的是局部变量
在这里插入图片描述
有一种特殊情况：
在函数中，没有var b; 直接用了 b变量b = "bbb";，b变量自动成为一个全局变量

<script>
    fn();  //此处不可少
    
    var a = "aaa";
    console.log(b);
    function fn(){
        b = "bbb";
    }
    console.log(a);
    console.log(b);
</script>

在这里插入图片描述

事件

onclick 用户点击 HTML 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        
        function fnDate(){
            document.getElementById('demo').innerHTML = Date();
        }
       
    </script>
</head>
<body>
    <input type="button" onclick="fnDate()" value="日期">
    <p id="demo" class="demo1">事件</p>
</body>
</html>

在这里插入图片描述
或者
<input type="button" onclick="getElementById('demo').innerHTML = Date()" value="日期">

字符串

可以采用这几种方式定义

var a1 = "123";
var a2 = '123';
//'' 和""这两个符号等效
var a2 = new String("123");

var a1 = "123";  //string 
var a2 = new String("123");  //object
console.log(a1===a2);

答案是false
因为 new String 创建的是一个String对象，而 === 比较的是数据类型和变量数值

字符串的方法
charAt() //返回字符

var a = "hello"; 
for(var i=0; i<a.length; ++i){
    console.log(a.charAt(i));
}

在这里插入图片描述
concat()连接字符串

var a = "hello";
var b = a.concat("js");
console.log(b);

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020102319262376.png#pic_cent
substring() 截取字符串

 var a = "hello,javascript";
var b = a.substring(6,10);  //截取下标从[6,10)
console.log(b);

输出：java
split() 字符串分割

var a = "hello,javascript";
var b = a.split(",");
for(var i=0; i<b.length; ++i){
    console.log(b[i]);
}

hello
javascript

JavaScript 类型转换

转换为字符串

x = x.toString();
x = String(x);   //推荐
x = x+"";

字符串转换为number类型

var a ="123";
var b = parseInt(a);
var c = parseFloat(a);
console.log(typeof b);
console.log(typeof c);

var a ="123.4";
var c = parseFloat(a);
console.log(c);

javascript变量提升

javascript中的变量可以先使用后声明，因为
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

var x = 5; // 初始化 x
var y;
document.getElementById("demo").innerHTML = "x 为：" + x + "，y 为：" + y; // 查找元素 
          // 显示 x 和 y
y = 7; // 初始化 y

在这里插入图片描述

javascript严格模式

严格模式下，
不允许使用未定义的变量、对象
不允许删除变量和对象
…
进一步规范了javascript的代码
使用方法
在使用的作用域中加上"use strict";

"use strict";
a = Array(1,2,3,4);
console.log(a[1]);

在这里插入图片描述
而没有使用严格模式

a = Array(1,2,3,4);
console.log(a[1]);
delete a;

在这里插入图片描述

javascript程序块作用域

和c语言不同，在代码块中javascript不会创建一个新的作用域，一般各个代码块中定义的变量、对象的作用域都是全局的。除了let和 const ，因为let 和 const 的作用域是局部的。
let 和const 关键字，它声明的变量作用域只在循环体内，循环体外的变量不受影响。

函数中的作用域不是全局而是局部的，定义的变量只有函数中可以使用。

fn();
function fn(){
    var x = 20;
}
for(var i=0; i<10; ++i){
    
}
console.log(i);
console.log(x);

在这里插入图片描述

{
   let i = 10;
}
console.log(i);

在这里插入图片描述

实例表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <p id="demo">请输入1到20之间的数字</p>
    <input type="text" id="input" >
    <input type="button" value="提交" onclick="myfun()">
    <p id="output"></p>
    <script>
       function myfun(){
            var x;
            x = document.getElementById("input").value;
            var y = document.getElementById('output');
            if(isNaN(x)||x<0||x>20){
                y.innerHTML = "输入错误!";
            }
            else{
                y.innerHTML = "输入正确!";
            }
       }

    </script>
</body>

</html>

在这里插入图片描述

javascript异步编程

在这里插入图片描述
JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。
setTimeout(code,millisec)方法用于在指定的毫秒数后调用函数或计算表达式。这个函数执行后会产生一个子线程，在等待指定毫秒后执行code函数

实例秒表计时程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //秒表计时程序
        var c = 0;
        var wt;
        function start(){
            document.getElementById('text').value = c;
            c = c+1;
            wt = setTimeout("start()",1000);
        }
        function stop(){
            clearTimeout(wt);
        }
        function reset(){
            c = 0;
            document.getElementById('text').value = c;
        }
    </script>
</head>
<body>
    <input type="button" onclick="start()" value="开始计时">
    <input type="text" id="text">
    <input type="button" onclick="stop()" value="停止计时">
    <input type="button" onclick="reset()" value="重置">  
</body>
</html>

在这里插入图片描述

葛济维的博客

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript入门学习学习笔记（上）

JavaScript学习笔记JavaScript入门学习六种数据类型Array对象函数JavaScript 作用域事件字符串java强制转换JavaScript入门学习六种数据类型JS中一共分成六种数据类型 5个基本数据类型+objectString 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义Object 对象其中基本数据类型有 5个String Number Boolean Null Undefined还有一种数据类型是Objectty
复制链接

扫一扫