JavaScript—JS Basis

JS-Basis

  1. 简介

    JavaScript诞生于1995年,它的出现主要用于处理网页中的前端验证;前端验证就是检查用户输入内容是否符合一定的规则(浏览器验证并非服务器验证是否符合规则),比如用户名的长度、密码的长度和邮箱格式等。

    ECMAScript是JavaScript的一个标准文档,这个标准是由各个厂商去实现;不同的浏览器厂商对该标准会有不同的实现;

    一个完整的JavaScript主要由三个部分组成:ECMAScript(标准文档)、DOM(文档对象模型)、BOM(浏览器对象模型);

  2. 特点

    —解释型语言;

    —类似于C语言和Java的语法结构;

    —动态语言;

    —基于原型的面向对象

  3. JS编写规则

    —JS代码要编写到<head>标签下的<script>标签中;

    <script type="text/javascript">
        /*控制浏览器弹出一个警告框*/
        alert("这是我的第一行JS代码");
    	/*向body中写入内容*/
        document.write("写入body内容");
        /*向控制台写入内容*/
        console.log("向控制台写入内容");
    </script>
       
    
  4. JS代码编写位置

    (1)可以将JS代码编写到标签的onclick属性之中:

    <button οnclick="alert('莫挨老子');">点我一下呗</button>
    

    (2)可以将js代码写入超链接的href属性中,当点击超链接时执行JS代码

    <a href="javascript:alert('让你点我你就点我');">点我一下呗<\a>
    

    以上两种方式虽然可以写入标签属性中,但是它们属于结构与行为耦合,不方便维护,不推荐使用

    (3)写入<script>标签中

    <script>
    	alert("这是写入script标签的代码");
    </script>
    

    (4)写入.js文件中,通过<script>标签引入外部.js文件

    /*
    script标签一旦用于引入外部文件,其标签下编写的js代码就失效,即使编写了js代码,浏览器也会忽略,如果需要可以在创建一个新的script标签,用于编写内部js代码
    */
    <script src="js文件的路径">
    	alert("这个script标签里面的语句不会被执行");
    </script>
    

    写入外部文件中,可以在不同页面中同时引用,也可以利用浏览器的缓存机制,开发中推荐使用;

  5. JS基本语法

    —JS语法中严格区分大小写

    —JS中每一条语句都要以英文分号结尾;如果不写分号,浏览器会自动添加,但是会消耗一些系统资源;有些时候浏览器会加错分号;

    —JS会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化;

  6. 字面量和变量

    字面量:无法改变的值,比如常量,字面量可以直接使用,但是一般不会直接使用;

    变量:变量可以用来保存字面量,并且变量的值可以是任意改变的;变量更加方便使用;在开发过程中,通过一个变量去保存一个字面量,很少直接使用字面量;

    声明变量:在JS中使用var关键字来声明一个变量:

    <script>
    	//声明变量
        var a;
        a=10;
        //同时声明变量并赋值
        var b=20;
        //控制台显示输出两个变量值
        console.log(a);
        console.log(b);
    </script>
    
  7. 标识符

    —标识符:在JS中所有可以由我们自主命名的都可以称为标识符;例如:变量名、函数名、属性名都属于标识符;

    —命令标识符的规则:

    1. 标识符可以是字母、数字和下划线_以及$符号
    2. 标识符不能以数字开头
    3. 标识符不能是ES中的关键字或保留字
    4. 标识符一般采用驼峰命名法:首字母小写,每个单词的开头字母大写(除了首个单词)其余字母小写,例如:helloWorld;

    —JS底层保存标识符时,实际上采用的是Unicode编码,所以理论上,所有的utf-8中含有的内容都可以作为标识符,例如中文字符,但不使用;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是商品展示页面的HTML、CSS和JavaScript代码示例: HTML代码: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Product Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Product Page</h1> </header> <main> <div class="products"> <div class="product"> <div class="product-image"> <img src="product-image-1.jpg" alt="Product Image"> </div> <div class="product-details"> <h2 class="product-title">Product Name 1</h2> <p class="product-description">Product Description</p> <p class="product-price">$19.99</p> <button class="add-to-cart" data-product-id="1">Add to Cart</button> </div> </div> <div class="product"> <div class="product-image"> <img src="product-image-2.jpg" alt="Product Image"> </div> <div class="product-details"> <h2 class="product-title">Product Name 2</h2> <p class="product-description">Product Description</p> <p class="product-price">$29.99</p> <button class="add-to-cart" data-product-id="2">Add to Cart</button> </div> </div> <div class="product"> <div class="product-image"> <img src="product-image-3.jpg" alt="Product Image"> </div> <div class="product-details"> <h2 class="product-title">Product Name 3</h2> <p class="product-description">Product Description</p> <p class="product-price">$39.99</p> <button class="add-to-cart" data-product-id="3">Add to Cart</button> </div> </div> </div> </main> <footer> <p>© 2021 Product Page. All rights reserved.</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS代码: ``` * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; } header { background-color: #1abc9c; color: #fff; padding: 20px; text-align: center; } main { padding: 20px; } .products { display: flex; flex-wrap: wrap; justify-content: space-between; } .product { flex-basis: calc(33.33% - 20px); margin-bottom: 20px; display: flex; align-items: stretch; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0px 0px 5px #ccc; } .product-image { flex-basis: 40%; display: flex; align-items: center; justify-content: center; } .product-image img { max-width: 100%; max-height: 100%; } .product-details { flex-basis: 60%; padding: 20px; } .product-title { font-size: 24px; margin-bottom: 10px; } .product-description { font-size: 16px; margin-bottom: 10px; } .product-price { font-size: 20px; font-weight: bold; margin-bottom: 10px; } .add-to-cart { padding: 10px 20px; font-size: 16px; font-weight: bold; color: #fff; background-color: #1abc9c; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .add-to-cart:hover { background-color: #16a085; } ``` JavaScript代码: ``` const cart = []; function addToCart(event) { const productId = event.target.getAttribute('data-product-id'); cart.push(productId); console.log(cart); } const addToCartButtons = document.querySelectorAll('.add-to-cart'); for (let i = 0; i < addToCartButtons.length; i++) { addToCartButtons[i].addEventListener('click', addToCart); } ``` 以上代码实现了一个简单的商品展示页面,包含商品的名称、描述、价格和添加到购物车的按钮。JavaScript代码实现了将商品添加到购物车的功能,每次单击“Add to Cart”按钮时,将商品ID添加到cart数组中,并在控制台中打印出cart数组。你可以根据需要自定义商品展示页面的样式和功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值