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

相关文章
PySide vs PyQt:Python GUI开发史诗级对决,谁才是王者?
PySide 和 PyQt 是 Python GUI 开发领域的两大利器,各有特色。PySide 采用 LGPL 协议,更灵活;PyQt 默认 GPL,商业使用需授权。两者背后团队实力雄厚,PySide 得到 Qt 官方支持,PyQt 由 Riverbank Computing 打造。API 设计上,PySide 简洁直观,贴近原生 Qt;PyQt 增加 Pythonic 接口,操作更高效。性能方面,两者表现优异,适合不同需求的项目开发。选择时可根据项目特点与开源要求决定。
128 20
基于Python+Vue开发的商城管理系统源码+运行步骤
基于Python+Vue开发的商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Python的网上商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
127 7
|
15天前
|
魔搭notebook在web IDE下,使用jupyter notebook,python扩展包无法更新升级
魔搭notebook在web IDE下,使用jupyter notebook,python扩展包无法更新升级,不升级无法使用,安装python扩展包的时候一直停留在installing
40 4
用 Python 制作简单小游戏教程:手把手教你开发猜数字游戏
本教程详细讲解了用Python实现经典猜数字游戏的完整流程,涵盖从基础规则到高级功能的全方位开发。内容包括游戏逻辑设计、输入验证与错误处理、猜测次数统计、难度选择、彩色输出等核心功能,并提供完整代码示例。同时,介绍了开发环境搭建及调试方法,帮助初学者快速上手。最后还提出了图形界面、网络对战、成就系统等扩展方向,鼓励读者自主创新,打造个性化游戏版本。适合Python入门者实践与进阶学习。
82 1
Python web Django快速入门手册全栈版,共2590字,短小精悍
本教程涵盖Django从安装到数据库模型创建的全流程。第一章介绍Windows、Linux及macOS下虚拟环境搭建与Django安装验证;第二章讲解项目创建、迁移与运行;第三章演示应用APP创建及项目汉化;第四章说明超级用户创建与后台登录;第五章深入数据库模型设计,包括类与表的对应关系及模型创建步骤。内容精炼实用,适合快速入门Django全栈开发。
34 1
抖音直播间采集提取工具,直播间匿名截流获客软件,Python开发【仅供学习】
这是一套基于Python开发的抖音直播间数据采集与分析系统,包含观众信息获取、弹幕监控及数据存储等功能。代码采用requests、websockets和sqlite3等...
怎么开发Python第三方库?手把手教你参与开源项目!
大家好,我是程序员晚枫。本文将分享如何开发Python第三方库,并以我维护的开源项目 **popdf** 为例,指导参与开源贡献。Popdf是一个PDF操作库,支持PDF转Word、转图片、合并与加密等功能。文章涵盖从fork项目、本地开发、单元测试到提交PR的全流程,适合想了解开源贡献的开发者。欢迎访问[popdf](https://gitcode.com/python4office/popdf),一起交流学习!
146 21
怎么开发Python第三方库?手把手教你参与开源项目!
Python有哪些好用且实用的Web框架?
Python 是一门功能强大的编程语言,在多个领域中得到广泛应用,包括爬虫、人工智能、游戏开发、自动化测试和 Web 开发。在 Web 开发中,Python 提供了多种框架以提高效率。以下是几个常用的 Python Web 框架:1) Django:开源框架,支持多种数据库引擎,适合新手;2) Flask:轻量级框架,基于简单核心并通过扩展增加功能;3) Web2py:免费开源框架,支持快速开发;4) Tornado:同时作为 Web 服务器和框架,适合高并发场景;5) CherryPy:简单易用的框架,连接 Web 服务器与 Python 代码。这些框架各有特色,可根据需求选择合适的工具。
142 14

热门文章

最新文章

推荐镜像

更多
AI助理

你好,我是AI助理

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

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问