JavaScript快速上手入门

1.快速入门

1.1引入JavaScript

1.1.1内部引入

<script>alert("hello,world");</script>

1.1.2.外部引入

zxf.js

alert("hello,world");

helloword.html

 <script src="js/zxf.js"></script>

注意! html5对标签极为严格,script标签必须成对出现

1.2.基本语法入门

1.2.1.变量和条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <script>
        // 1.定义变量 变量类型 变量名 = 变量值
        var score = 71;
        // 2.条件控制
        if (score>=60){
            alert("及格")
        }else {
            alert("不及格")
        }
        // console.log(score) 在浏览器控制台打印变量
    </script>
<body>

</body>
</html>

1.2.2.浏览器控制台打印变量

在这里插入图片描述

1.2.3.浏览器Debug调试

在这里插入图片描述

1.3.数据类型

number

123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-80 //负数
NaN //not a number 不是一个数
Infinity //表示无限大+*

字符串

'abc' ''abc''

布尔值

true false

逻辑运算

&&
||
!

比较运算符

= 赋值
== 等于(类型不一样,值一样,也会返回true)
===  绝对等于(类型一样并且值一样,返回true)

所以在js中不用== 进行比较
注意:

  • NaN这个值与所有的数值都不相等,包括本身
  • 只能通过isNaN(NaN)来判断这个数是否为NaN

浮点数问题

在这里插入图片描述

尽量避免使用浮点数进行比较
可以用绝对值相减小于一个无限接近于0的数来判断是否相等
在这里插入图片描述
null和undefined

null 空
undefined 未定义

数组
java中数组必须存放相同类型的值,而JS不需要这样

var arr = [1,2,null,"hello"];

如果数组下表越界了就会报undenfiend
对象

 var person = {
            name: "张筱枫",
            age: 22,
            tags: ["js","java","ssm"]
        }

取对象的值
在这里插入图片描述

1.4 严格检查格模式strict

"use strict" 严格检查模式,预防由于JavaScript的随意性而导致的一些问题

  • 必须写在第一行
  • Idea需要设置支持es6的语法

局部变量都使用let进行定义
使用之后运行直接报错。
在这里插入图片描述
在这里插入图片描述

2.数据类型详解

2.1.字符串

1.正常字符串使用单引号或者双引号包裹
2.转义字符 \

\'
\n
\t
\u4e2d     unicode字符
\\x41         Ascll字符

3.多行字符串编写
tab上面的`

 let msg = `
        早上好
        今天天气不错        
       `

4.模板字符串

  let name = '张筱枫'
  let msg = `早上好,${name}`

在这里插入图片描述
5.字符串长度

str.length

6.字符串的可变性,不可变
在这里插入图片描述
7.一些字符串的方法
在这里插入图片描述

2.2.数组

let var arr = [1,2,3,4,5]

1.长度
在这里插入图片描述
注意:假如给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失
2.indexOf ,通过元素获取下标索引
在这里插入图片描述
3.slice(),截取Array中的一部分,返回一个新数组。类似substring在这里插入图片描述
4.push() 压入元素,pop()弹出元素 尾部操作
在这里插入图片描述
5.unshift()压入元素 shift()弹出元素 头部操作
在这里插入图片描述
6.排序sort()
在这里插入图片描述
7.元素反转reverse
在这里插入图片描述
8.concat()
在这里插入图片描述
注意:concat并没有改变原有的数组,只是返回了一个新的数组
9.连接符join
打印拼接字符,使用特定的字符串连接
在这里插入图片描述
10.多维数组
在这里插入图片描述

2.3.对象

对象定义

	  var person ={
            name:"张筱枫",
            age:22,
            email:"1342486395@qq.com",
            score:100
        }

js中{…}表示一个对象,属性和属性值通过键值对的形式描述,多个属性之间用逗号隔开,最后一个属性不加逗号
JavaScript中所有的对象的键都是字符串,值可以是任意对象
1.对象赋值
在这里插入图片描述
2.使用一个不存在的属性,不会报错
在这里插入图片描述
3.动态删减一个属性 delete
在这里插入图片描述
4.动态增加一个属性
在这里插入图片描述
5.判断属性是否在这个对象中
在这里插入图片描述
6.判断一个属性是否是自身所拥有的
在这里插入图片描述

2.4.流程控制

1.if判断

var score = 71;
        if (score>=60){
            alert("及格")
        }else {
            alert("不及格")
        }

2.while循环

let i=0;
       while (i<100){
           i++;
           console.log(i);
       }

3.for循环

for (let i = 0; i <100 ; i++) {
            console.log(i);
        }

4.数组遍历
forEach循环

 let arr = [1,561,561,56,156,1,561,56,1,561,53];
        arr.forEach(function (value) {
            console.log(value)
        })

for in循环

 let arr = [1,561,561,56,156,1,561,56,1,561,53];
        for (let index in arr){
            console.log(arr[index])
        }

for of 循环

  for (let xin arr){
            console.log(x)
        }

2.5.Map和Set

ES6新特性
1.Map

//定义一个Map
let hero = new Map([["伊泽瑞尔","射手"],["拉克丝","法师"],["佐伊","法师"]])
        console.log(hero.get("伊泽瑞尔"));//获取键对应的值
        hero.set("vn","射手");//添加或修改元素
        hero.delete("佐伊")//删除元素
        console.log(hero)

在这里插入图片描述

2.Set 无序不重复的集合


 let set = new Set([1,2,3,3,])
        console.log(set)
        set.add(4)//添加一个元素
        set.delete(2)//删除一个元素
        console.log(set.has(1))//判断是否有这个元素

在这里插入图片描述

2.6.遍历集合

  let hero = new Map([["伊泽瑞尔","射手"],["拉克丝","法师"],["佐伊","法师"]])
        for (let x of hero){
            console.log(x)
        }

        let set = new Set([1,2,3,4])
        for (let x of set){
            console.log(x)
        }

在这里插入图片描述

3.函数

3.1.定义函数

定义方式一

function abs(x) {
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }

定义方式二

var abs = function (x) {
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }

在这里插入图片描述
一旦执行打return代表函数结束,返回结果
如果没有执行return,也不会报错,返回undefined或者NaN

参数问题:JavaScript可以传递任意个参数,也可以不传递参数
参数是否存在问题
假设不存在参数,如何规避

function abs(x) {
            if (typeof x!=="number"){
                throw "Not a Number";
            }//手动抛出异常判断参数是否存在
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }

在这里插入图片描述

arguments

arguments是一个数组,代表传递进来的所有参数

 function abs(x) {
            console.log("x>"+x);
            for (let i = 0; i <arguments.length ; i++) {
                console.log(arguments[i])
            }
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }

在这里插入图片描述

rest

ES6 新特性,获取除了已定义的参数以外的参数

function abs(x,...rest) {
            console.log("x>"+x);
            console.log(rest)
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }

rest参数只能写在最后面,必须用…标识

3.2.变量的作用域

var是有作用域的
假设在函数体中声明,则在函数外不可以使用
内部函数可以访问外部函数的成员,反之则不行

function zxf() {
            var x=1;
            x=x+1;
        }
        x=x+2;

在这里插入图片描述

提升变量的作用域

  function zxf() {
            var x = "x" +y;
            console.log(x)
            var y = "y";
        }

结果:xundefined

说明js执行引擎,自动提升了y的声明,但是不会提升y的赋值
所以养成规范,所有变量的定义都放在函数的头部便于代码维护

 function zxf() {
            var x,y,z;
            x="x";
            y="y";
            z="z";
        }

全局函数

//全局变量
  x= 1;
        function f() {
            console.log(x)
        }

        console.log(x)

全局对象window

   var msg = "欢迎你";
        alert(msg);
        alert(window.x);
        window.alert(x);

alert这个函数本身也是一个window变量
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用域范围内找到,就会向外查找,如果全局作用域都没有找到,报错ReferenceError

规范

由于所有变量都会绑定到window上,如果不同的js文件定义了相同的变量就会产生冲突

//唯一全局变量
        var FengApp={};
        //定义全局变量
        FengApp.name = "张筱枫";
        FengApp.add=function (a,b) {
            return a+b;
        }

所以需要把自己的代码全部放到自己定义的唯一明明空间中,降低全局变量冲突问题。

局部作用域 let

function f() {
            for (var i = 0; i <10 ; i++) {
                console.log(i)
            }
            console.log(i)//问题:这里的i仍然可以使用
        }

ES6新特性 let关键字 解决局部变量冲突问题

function f() {
            for (let i = 0; i <10 ; i++) {
                console.log(i)
            }
            console.log(i)//Uncaught ReferenceError: i is not defined
        }

定义局部变量时尽量都使用let定义

常量 const

在ES6之前,这样定义常量:只要用大写字母定义的就是常量,建议不要修改这样的值
在ES6之后,引入const关键字定义常量

        const PI ="3.14";//只读常量
        console.log(PI);
        PI="123";
        console.log(PI)//TypeError: Assignment to constant variable.

3.3.方法

方法就是把函数放到对象里面,对象只有两个东西:属性和方法

let person = {
            name: "张筱枫",
            birth: 1998,
            age:function () {
                let now = new Date().getFullYear();
                return now - this.birth;
            }
        }
//调用属性
person.name
//调用方法,一定要加()
person.age()

将上述代码拆开

 		function getAge() {
            let now = new Date().getFullYear();
            return now - this.birth;
        }
        let person = {
            name: "张筱枫",
            birth: 1998,
            age:getAge
        }

在这里插入图片描述
this是无法指向的,默认指向调用它的那个对象

apply

apply在js中可以控制this指向

       function getAge() {
            let now = new Date().getFullYear();
            return now - this.birth;
        }
        let person = {
            name: "张筱枫",
            birth: 1998,
            age:getAge
        }
        getAge.apply(person,[]);

在这里插入图片描述

4.内部对象

4.1 Date时间类

 let date = new Date();//标准事件
        date.getFullYear();//年
        date.getMonth();//月
        date.getDate();//日
        date.getDay();//星期几
        date.getHours();//时
        date.getMinutes();//分
        date.getSeconds();//秒
        date.getTime();//时间戳
        new Date(date.getTime());//时间戳转为事件
        date.toLocaleDateString();//转换为本地时间

4.2.JSON

在JavaScript中,一切皆对象,任何js支持的类型都可以用json来表示
格式:

  • 对象用{}
  • 数组用[]
  • 键值对用 key:value
        let person = {
            name:"张筱枫",
            age:22,
            sex:"男"
        }
        //将person对象转换为json字符串
        let s = JSON.stringify(person);
        //将json字符串转换为对象
        let person1 = JSON.parse(s);

在这里插入图片描述

5.面向对象编程

5.1.class继承

1.定义一个类

class Student{
            constructor(name) {
                name = this.name;
            }
            hello(){
                alert("hello")
            }
        }
        let s1 = new Student("小明");
        s1.hello();

2.继承

 class Student{
            constructor(name) {
                name = this.name;
            }
            hello(){
                alert("hello")
            }
        }
        class Student1 extends Student{

            constructor(name,age) {
                super(name);
                this.grade=age;
            }
           run(){
                alert("run..");
           }
        }
        let s1 = new Student("小明");
        let s2 = new Student1("小红",2);
        s2.run();

本质:查看对象原型
在这里插入图片描述

6.操作BOM对象(重点)

6.1.window

window代表浏览器窗口

window.innerHeight
754
window.outerHeight
824
window.innerWidth
507
window.outerWidth
1536

6.2.screen

screen代表屏幕

screen.width
1536
screen.height
864

6.3.location

代表当前页面的url信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign("https://blog.csdn.net/qq_43601784")

6.4.document

代表当前的页面 HTML,文档树

document.title
"百度一下,你就知道"

获取具体的文档树节点

  <dl id="dd">
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
    </dl>
    <script>
        let elementById = document.getElementById("dd");
    </script>

在这里插入图片描述
获取cookie

document.cookie
"BIDUPSID=C3C549769A716B3F0FAFA74D23F90541; PSTM=1596446785; BAIDUID=C3C549769A716B3F6E878D8C70EC6BA6:FG=1; COOKIE_SESSION=0_0_0_0_1_0_1_0_0_0_0_0_0_0_0_0_1596446786_0_1596446786%7C1%230_0_1596446786%7C1; BD_HOME=1; delPer=0; BD_CK_SAM=1; PSINO=3; BD_UPN=12314753; H_PS_645EC=6b61Jg3nDKjVkELSocgM0CW08T7i9xJqdS7NQDe9JQnbR4qgv8EM9bOtBDk; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=7540_32606_1436_7546_32328_31253_7610_32675_7626_32116_7565_26350"

6.5.history

代表浏览器的历史记录

history.back() //后退
history.forward() //前进

7.操作DOM对象(重点)

7.1.核心

浏览器网页就是一个Dom树形结构。

  • 更新:更新Dom节点
  • 遍历:得到Dom节点
  • 删除:删除Dom节点
  • 添加:添加Dom节点

要操作Dom节点,需要先获得这个Dom节点

7.2.获得Dom节点

<body>
   <div id="father">
       <h1>标题</h1>
       <p1 id="p1">1</p1>
       <p2 class="p2">2</p2>
   </div>
   <script>
       let father = document.getElementById("father");
       let h1 = document.getElementsByTagName("h1");
       let p2 = document.getElementsByClassName("p2");
       let p1 = document.getElementById("p1");
       let children = father.children; // 获取父节点下的所有子节点
       // father.firstChild;
       // father.lastChild;
   </script>
</body>

7.3.更新节点

<div id = "div">

    </div>
    <script>
        let div = document.getElementById("div");
    </script>

操作文本的值

div.innerText='123'

div.innerHTML='<strong>123</strong>'

操作js

div.style.color='red'

div.style.fontSize='200px'

div.style.padding = '2em'

7.4.删除节点

删除节点步骤:先找到要删除节点的父节点,再通过父节点删除自己

   <div id="father">
       <h1>标题</h1>
       <p1 id="p1">1</p1>
       <p2 class="p2">2</p2>
   </div>
   <script>
      let p1 = document.getElementById("p1");
      let father = p1.parentElement;
      father.removeChild(p1);
	 //删除是一个动态的过程
      father.removeChild(father.children[0]);
   </script>

注意:在删除节点时,children的节点是不断变化的、

7.4.插入节点

追加插入节点

<p id="js">JavaScript</p>
    <div id="list">
        <p id="javase">javase</p>
        <p id="javaee">javaee</p>
        <p id="javame">javame</p>
    </div>
    <script>
        let js = document.getElementById("js");
        let list = document.getElementById("list");
        list.appendChild(js);
    </script>

在这里插入图片描述
通过js创建一个新的标签

    <script>
        let js = document.getElementById("js");//已经存在的节点
        let list = document.getElementById("list");
        list.appendChild(js);
        //通过js创建一个节点
        let newP = document.createElement('p');
        newP.id = "newP";
        newP.innerText = "Spring";
        list.appendChild(newP);

    </script>

insert插入

<script>
        let js = document.getElementById("js");//已经存在的节点
        let javase = document.getElementById("javase");
        let list = document.getElementById("list");
        list.insertBefore(js,javase);//insertBefore(newNode,targetNode)
    </script>

8.操作表单(重要)

判断输入内容是否为空

<body>
<script>
    let name = document.getElementById('name');
    function x(x) {
            if (x.textContent==null||x.textContent.replace(/^ +| +$/g, '') == '') {
                alert("不能为空")
            }
    }
</script>
<form action="">
    <span id="name_tip">用户名</span><input onblur="x(name)" type="text" id="name"><span id="test" style="color: red"></span>
</form>
</body>

在这里插入图片描述

9.jQuery

jQuery里存在大量的JavaScript函数
jQuery文档

链接: https://www.runoob.com/jquery/jquery-tutorial.html

9.1.jQuery初步使用

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

${selector}.事件(function(){

})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<a href="" id="test-jQuery">点我</a>
<script>
    $('#test-jQuery').click(function () {
        alert("hello,jQuery");
    })
</script>
</body>
</html>

9.2.选择器

   $('.class')//类选择器
    $('#id')//id选择器
    $('p')//标签选择器

9.3.事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
    #divMove{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
</style>
<!--获取当前鼠标的坐标-->
<body>
mouse : <span id="mouseMove"></span>
移动鼠标
<div id="divMove"></div>
<script>
    //当网页加载完成后,响应事件
    $(function () {
        $('#divMove').onmousemove(function (e) {
            $('#mouseMove').text("x:"+e.pageX + "y:"+e.pageY)
        })
    });

</script>
</body>
</html>

9.4.操作DOM

节点文本操作

 $('#test-ul li[name=python]').text();//获得值
 $('#test-ul li[name=python]').text("PYTHON");//设置值

css操作

    $('#test-ul li[name=python]').css("color","red");

显示和隐藏

  $('#test-ul li[name=python]').show();//显示
    $('#test-ul li[name=python]').hidden();//隐藏
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
泛微 Ecode 是一款低代码开发平台,它提供了快速入门教程来帮助开发者快速上手。以下是一个关于泛微 Ecode 快速入门 demo 的简介: 首先,你需要先下载并安装泛微 Ecode 开发平台。安装完成后,打开 Ecode 平台,在首页上可以看到“快速入门”选项。点击进去,会显示一些快速入门的教程资源。 在快速入门教程中,你将了解到如何创建一个新的应用程序。Ecode 提供了一个开发者工具箱,你可以在工具箱中选择需要的组件,然后拖放到页面上进行设计和排布。你可以通过简单的拖动和配置来定义页面的布局和交互逻辑。 在教程中,你将学习如何添加数据模型和数据表。Ecode 提供了数据模型的设计工具,你可以根据自己的需求来创建数据模型,定义数据表的结构和属性。然后,你可以通过添加数据表的方式来管理和操作数据库中的数据。 在快速入门 demo 中,你还将学习如何添加业务逻辑。Ecode 支持使用 JavaScript 或 C# 来编写业务逻辑代码,在教程中将详细介绍如何在 Ecode 平台上编写和管理业务逻辑代码。你可以通过添加事件和触发器的方式来实现交互功能,并在代码中处理不同的业务逻辑。 最后,在 demo 教程的最后阶段,你将了解到如何进行应用程序的发布和部署。Ecode 提供了丰富的部署选项,你可以选择将应用程序部署到云端服务器、物理服务器或者本地开发环境中进行测试和调试。 通过这个快速入门 demo,你将全面了解并掌握泛微 Ecode 的开发流程和基本功能。你可以根据自己的需求和项目要求,进行二次开发和定制,快速构建自己的应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值