Web前端基础(13)

简介: Web前端基础

####溢出设置overflow


visible(默认) 超出范围显示

hidden 超出范围不显示

scroll 超出范围滚动显示

###JavaScript

作用:给页面添加动态效果

和Java没有任何关系,只是为了蹭热度

语言特点:

属于脚本语言,不需要编译直接解析执行

基于面向对象

属于弱类型语言 int x = 10; String s = “abc”; 弱类型 var x = 10; var s = “abc”;

安全性高,JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据不允许访问

交互性高,因为JS语言可以嵌入到html页面中直接和用户进行交互

###如何在html页面中引入JavaScript

内联:在标签的事件属性中添加js代码,当事件触发时执行js代码

内部:在html页面的任意位置添加script标签,标签体内写js代码,当页面加载时执行

外部:在单独的js文件中写js代码,在html页面中通过script标签的src属性引入,页面加载时执行

###语法

包括: 变量 数据类型 运算符 各种语句 方法 面向对象

###变量声明和赋值

JavaScript属于弱类型语言

java: int x = 10; String s = “abc”; x=“abc”;(报错,类型不匹配) Person p = new Person();

JS: var x = 10; var s = “abc”; x=“abc”;不报错 var p = new Person();

###数据类型

JavaScript中只有对象类型

几种常见的对象类型:

数值:number 相当于java中所有数值类型的综合 var x=18; var y = 18.5;

字符串:string 可以用单引号或双引号赋值 var s = “abc”/‘abc’;

布尔值:boolean true/false

未定义:undefined 当变量只声明不赋值时 此时变量的类型为未定义类型.

自定义:object Person Car Hero

###运算符 + - * / % > < >= <= = != ==

和Java大体相同

==和===, ==是先统一两个变量的类型再比较值,===先比较类型如果类型相等再比较值

"666"==666 true; "666"===666 false

除法运算: 会根据结果自动转换整数或小数 ,

java: int x = 5; int y=2; x/y=? 2

js: var x=5; var y=2; x/y=? 2.5 x=6 x/y=?3

typeof 变量; 作用: 获取变量的类型

###语句 if else for while switch case

for循环中 int i 改成 var i

###方法

java: public 返回值类型 方法名(参数列表){方法体}

js : function 方法名(参数列表){方法体}

如何声明常见的四种方法:

无参无返回值

无参有返回值

有参有返回值

有参无返回值

js中有三种声明方法的格式:

function 方法名(参数列表){方法体} **********


var 方法名 = function(参数列表){方法体}


var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

###和页面相关的方法


通过元素的id 获取元素对象

var d = document.getElementById(“d1”);


获取和修改元素的文本内容


获取: d.innerText;

修改: d.innerText=“xxx”;

获取和修改文本框的值

修改: input.value=“abc”;

获取: input.value;

获取和修改元素的html内容

获取: d.innerHTML

修改: d.innerHTML="<h1>abc</h1>";

###NaN


Not a Number: 不是一个数.

isNaN(x) 判断x是否是NaN 返回值true代表是NaN(不是数) 返回值false代表不是NaN(是数)


练习:


1.溢出方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      div{
        width: 300px;
        height: 300px;
        border: 1px solid blue;
        /* visible(默认) 
        hidden超出隐藏 scroll超出滚动*/
        overflow:scroll;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="../2.jpg" >
    </div>
  </body>
</html>

显示效果

image.png

2.引入方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!-- 内联引入方式 -->
    <input type="button" value="按钮" onclick="alert('内联引入成功!')"/>
    <!-- 内部引入方式 -->
    <script type="text/javascript">
      alert("内部引入成功!")
    </script>
    <!-- 引入外部js文件 -->
    <script src="my.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

显示效果

image.png




目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
3月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
3月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
3月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
3月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
98 3
|
3月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
61 3
|
3月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
104 2
|
移动开发 前端开发 程序员
好程序员web前端培训分享DIV+CSS3和html5+CSS3有什么区别
好程序员web前端培训分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对网页开发布局方式的统称,但是DIV+CSS3作为网页的基础开发这句话其实并不严谨,因为而div只是HTML的一个比较重要的元素而已,而标准的叫法应是HTML+C...
8522 0
|
2月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75