web前端技术笔记（）js简介与基本语法

最新推荐文章于 2022-10-19 16:13:12 发布
最新推荐文章于 2022-10-19 16:13:12 发布
阅读量158 收藏
点赞数
分类专栏： 前端 文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27251475/article/details/90792204
版权 

​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p style="text-indent:2em">HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。</p>

<p style="text-indent:2em;font-size: 20px;">HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。</p>

    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮">

</body>
</html>

​

JS的三种引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--第三种页面上嵌入javascript的方式：外链式 推荐使用 js文件内容与第二种中间部分一致-->
    <script src="js/hello.js"></script>

    <!--第二种页面上嵌入javascript的方式：内嵌式 部分推荐-->
    <script type="text/javascript">
        alert("hello,222")
    </script>
</head>
<body>
<!--第一种页面上嵌入javascript的方式：行间事件 不推荐使用-->
<input type="button" value="普通按钮" onclick="alert('hello')">

</body>
</html>

JS基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //单行注释

        /**
         * 多行注释
         */


        // 定义整数
        var iNum=12;

        // 定义字符串
        var sTr='abc';

        // 定义布尔类型
        var bIsMove=true;

        //变量声明，但没有赋值，它的类型和值都是undefined
        var iNum01;
        alert(iNum01);

        alert(iNum);
        alert(sTr);
        alert(bIsMove);
        alert(typeof iNum);
        alert(typeof sTr);
        alert(typeof bIsMove);

    </script>

</head>
<body>

</body>
</html>

JS函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 调用函数，函数在下面定义，可以在上面调用，这个叫做函数的预解析
        fnMyAlert();

        // 定义函数
        function fnMyAlert(){
            alert("hello!");
        }

        // 上下都没有定义的变量，调用时会报错
        // alert(iNum02);

        // 变量在下面定义，在上面调用，它的值是undefined这个叫做变量的预解析
        alert(iNum01);
        var iNum01=11;

        // 带参函数
        function fnAlert(a){
        alert(a);
        }
        fnAlert(12345);

        // 有返回值的函数
        function fnAdd(iNum01,iNum02){
        var iRs = iNum01 + iNum02;
        return iRs;
        alert('here!');
        }
        alert(fnAdd(3,4));  //弹出7

    </script>
</head>
<body>

</body>
</html>

JS条件语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var iNum01 = 12;
        var sNum02 = '12';
        /*
        if(iNum01==12){
           alert('相等！');
        }
        else{
            alert('不相等！');
        }
        */
        
        // "==" 默认会将符号两边的变量转换成同一类型再做比较，这个叫做隐式转换
        /*if(iNum01==sNum02){
            alert('相等！')
        }
        else{
            alert('不相等')
        }
        */

        // "===" 不会转换两边的变量类型，类型不同，就返回false
        if(iNum01===sNum02){
            alert('相等！')
        }
        else{
            alert('不相等')
        }

        if(10>5 && 5>3)
        {
            alert('全部大于');
        }
        else{
            alert('至少有一个不大于')
        }

        if(10>5 || 2>3)
        {
            alert('至少有一个大于');
        }
        else{
            alert('全部都不大于')
        }

        if(!10>5){
            alert('大于！');
        }
        else{
            alert('不大于！');
        }
    
    </script>
</head>
<body>
    
</body>
</html>

JS多重条件语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 星期是 0 ~ 6
        var iNow = 6;

        if(iNow==1)
        {
            alert('学习！')
        }
        else if(iNow==2)
        {
            alert('学习2')
        }
        else if(iNow==3)
        {
            alert('自习')
        }
        else if(iNow==4)
        {
            alert('学习4')
        }
        else if(iNow==5)
        {
            alert('学习5')
        }
        else{
            alert('休息！')
        }
    
    </script>
</head>
<body>
    
</body>
</html>

获取元素的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 当页面加载完成之后，再执行大括号里面的代码
        // window.onload=function(){
        //     document.getElementById('div1').style.color='red';
        //     document.getElementById('div1').style.fontSize='30px';
        //     document.getElementById('div1').style.width='300px';
        //     document.getElementById('div1').style.height='300px';
        //     document.getElementById('div1').style.background='gold';
        // }

         window.onload=function(){
             var oDiv=document.getElementById('div1');
             oDiv.style.color='red';
             oDiv.style.fontSize='30px';
             oDiv.style.width='300px';
             oDiv.style.height='300px';
             oDiv.style.background='gold';
        }

    </script>

</head>
<body>
    <div id="div1">这是一个div</div>

    <!--<script>-->
        <!--document.getElementById('div1').style.color='red';-->
    <!--</script>-->

</body>
</html>

操作元素的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var oA=document.getElementById('link01');

            // 读取属性值
            // alert(oDiv.id);

            // 写属性值
            oDiv.style.color='red';
            oDiv.style.fontSize='30px';
            oA.href='http://www.baidu.com';

            // 操作class属性需要写成className

            // 读取元素内容
            var sTr=oDiv.innerHTML;
            alert(sTr);

            // 修改元素内容
            oDiv.innerHTML='改变之后';
            oDiv.innerHTML='<a href="https://13110030262.github.io/">个人博客</a>';

            oDiv.onclick=function(){

            }

        }
    </script>

</head>
<body>
<div id="div1">这依然是一个div</div>
<a href="#" id="link01" classs="test1">网站链接</a>
</body>
</html>

 

M行者X
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript的能力4、JavaScript的优点二、JS使用与输出1、JS使用1.1、 标签1.2、 或 中的 JavaScript1.3、外部脚本1.4、外部引用2、JS输出2.1、...
WEB前端技术笔记整理
08-28
**WEB前端技术笔记整理** 前端开发是构建网页或应用程序用户界面的关键部分，它涉及与用户的交互和页面动态呈现。在本笔记中，我们将深入探讨HTML、JavaScript（JS）、jQuery（JQ）、CSS以及HTML5这五种核心技术，...
javascript简介及基本语法
yfy的博客
04-20 789
目录 一、javascript的简介 1.JavaScript的特点 2.JavaScript的语法组成 二、JavaScript的基础语法 1.编写方式 2.注释 3.变量 4.数据类型 5.算术运算符 6.流程控制语句 7.九九乘法表案例演示 8.数组 （1）定义方式 （2）注意 三、JavaScript的函数 1.定义函数的三种方式 （1）标准格式 （2）...
web前端学习笔记——JavaScript（part 1）
wjsn520的博客
12-05 995
web前端开发基础 第四章——Javascript 目录web前端开发基础第四章——Javascript概述一、JavaScript嵌入页面的方式二、变量1.关键字2.变量类型3.javascript语句与注释4.变量、函数、属性、函数参数命名规范5.匈牙利命名风格：三、获取元素方法四、操作元素属性操作属性的方法属性写法通过“.”操作属性：通过“[ ]”操作属性：innerHTML1.css基本语法1.css基本语法1.css基本语法1.css基本语法1.css基本语法1.css基本语法1.css基本语法
Web开发之js技术经验介绍
yan_dk的专栏
01-13 990
1.基础js技术集合 1.1.js简单方法的调用范例集 运算类 //说明：以下采用简单函数function的封装，直接调用就可以显示结果，来简单说明js相关方法的使用。
在某网课学习前端笔记整理js篇25-dom
qq_34338676的博客
03-07 153
dom（Document Object Model） 一、dom 简介 百度的，好长，懒得打字了，复制了过来。看下面。 ​ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史...
Web前端技术详解（JavaScript篇）
anneCoder的博客
07-09 1250
学习网址：https://wangdoc.com/javascript/index.html 1. JavaScript特点 动态类型语言：变量类型无限制，可随时改变类型。 变量提示（hoisting）：JavaScript引擎工作时，先解析代码，获取所有被声明的变量，然后一行行运行。结果导致所有的变量声明语句被提升到代码头部，即变量提升。 2. 基本语法 语句与表达式： 语句（s...
Web前端学习笔记
最新发布
jusw123456的博客
10-19 2338
html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。HTML：结构CSS：样式一个网站是由N多个网页组成的。
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3628
Web前端学习笔记（1）
《Web前端开发技术》笔记
tiantianzs的博客
11-27 5411
参考文献——《Web前端开发技术》 by 储久良 目录 第1章 Web前端开发技术综述 1.1 Web概述 1.1.1 Web的起源 1.1.2 Web的特点 1.1.3 Web工作原理 1.1.4 Web相关概念 1.3 Web前端开发技术 1.3.1 HTML(Hypertext Markkup Language) 1.3.2 CSS 1.3.3 JavaScript 1.3.4 HTML DOM 1.3.5 BOM 1.3.6 AJAX 1.3.7 jQuery 1.4
web前端最全笔记
qqyang_的博客
07-14 4314
#第一章 Web基础知识 Web开发基本概念 1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。 2、web：worldwideweb，万维网，简称web，www，通常称为网页。 3、web开发：进行网页页面制作及其阁下你给功能开发。 4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐） 5、web服务器：提供web服务的计算机。 6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。 组成...
web前端笔记
07-28
【web前端笔记】是我在参加专业培训机构学习时整理的一系列笔记，主要涵盖了Web前端开发的基础知识、重要概念和技术栈。这些笔记旨在帮助初学者或有经验的开发者更好地理解和掌握前端开发的核心技能，同时也可供自我...
webProject:web前端技术笔记
03-23
【web前端技术笔记】是关于Web开发领域前端技术的一份详细学习资料，主要涵盖了Web前端的基础到高级的各种知识点。这份笔记以"webProject-master"作为压缩包文件名，表明其可能是一个开源项目，允许用户查看、学习...
Web前端基础笔记1
08-08
【Web前端基础笔记1】 在Web开发领域，前端技术扮演着至关重要的角色，它负责构建用户与网站交互的界面。本笔记主要关注HTML（Hyper Text ...学习Web前端不仅需要理解基础语法，还需要不断学习和适应新的技术和工具。
web前端技术笔记（二）html 表单 和页面嵌套
行者
05-30 1938
1.相对路径和绝对路径 2.有序和无序列表 3.表格 4.注册表单 5.勾选框 6.下拉框 7.多行文本 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </hea...
web前端技术笔记（八）屏幕适配、移动端布局
行者
08-28 1842
屏幕适配移动端与PC端页面布局区别视口视网膜屏幕（retina屏幕）清晰度解决方案适配布局类型PC及移动端页面适配方法流体布局响应式布局 移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将
web前端技术笔记（六）首页布局
行者
08-23 1210
这里写目录标题新建项目首页头部制作logo 搜索框 购物车三级目录 新建项目 新建index.html <!-- html:xt + tab(需安装emmet 插件) --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
web前端技术笔记（四）块元素、浮动、定位、background属性
行者
03-19 864
块元素、内联元素、内联块元素 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。 块元素 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为： 支持全部的样式 如果没有设置宽度，默认的宽度为父级宽度100% 盒子占据一行、即使设置了宽度 内联元素 内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它
"前端学习笔记：HTML基础与Web标准概述
前端学习笔记(B站黑马程序员) 我是根据黑马程序员的教程来学习前端开发的，并进行了详细的笔记记录。在学习过程中，我接触到了许多前后端的知识，其中包括了 HTML 的介绍，常用浏览器，以及 Web 标准等内容。 首先...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值