JS lesson1基本语法

最新推荐文章于 2022-08-30 09:12:56 发布
最新推荐文章于 2022-08-30 09:12:56 发布
阅读量166 收藏
点赞数
分类专栏： 零基础 文章标签： js jquery html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S2020chenxin/article/details/114994096
版权

说明:===代码中有具体使用方法及解释，不做多余赘述:希望能有点耐性，有不足之处不吝赐教

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    // 内部标签
    //外部引入 / js 放置位置2
    <script src="1_1.js">
		alert("hello world");  //弹窗提示
	</script>
    

</head>
<body>
//js 放置位置2
<!--<script>-->
<!--    alert("hello world");-->
<!--</script>-->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var map = new Map([['tom',100],['jack',90],['laing',60]]);
        var name = map.get('tom');  //通过关键key获得value
        map.set('admin',123);  //新增或修改
        map.delete("tom");

        // 无序不重合集合
        const set = new Set();
        set.add(2);
        set.delete(1);
        console.log(set.has(3));


        // 遍历
        var arr =[3,4,5]
        for (var x of arr){
            console.log(x)
        }

        var map = new Map([['tom',100],['jack',90],['laing',60]]);
        for (let x of map){
            console.log(x)
        }

        var set1 = new Set([6,7,8]);
        for (let x of set1){
            console.log(x)
        }
    </script>
</head>
<body>

</body>
</html>

json 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json</title>
</head>
<body>
     <script>
         var student={
             name:"xiaoming",
             age:3,
             width:178,
         }

         var json = JSON.stringify('{"name":"穷尽","zhong":"shide"}');

         var obj = JSON.parse('{"name":"穷尽","zhong":"shide"}');

         // 面向对象编程
         var stu={
             name:"dage",
             sex:"男",
             func:"xiebi",
             run:function () {
                 console.log(this.name+"run...");
             }
         };

         var xiaoming={
             name:"xiaoming"
         };

         xiaoming._proto_ = stu;
         var bird = {
             fly:function () {
                 console.log(this.name+"fly...");
             }
         }
         xiaoming._proto_ = bird;

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

表单加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单加密</title>
</head>
<body>
<!--
   表单绑定提交事件
   onsubmit = 绑定一个提交检测函数，true false
   将这个结果返回给表单 ，使用onsubmit接收
   οnsubmit='return a()'
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
    <p>
        <span>用户名:</span><input type="text" id="user_name" name="user">
    </p>
    <p>
        <span>密码:</span><input type="text" id="input-password" name="password">
    </p>>
    <input type="hidden" id="md5-password" name="password">
<!--    绑定事件onclick 被点击-->
    <button type="submit">提交</button>
</form>

<script>
    function a(){
        alert(1);
        var unname = document.getElementById('user_name');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5pwd');

        md5pwd.value = md5(pwd.value);
        return true;
    }
</script>
</body>
</html>

‘use strict’;严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03</title>
</head>
<body>
<!--前提：要支持es6语法-->
<!--'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript第一行，局部变量用let 定义  也可以用var定义
-->
<script>
    'use strict';
    //  全局变量
    let i = 1;
</script>
</body>
</html>

内部对象

<script>
    var now = new Data();
    now.getFullYear();
    now.getMonth();
    now.getDay();
    now.getTime();
</script>

变量作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function qi(){
        var x = 1;
        x = x +1;
    }
    //  x = x+2;  不能作用于函数的外部
    function qj2(){
        var x = 'A';
        x = x+1;
    }
    // z = x +y;  不能作用
    //=================
    // 规范
    var nice ={};
    //定义全局变量
    nice.name = "jack";
    nice.add = function (a,b) {
               return a+b;
    }
</script>
</body>
</html>

基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    // 1. 定义变量  变量类型 变量民 = 变量值；
    var num=71;
    alert(num);
    if (num>70&&num<80){
        alert("70-80");
    }else if (num>80&&num<90){
        alert("80-90");
    }else{
        alert("nice")
    }
    // 数组类型不严格
    // var arr=[1,2,3,4,5,6,7,ture,"to"]

    // 网页调试通过控制台  console.log(num)
    // 调试对象  person p = new per son();
    var person = {
        name:"jiage",
        age:6,
        tag:['mingming','hhh']

    }
</script>
<body>

</body>
</html>

字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 1.正常字符串用单引号，双引号包裹
        'use strict';
        //
        // console.log("a\nb");
        // console.log("\U4e2d");     // Unicode 字符
        //
        // let name = "大哥";
        // var ma=`
        // 'jiushiwo ',
        // 'zhende大哥大',${name}  `


        // 3.3 对象
        // var person = {
        //     name:"jiuge",
        //     age:3,
        //     email:"520@youdianlai",
        //     score:10
        // }

        //
        // while(true){
        //     alert("nerouva");



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


       var map = new Map(['jiege',100],['shima',200])

    </script>
</head>
<body>

</body>
</html>

函数的定义

<script>
    // 第一种
    function abs(x){
        if (x>0){
            return x;
        }else{
            return -x;
        }
    }
</script>

节点插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入节点</title>
</head>
<body>
<p id="js">javasript</p>>
<div id="list">
    <p id="se">javeSE</p>
    <p id="ee">javeEE</p>
    <p id="me">javeME</p>
</div>
    <script>
        var js= document.getElementById('js');
        var list= document.getElementById('list');
        list.appendChild(js)
//     通过js创建一个新的节点
        var newP = document.createElement('p');
        newP.id = 'newP';
        newP.innerText='我的大帅哥';
        list.appendChild(newP)


        // 动态插入
       var
           list = document.getElementById('list'),
           demo = document.getElementById('ee'),
           de = document.createElement('p')
        de.id = 'decket';
        de.innerText = 'demoage';
        list.insertBefore(de,demo);  // (先前的节点，插入的节点)
    </script>
</div>
</body>
</html>

调用方法

<script>
    var nice ={
        name:'jack',
        birth:2000,
        age:function () {
            var now = new Data().getFullYear();
            return now-this.birth;
        }
    }
    // 方法调用一定要带括号（）
    nice.age();
    nice.name;
</script>

获取Dom节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1"></p>
    <p class="p2"></p>

</div>
<script>
    // 对应的CSS选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var childrens = father.children;  // 获取父节点下的所有子节点
    // father.firstChild
    // father.lastChild

    //2. 删除节点0
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
    // 删除个动态过程
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

表单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="post">
    <p>
        <SPAN>用户名:</SPAN> <input type="text" id="username">
    </p>

    <p>
        <span>性别:</span>
        <input type="radio" name="man" id="boy">男
        <input type="radio" name="woman" id="girl">女
    </p>
</form>


<script>
    var input_text = document.getElementById('username');
    var  boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

   input_text.value
    // 得到输入的值 输入的为中国 ->"中国"
    input_text='zhonguo'
    //改变值 "zhonguo"
    girl_radio.checked
   // true
</script>
</body>
</html>
成谜的李四
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS Lesson1
jaycaoln的博客
10-09 201
关键字：querySelector setAttribute getAttribute prompt 关键代码段啊
js_lesson_3——函数声明使用，简单练习
只爱故事不爱酒的秃头少女的博客
07-15 164
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> // 高内聚 弱耦合 // 函数声明 // function test(){} 函数的声明 // 1. 命名函数表达式，最后还是会变成匿名的 var test = function abc(){} .
<javascript>Lesson1.初识javascript
码婆Doph
06-07 316
初识js
javaScript
qq_38571802的博客
01-12 293
javaScript(js) 1、概述 javaScript是一门世界上流行的脚本语言！ java、javaScript 一个合格的后端人员，必须精通javaScript ECMAScript它可以理解为是javaScript的一个标准 开发环境–线上环境，版本不一致！ 2、快速入门 2、1 引入javaScript 1、内部标签 2、外部标签引入 <!--script标签内，写javaScript代码--> <!--<script> alert
Vue2_lesson2_Vue模板语法
最新发布
Sirow的博客
08-30 118
vue中语法模板
lesson 2 Gradle基本语法
wwjjhh的博客
01-15 138
lesson 2 Gradle基本语法 之前说过，gradle是基于Groovy语言的，那么现在来说一说他的一些基本语法，和在gradle中常用的一些方法。 如果小伙伴们使用了eclipse或者idea那么都可以使用IDE中安装的groovy插件进行操作。下面以idea为例。 在idea中工具栏中选择tools-&amp;amp;gt;Groovy console就可以打开一个groovy的窗口了。 然后可以在里...
JavsScript基础语法03-对象
Amo Xiang的博客
08-17 2416
目录1. 对象的相关概念1.1 为什么需要对象?1.2 对象的属性名1.3 对象的方法2. 创建对象的三种方式2.1 直接创建自定义对象2.2 通过自定义构造函数创建对象2.3 通过Object对象创建自定义对象3. 对象访问语句4. ES6扩展的对象和功能 1. 对象的相关概念 对象是 JavaScript 中的数据类型之一，是一种复合的数据类型，它将多种数据类型集中在一个数据单元中，并允许通过对象来存取这些数据的值。 对象的概念首先来自于对客观世界的认识，它用于描述客观世界存在的特定实体。比如，手机 就
php i p d 1,PHP基础语法1
weixin_42549723的博客
03-12 93
PHP简介PHP(外文名:PHP: Hypertext Preprocessor，中文名：超文本预处理器，是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML(...
《微信小程序前端开发》（黑马） 课程笔记 Lesson 1 语法基础
LeungSr的博客
11-28 1117
文章目录1. 标签及其含义2. 数据绑定3. 运算表达式4. 列表与对象循环5. block标签的使用6. 条件渲染7. JavaScript配置8. 最终效果及展示写在最后 1. 标签及其含义 text: 相当于web中的span，一行内写多个不会换行 view：相当于web中div标签，一行内写多个会换行 checkbox: 以前的复选框标签 2. 数据绑定 <!-- 1. 字符串 --> <view>{{msg}}</view> <!-- 2. .
JS-course_lesson14-1
02-20
本课程“JS-course_lesson14-1”将深入探讨JavaScript的高级特性与实践技巧，为你的编程技能添砖加瓦。 在JavaScript的世界里，第14课可能是关于函数式编程、异步处理或者模块化等主题。函数式编程是一种编程范式，...
javascript网页开发-张孝祥_lesson1
09-14
1. **JavaScript基础**：课程可能会从JavaScript的基本语法开始，包括变量声明（var、let、const）、数据类型（字符串、数字、布尔、null、undefined、对象、数组、Symbol）、运算符（算术、比较、逻辑、赋值、三元...
lesson-1
03-25
这个名为"lesson-1"的压缩包可能是一个教学资源，旨在引导初学者入门JavaScript编程。JavaScript主要用于为网页添加交互性，允许用户与页面进行实时互动，比如动态更新内容、响应用户点击事件等。 JavaScript的基础...
lesson1:git教育
06-26
综上所述，这个“lesson1:git教育”教程涵盖了Git基础、JavaScript开发和测试的实践。通过这个教程，学习者将能够掌握Git的基本命令，了解JavaScript项目的基本构建和测试流程，同时提升他们的编程和协作能力。对于...
glo_lesson1
02-11
综上所述，"glo_lesson1"可能是一个全面介绍JavaScript编程基础的课程，旨在引导学生逐步掌握这门语言，理解其工作原理，并能运用到实际的网页开发中去。通过实践和理解压缩包中的代码示例，学生将能够建立起坚实的...
mysql 安装问题
热门推荐
S2020chenxin的博客
11-18 2万+
MYSQL 安装时遇到这个问题 The configuration for MySQL Server 8.0.22 has failed. You can find more information about the failures in the ‘Log’ tab. 第一个方法 看是否正确以管理员安装MySQL 在windos 的cmd下安装mysql 在mysql的bin目录下面执行： mysqld --install 报错： 信息如下： Install/Remove of the Serv
mysql 安装失败原因大全（diao ，基本都让我给踩了个遍，这运气...）
S2020chenxin的博客
08-03 4822
https://support.microsoft.com/zh-cn/topic/%E6%9C%80%E6%96%B0%E6%94%AF%E6%8C%81%E7%9A%84-visual-c-%E4%B8%8B%E8%BD%BD-2647da03-1eea-4433-9aff-95f26a218cc0
Error creating bean with name ‘sqlSessionFactory‘ defined in class path resource [spring-dao.xml]
S2020chenxin的博客
07-17 4008
控制台报错 17-Jul-2021 22:02:35.869 信息 [http-nio-8080-exec-2] org.apache.catalina.core.ApplicationContext.log Initializing Spring FrameworkServlet 'springmvc' 17-Jul-2021 22:02:38.157 严重 [http-nio-8080-exec-2] org.apache.catalina.core.ApplicationContext.log Ser
23种设计者模式概述
S2020chenxin的博客
05-10 1865
一、什么是设计模式 设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性 设计模式有两种分类方法: 目的、作用。 ：目的： 1.创建型模式：用于描述“怎样创建对象”，它的主要特点是“将对象的创建与使用分离”。eg: 单例、原型、工厂方法、抽象工厂、建造者等 5 种创建型模式。 2. 结构型模式：用于描述如何将类或对象按某种布局组成更大的结构，eg: 代理、适配器、桥接、装饰、
新概念英语第二册Lesson1-10知识点与练习解析
此外，Lesson1还介绍了一些实用的短语和表达，如 "be interesting" 表示有趣，"get angry" 意为生气，"turn round" 指的是转身，"pay attention" 是注意，"none of your business" 意思是不关你的事，"in the end" ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值