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

相关文章
|
14天前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
14天前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
6月前
|
JavaScript 前端开发 Java
通义灵码 Rules 库合集来了,覆盖Java、TypeScript、Python、Go、JavaScript 等
通义灵码新上的外挂 Project Rules 获得了开发者的一致好评:最小成本适配我的开发风格、相当把团队经验沉淀下来,是个很好功能……
1159 103
|
14天前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
5月前
|
API C++ 开发者
PySide vs PyQt:Python GUI开发史诗级对决,谁才是王者?
PySide 和 PyQt 是 Python GUI 开发领域的两大利器,各有特色。PySide 采用 LGPL 协议,更灵活;PyQt 默认 GPL,商业使用需授权。两者背后团队实力雄厚,PySide 得到 Qt 官方支持,PyQt 由 Riverbank Computing 打造。API 设计上,PySide 简洁直观,贴近原生 Qt;PyQt 增加 Pythonic 接口,操作更高效。性能方面,两者表现优异,适合不同需求的项目开发。选择时可根据项目特点与开源要求决定。
342 20
|
5月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
14天前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
3月前
|
数据采集 存储 数据库
Python爬虫开发:Cookie池与定期清除的代码实现
Python爬虫开发:Cookie池与定期清除的代码实现
|
4月前
|
人工智能 搜索推荐 数据可视化
用 Python 制作简单小游戏教程:手把手教你开发猜数字游戏
本教程详细讲解了用Python实现经典猜数字游戏的完整流程,涵盖从基础规则到高级功能的全方位开发。内容包括游戏逻辑设计、输入验证与错误处理、猜测次数统计、难度选择、彩色输出等核心功能,并提供完整代码示例。同时,介绍了开发环境搭建及调试方法,帮助初学者快速上手。最后还提出了图形界面、网络对战、成就系统等扩展方向,鼓励读者自主创新,打造个性化游戏版本。适合Python入门者实践与进阶学习。
336 1
|
4月前
|
Linux 数据库 数据安全/隐私保护
Python web Django快速入门手册全栈版,共2590字,短小精悍
本教程涵盖Django从安装到数据库模型创建的全流程。第一章介绍Windows、Linux及macOS下虚拟环境搭建与Django安装验证;第二章讲解项目创建、迁移与运行;第三章演示应用APP创建及项目汉化;第四章说明超级用户创建与后台登录;第五章深入数据库模型设计,包括类与表的对应关系及模型创建步骤。内容精炼实用,适合快速入门Django全栈开发。
118 1

推荐镜像

更多