python web开发 JavaScript基础

简介: python web开发 JavaScript基础

文章目录


1. script 标签

2. 字面量、变量

3. 数据类型

4. 运算符

5. if 条件

6. switch分支

7. for循环

8. while循环

9. break, continue

10. 函数

11. JS事件

12. 引入JS的两种方式

12.1 HTML页面嵌入

12.2 引入外部JS文件


learning from 《python web开发从入门到精通》


JavaScript 跨平台、面向对象的 脚本语言,能使网页产生交互行为,服务端版本有 Node.js

前端技术主要指:HTML(定义内容), CSS(描述样式), JavaScript(描述行为)


1. script 标签


<script> 脚本 </script>,脚本数量不限,可位于 body 部分 或 head 部分,或同时存在


2. 字面量、变量


字面量:

数字3.14, 1001, 12e5

字符串"michael",'michael'(两种引号都可)

数组 Array[1,2,3,4,5]

对象 {name:"michael", age:18, hobby:"coding"}

函数 function myFunc(a, b) {return a+b;}


变量,var 定义变量,= 赋值(必须以字母,$,_开始,大小写敏感)


3. 数据类型


值类型,引用数据类型

值类型(基本类型):字符串,数字,布尔,空null,未定义undefined,唯一标识符symbol

引用数据类型:数组,对象,函数

字符串
var name="michael";
var sentence="my name is 'michael', nice to meet you!";
数值
var x = 3.14;
var y = 12e-6;
布尔
var x = True;
var y = False;
x=null; 清空变量的值
数组
var hobby = new Array();
hobby[0] = "basketball";
hobby[1] = "singing";
hobby[2] = "playing games";
var hobby=new Array("a", "b", "c");
var hobby=["a", "b", "c"];
对象
var person = {name:"michael", age:18}; 空格换行没有影响
对象寻址: 两种方式
name = person.name
age = person["age"]

声明变量类型

var name = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;



4. 运算符


  • 算术运算符,赋值运算符(跟c++一致)
  • 比较运算符多了===(值和类型均一样)!== (值,类型 至少有一个不一样)

5. if 条件


同c++,ifif ... elseif ... else if ... else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件分支</title>
</head>
<body>
<script>
    var score = 78;
    if (score >= 90) {
        document.write("优秀");
    }
    else if (score >= 80) {
        document.write("良好");
    }
    else if (score >= 60) {
        document.write("及格");
    }
    else {
        document.write("不及格");
    }
</script>
</body>
</html>

image.png



6. switch分支


同c++

<script>
    var d = new Date().getDay();
    switch (d) {
        case 0:
            document.write("星期天");
            break;
        case 1:
            document.write("星期一");
            break;
        case 2:
            document.write("星期二");
            break;
        case 3:
            document.write("星期三");
            break;
        case 4:
            document.write("星期四");
            break;
        case 5:
            document.write("星期五");
            break;
        default:
            document.write("星期六");
    }
</script>



7. for循环


  • c++类似的形式
<script>
    var name = ["张三", "李四", "王五"];
    for(var i = 0; i < name.length; i++) {
        document.write(name[i] + "*");
    }
</script>

image.png

<script>
    for(var x = 5; x < 10; ++x) {
        var str = "";
        str += "数字是:"+ x + "<br>"; // <br> 换行
        document.write(str);
    }
</script>

image.png

<script>
    var students = {name:"michael", age:18, score:{chinese:80, math:90, english:70}};
    var txt = '';
    for(x in students) {
        if(x == 'score')
        {
            for(y in students.score)
            {
                txt = y + ': ' + students.score[y] + '<br>';
                document.write(txt);
            }
        }
        else
        {
            txt = x + ': ' + students[x] + '<br>';
            document.write(txt);
        }
    }
</script>

image.png


8. while循环


同c++


while(condition){ }

do{ } while(condition);


9. break, continue


同c++


break 跳出当前循环

continue跳过当次循环迭代,进行下一次迭代


10. 函数


function funcName() { // 执行代码 }

<script>
    function myButton()
    {
        alert("hello Michael!")
    }
</script>
<button onclick='myButton()'>点击我</button>
<!--引号不加也可以-->

image.png

<script>
    function myButton1(name, course)
    {
        alert("hello " + name + ", you are learning " + course + "!");
    }
</script>
<button οnclick=myButton1('Michael','web开发')>点击我</button>

image.png

<div id="myfunction1"></div>
<script>
    function myFunc1(x, y)
    {
        return x * y;
    }
    document.getElementById("myfunction1").innerHTML = myFunc1(3, 6);
</script>



11. JS事件


  • 如:浏览行为,用户行为
  • 常见事件:HTML加载完成,input 字段发生变化,按钮被单击
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮事件</title>
</head>
<body>
<p>单击按钮获取当前时间: 执行 <em>displayDate()</em> 函数。</p>
<button onclick="displayDate()">获取时间</button>
<script>
    function displayDate() {
        var d = new Date(); // 实例化日期
        var now = d.toLocaleString(); // 转换为本地时间格式
        document.getElementById("here").innerHTML = now;//写入 id 为 here的元素中
    }
</script>
<p id="here"></p>
</body>
</html>

image.png



12. 引入JS的两种方式


12.1 HTML页面嵌入


如上所示 <script> function... </script> 嵌入


12.2 引入外部JS文件


<script src= url > </script> 指向外部 url .js 文件

myscript.js

function display123(){
    alert("hello Michael!");
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部引用JS文件</title>
    <script src="myscript.js"></script>
</head>
<body>
<button onclick="display123()">点击我!</button>
</body>
</html>

image.png

目录
打赏
0
0
0
0
1
分享
相关文章
【02】做一个精美的打飞机小游戏,python开发小游戏-鹰击长空—优雅草央千澈-持续更新-分享源代码和游戏包供游玩-记录完整开发过程-用做好的素材来完善鹰击长空1.0.1版本
【02】做一个精美的打飞机小游戏,python开发小游戏-鹰击长空—优雅草央千澈-持续更新-分享源代码和游戏包供游玩-记录完整开发过程-用做好的素材来完善鹰击长空1.0.1版本
71 7
|
14天前
|
【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
131 82
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
41 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
打造高效的Web Scraper:Python与Selenium的完美结合
本文介绍如何使用Python结合Selenium,通过代理IP、设置Cookie和User-Agent抓取BOSS直聘的招聘信息,包括公司名称、岗位、要求和薪资。这些数据可用于行业趋势、人才需求、企业动态及区域经济分析,为求职者、企业和分析师提供宝贵信息。文中详细说明了环境准备、代理配置、登录操作及数据抓取步骤,并提醒注意反爬虫机制和验证码处理等问题。
打造高效的Web Scraper:Python与Selenium的完美结合
|
21天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
37 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
43 6
通义灵码AI程序员实战:从零构建Python记账本应用的开发全解析
本文通过开发Python记账本应用的真实案例,展示通义灵码AI程序员2.0的代码生成能力。从需求分析到功能实现、界面升级及测试覆盖,AI程序员展现了需求转化、技术选型、测试驱动和代码可维护性等核心价值。文中详细解析了如何使用Python标准库和tkinter库实现命令行及图形化界面,并生成单元测试用例,确保应用的稳定性和可维护性。尽管AI工具显著提升开发效率,但用户仍需具备编程基础以进行调试和优化。
166 9
通义灵码 2.0 体验报告:Deepseek 加持下的 Python 开发之旅
通义灵码 2.0 体验报告:Deepseek 加持下的 Python 开发之旅
112 11
【01】python开发之实例开发讲解-如何获取影视网站中经过保护后的视频-用python如何下载无法下载的视频资源含m3u8-python插件之dlp-举例几种-详解优雅草央千澈
【01】python开发之实例开发讲解-如何获取影视网站中经过保护后的视频-用python如何下载无法下载的视频资源含m3u8-python插件之dlp-举例几种-详解优雅草央千澈
125 34
【01】python开发之实例开发讲解-如何获取影视网站中经过保护后的视频-用python如何下载无法下载的视频资源含m3u8-python插件之dlp-举例几种-详解优雅草央千澈
|
22天前
|
python泛微e9接口开发
通过POST请求向指定IP的API注册设备以获取`secrit`和`spk`。请求需包含`appid`、`loginid`、`pwd`等头信息。响应中包含状态码、消息及`secrit`(注意拼写)、`secret`和`spk`字段。示例代码使用`curl`命令发送请求,成功后返回相关信息。
42 5

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等