day04-JavaScript01

惊雷无声  论坛元老 | 2022-10-30 20:10:05 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1790|帖子 1790|积分 5370

JavaScript01

例子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js开关灯</title>
  6. </head>
  7. <body>
  8. <h2>JavaScript 能做什么？</h2>
  9. <p>JavaScript 能够改变 HTML 属性值。</p>
  10. <p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
  11. <button onclick="document.getElementById('myImage').src='../imgs/eg_bulbon.gif'">开 灯</button>
  12. <img id="myImage" border="0" src="https://www.cnblogs.com/../imgs/eg_bulboff.gif" >
  13. <button onclick="document.getElementById('myImage').src='https://www.cnblogs.com/../imgs/eg_bulboff.gif'">关 灯</button>
  14. </body>
  15. </html>
复制代码

1.JavaScript特点


  • JavaScript是一种解释性的脚本语言，c、c++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释
  • JavaScript是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象
  • JavaScript是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程中可以变化
例子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaScript是弱类型的</title>
  6.    
  7.    
  8. </head>
  9. <body>
  10. </body>
  11. </html>
复制代码
2.JavaScript快速入门


  • 使用方式1：script标签写js代码
  • 使用方式2：使用script标签引入js文件
注：两种使用方式不能混用，如果混用了就只有引用的js文件生效
使用方式1：script标签写js代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>script标签中写JS代码</title>
  6.    
  7.    
  8. </head>
  9. <body>
  11. </body>
  12. </html>
复制代码
使用方式2：使用script标签引入js文件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用script标签引入js文件</title>
  6.    
  7. </head>
  8. <body>
  9. </body>
  10. </html>
复制代码
  1. alert("今日天气降温了");
复制代码
例子：两种使用方式不能混用
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>两种使用方式不能混用</title>
  6.    
  7.    
  8. </head>
  9. <body>
  10. </body>
  11. </html>
复制代码
  1. alert("今日天气降温了");
复制代码
3.查看js错误信息


  • 执行js，火狐浏览器如何查看错误信息
    进入到调试器（ctrl+shift+i或者f12）就可以看到错误提示

    点击控制台右边的error信息就可以定位错误

  • 执行js，Chrome浏览器如何查看错误信息
    进入到调试器（快捷键同上），到控制台查看错误信息，error信息即可定位错误位置

4.JavaScript变量


  • JavaScript变量表示存储数据的容器
    与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）
    变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）
  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）
JavaScript 语句和 JavaScript 变量都对大小写敏感


  • 声明（创建）JavaScript变量
    在 JavaScript 中创建变量通常称为"声明"变量。
    我们使用 var 关键词来声明变量(但是不使用var声明也不会报错，建议使用var)
5.JavaScript数据类型


  • 数据类型介绍
    JavaScript常用的数据类型如下:

    • 数值类型     number
    • 字符串类型     string
    • 对象类型     object
    • 布尔类型     boolean
    • 函数类型     function

  • 特殊值

    • undefined         变量未赋初始值时，默认undefined
    • null       空值
    • NaN      Not a Number 非数值

  • 数据类型注意事项
    String字符串可以双括号括起来，也可以单括号括起来
例子：特殊值
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数据类型-特殊值</title>
  6.    
  7. </head>
  8. <body>
  10. </body>
  11. </html>
复制代码
6.运算符(常用)

JavaScript 运算符 (w3school.com.cn)
6.1算术运算符


  • 算术运算符用于执行变量与或值之间的算术运算
  • y等于5，下面的表格解释类这些算术运算符

6.2赋值运算符


  • 赋值运算符用于给JavaScript变量赋值
  • 给定x=10和y=5，下面的表格解释了赋值运算符

6.3关系运算符


  • 关系（比较）运算符在逻辑语句中使用，以测定变量或值是否相等
  • 给定x=5，下面的表格解释了比较运算符

例子：关系运算符之全等 ===
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>关系运算符</title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>
复制代码
6.4逻辑运算符


  • 逻辑运算符用于测定变量或值之间的逻辑
  • 给定x=6以及y=3，下表解释了逻辑运算符



  • 逻辑运算符注意事项和细节

  • 在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用
  • 0，null，undefined，""(空串)都认为是false
  • &&且运算有两种情况：（即&&返回值是遵守短路与的机制）

    • 当表达式全为真时，返回最后一个表达式的值
    • 当表达式中，有一个为假的时候，返回第一个为假的表达式的值

  • ||或运算，有两种情况：（即||返回值是遵守短路或的机制）

    • 当表达式全为假的时候，返回最后一个表达式的值
    • 只要有一个表达式为真，就会返回第一个为真的表达式

  • &&运算和||运算有短路现象
    短路现象：当这个&&||运算有确定结果后，后面的表达式不再执行
例子：逻辑运算符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>逻辑运算符注意事项和使用细节</title>
  6.    
  7. </head>
  8. <body>
  10. </body>
  11. </html>
复制代码
6.5条件运算符

JavaScript还可以使用类似 Java的三元运算符
如果条件表达式为true，就返回第一个表达式的值；如果表达式为false，就返回第二个表达式的值
例子：条件运算符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>条件运算符</title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>
复制代码
7.数组

7.1数组定义

在JavaScript中，数组的定义有四种方式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数组定义</title>
  6.    
  7. </head>
  8. <body>
  10. </body>
  11. </html>
复制代码
7.2数组遍历

数组的类型是Object对象，具有length等属性，因此也能像 java一样，使用 for循环进行遍历
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数组遍历</title>
  6.    
  7. </head>
  8. <body>
  10. </body>
  11. </html>
复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

惊雷无声

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表