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

相关文章
|
1月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
143 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
1月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
212 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
2月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
90 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
2月前
|
数据采集 Web App开发 存储
打造高效的Web Scraper:Python与Selenium的完美结合
本文介绍如何使用Python结合Selenium,通过代理IP、设置Cookie和User-Agent抓取BOSS直聘的招聘信息,包括公司名称、岗位、要求和薪资。这些数据可用于行业趋势、人才需求、企业动态及区域经济分析,为求职者、企业和分析师提供宝贵信息。文中详细说明了环境准备、代理配置、登录操作及数据抓取步骤,并提醒注意反爬虫机制和验证码处理等问题。
打造高效的Web Scraper:Python与Selenium的完美结合
|
2月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
71 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
5月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
147 63
|
3月前
|
JSON 安全 中间件
Python Web 框架 FastAPI
FastAPI 是一个现代的 Python Web 框架,专为快速构建 API 和在线应用而设计。它凭借速度、简单性和开发人员友好的特性迅速走红。FastAPI 支持自动文档生成、类型提示、数据验证、异步操作和依赖注入等功能,极大提升了开发效率并减少了错误。安装简单,使用 pip 安装 FastAPI 和 uvicorn 即可开始开发。其优点包括高性能、自动数据验证和身份验证支持,但也存在学习曲线和社区资源相对较少的缺点。
223 15
|
5月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
4月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南