JavaScript01

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js开关灯</title>
</head>
<body>
<h2>JavaScript 能做什么?</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中,JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='../imgs/eg_bulbon.gif'">开 灯</button>
<img id="myImage" border="0" src="../imgs/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='../imgs/eg_bulboff.gif'">关 灯</button>
</body>
</html>

1.JavaScript特点

  1. JavaScript是一种解释性的脚本语言,c、c++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释
  2. JavaScript是一种基于对象的脚本语言,可以创建对象,也能使用现有的对象
  3. JavaScript是弱类型的,对变量的数据类型不做严格的要求,变量的数据类型在运行过程中可以变化

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript是弱类型的</title>
<!-- 1.js代码可以写在script标签中
2.type="text/javascript" 表示这个脚本(script)类型是JavaScript
3.type="text/javascript" 可以不写,但是建议写上
4.js语句可以不写分号; 建议写上
5.var
-->
<script type="text/javascript">
var age = 10;
//输出alert() 使用弹框方式
//输出 console.log() 在调试窗口输出
console.log("age=" + age);
// 输出变量的类型可以使用typeof
console.log(typeof age);
age = "北京";
console.log("age=" + age);
console.log(typeof age);
</script>
</head>
<body>
</body>
</html>

2.JavaScript快速入门

  • 使用方式1:script标签写js代码
  • 使用方式2:使用script标签引入js文件

注:两种使用方式不能混用,如果混用了就只有引用的js文件生效

使用方式1:script标签写js代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script标签中写JS代码</title>
<!-- 1.可以在head和body嵌入 script
2.执行顺序是从上到下
3.建议放在head中
-->
<script type="text/javascript">
//在head内使用script写js
console.log("ok");
</script>
</head>
<body>
<script type="text/javascript">
//在body内使用script写js
console.log("hi");
</script>
</body>
</html>

使用方式2:使用script标签引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用script标签引入js文件</title>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
</body>
</html>
alert("今日天气降温了");

例子:两种使用方式不能混用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两种使用方式不能混用</title>
<!-- 如果两种方式都用了:
1.不会报错
2.只有一个生效,引入的js文件生效
-->
<script type="text/javascript" src="myjs.js">
alert("你好,今天天气怎么样?")
</script>
</head>
<body>
</body>
</html>
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字符串可以双括号括起来,也可以单括号括起来

例子:特殊值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型-特殊值</title>
<script type="text/javascript">
//1.typeof()是JavaScript语言提供的一个函数
//2.返回变量的数据类型
// 3.3个特殊值,undefined:没有复制就使用 null:空值 NaN:不能识别类型
var email;//特殊值undefined
console.log("email=" + email);//undefined
var address = null;
console.log("address=" + address);//nul
console.log(10 * "abc");//NaN
</script>
</head>
<body> </body>
</html>

6.运算符(常用)

JavaScript 运算符 (w3school.com.cn)

6.1算术运算符

  1. 算术运算符用于执行变量与或值之间的算术运算

  2. y等于5,下面的表格解释类这些算术运算符

6.2赋值运算符

  1. 赋值运算符用于给JavaScript变量赋值

  2. 给定x=10和y=5,下面的表格解释了赋值运算符

6.3关系运算符

  1. 关系(比较)运算符在逻辑语句中使用,以测定变量或值是否相等

  2. 给定x=5,下面的表格解释了比较运算符

例子:关系运算符之全等 ===

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系运算符</title>
</head>
<body>
<script type="text/javascript">
var a = 1000;//number
var b = "1000";//string
console.log(a == b);//true
console.log(a === b);//false
</script>
</body>
</html>

6.4逻辑运算符

  1. 逻辑运算符用于测定变量或值之间的逻辑

  2. 给定x=6以及y=3,下表解释了逻辑运算符

  • 逻辑运算符注意事项和细节
  1. 在JavaScript语言中,所有的变量,都可以作为一个boolean类型的变量去使用

  2. 0,null,undefined,""(空串)都认为是false

  3. &&且运算有两种情况:(即&&返回值是遵守短路与的机制)

    • 当表达式全为真时,返回最后一个表达式的值
    • 当表达式中,有一个为假的时候,返回第一个为假的表达式的值
  4. ||或运算,有两种情况:(即||返回值是遵守短路或的机制)

    • 当表达式全为假的时候,返回最后一个表达式的值
    • 只要有一个表达式为真,就会返回第一个为真的表达式
  5. &&运算和||运算有短路现象

    短路现象:当这个&&||运算有确定结果后,后面的表达式不再执行

例子:逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算符注意事项和使用细节</title>
<script type="text/javascript">
//1. 在JavaScript语言中,所有的变量,都可以作为一个boolean类型的变量去使用
//语法比较松散
var name = "猫猫";
var age = 900;
var n = null;
if (!n) {
alert("你好你好你好你好你好...")
} //2. 0,null,undefined,""(空串)都认为是false
if (!(100 * "aaa")) {
alert("hi~~~")
} //3. &&且运算有两种情况:(即&&返回值是遵守短路与的机制)
// - 当表达式全为真时,返回最后一个表达式的值
// - 当表达式中,有一个为假的时候,返回第一个为假的表达式的值
var res1 = "education" && 600;
alert("res1=" + res1);//600
var res2 = null && 600;
alert("res2=" + res2);//null //4. ||或运算,有两种情况:(即||返回值是遵守短路或的机制)
// - 当表达式全为假的时候,返回最后一个表达式的值
// - 只要有一个表达式为真,就会返回第一个为真的表达式
var res3 = null || 600;
alert("res3=" + res3);//600
var res4 = "你好" || 600;
alert("res4=" + res4);//你好 //5. &&运算和||运算有短路现象
//短路现象:当这个&&||运算有确定结果后,后面的表达式不再执行
var n1 = 1;
var n2 = 3;
//var res5 = n1++ || n2++;
//alert("n1=" + n1 + " n2=" + n2);//n1=2 n2=3
var res6 = (n1++ > 100) || n2++;
alert("n1=" + n1 + " n2=" + n2);////n1=2 n2=4
</script>
</head>
<body> </body>
</html>

6.5条件运算符

JavaScript还可以使用类似 Java的三元运算符

如果条件表达式为true,就返回第一个表达式的值;如果表达式为false,就返回第二个表达式的值

例子:条件运算符

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件运算符</title>
</head>
<body>
<script type="text/javascript">
var res = (100 > 1) ? "kkkk" : 300;
alert(res);//kkkk
</script>
</body>
</html>

7.数组

7.1数组定义

在JavaScript中,数组的定义有四种方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组定义</title>
<script type="text/javascript">
//数组定义方式一:
var cars1 = ["Audi", "BMW", "Volvo", 100, null];//在JavaScript中,数组的数据类型可以不一致
console.log("cars1=" + cars1);//cars1=Audi,BMW,Volvo,100,
//可以通过下标索引来访问具体的元素(索引从0开始)
console.log(cars1[0]);//Audi
console.log(cars1[3]);//100 //数组定义方式二:
var cars2 = [];//空数组
//再添加数据
cars2[0] = "奥迪";
cars2[1] = "奔驰";
cars2[2] = "宝马";
cars2[3] = 100;
console.log("cars2=" + cars2);//cars2=奥迪,奔驰,宝马,100
//如果该元素不存在,就返回undefined
console.log("cars2[100]=" + cars2[100]);//cars2[100]=undefined //数组定义方式三:
var cars3 = new Array("Audi", "BMW", "Volvo");
console.log("cars3=" + cars3);//cars3=Audi,BMW,Volvo //数组定义方式四:
var cars4 = new Array();
console.log(typeof cars4);//object
cars4[0] = "法拉利";
cars4[1] = "保时捷";
cars4[0] = "ZZ";//替换
cars4[2] = "YY";////因为在创建的时候没有定义数组的大小,因此要扩容直接在数组里面添加数据即可
cars4[8] = "红旗";//扩容,如果跳过了下标赋值,那么没有赋值的元素都为undefined
console.log("cars4[5]=" + typeof cars4[5]);//cars4[5]=undefined
console.log("cars4=" + cars4);//cars4=ZZ,保时捷,YY,,,,,,红旗
</script>
</head>
<body> </body>
</html>

7.2数组遍历

数组的类型是Object对象,具有length等属性,因此也能像 java一样,使用 for循环进行遍历

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组遍历</title>
<script type="text/javascript">
var cars = ["Audi", "BMW", "Volvo", 100, 1.1,true];
//遍历
console.log("数组的长度="+cars.length);
for (var i = 0; i < cars.length; i++) {
console.log(cars[i]);//log方法会自动换行
}
</script>
</head>
<body> </body>
</html>

day04-JavaScript01的更多相关文章

  1. Spring day04笔记(SVN讲解和回顾昨天知识)

    spring day03回顾 事务管理 基于xml配置 1.配置事务管理器 jdbc:DataSourceTransactionManager hibernate:HibernateTransacti ...

  2. day04 Java Web 开发入门

    day04 Java Web 开发入门 1. web 开发相关介绍 2. web 服务器 3. Tomcat服务器启动的问题 4. Tomcat目录结构 5. Web应用程序(虚拟目录映射,缺省web ...

  3. python day04笔记总结

    2019.4.1 S21 day04笔记总结 昨日内容补充 1.解释器/编译器 1.解释型语言.编译型语言 2.解释型:写完代码后提交给解释器,解释器将代码一行行执行.(边接收边解释/实时解释) 常用 ...

  4. Python基础(函数部分)-day04

    写在前面 上课第四天,打卡: 加勒比海盗今天上映:端午节公司发的粽子很有范! 一.函数的基本概念 - 函数是什么?  函数,就是一个'锤子',一个具有特定功能的'锤子',使用者可以在适当的时候使用这个 ...

  5. day04(权限修饰符,内部类,局部内部类,匿名内部类)

    权限修饰符, Public  >protected >default > private public 公共权限   随便都可以访问 protected  子类可以访问权限  (子类 ...

  6. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...

  7. python开发学习-day04(迭代器、生成器、装饰器、二分查找、正则)

    s12-20160123-day04 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  8. 2017-2018-1 JAVA实验站 冲刺 day04

    2017-2018-1 JAVA实验站 冲刺 day04 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 写博客.进行工作总结 100% 齐力锋 找背景音乐 100% 张浩林 游戏操作说 ...

  9. python s13 day04

    1.1 all() 和 any( )   all() any()   0,None,"", [], (),{} #布尔值为0的 列举,None ,空列表,空元祖,空. print( ...

  10. Java编程基础阶段笔记 day04 Java基础语法(下)

    day04 Java基础语法 (下) 笔记Notes要点 switch-case语句注意 switch-case题目(switchTest5) 循环执行顺序 if-else 实现3个整数排序 Stri ...

随机推荐

  1. LINUX下基于NVIDIA HPC SDK 的 VASP6.3.x编译安装报错整理

    关于gcc 用旧版本安装NVIDIA HPC SDK再编译会报错: "/opt/rh/devtoolset-8/root/usr/include/c++/8/bits/move.h" ...

  2. java-servlet-转发AND路径

    转发: a) 什么是转发?一个web组件将未完成的任务交给另一个web组件继续做.通常是一个servlet将数据获取之后转交给jsp进行展现.注:web组件值得是servlet或者jsp b) 如何转 ...

  3. 使用 Less 混合(Mixins)时报语法错误

    今天在尝试使用 less 的混合语法时,浏览器直接报了一个语法错误.下图是报错信息: 仔细地阅读了官方文档,和对比自己写的,并没有任何错误. .FlexLayout { .Start() { disp ...

  4. 乘风破浪,遇见最佳跨平台跨终端框架.Net Core/.Net生态 - 官方扩展集锦(Microsoft.Extensions on Nuget)

    什么是Microsoft.Extensions .NET Platform Extensions是一套.Net官方的API集合,提供了一些常用的编程模式和实用工具,例如依赖项注入.日志记录.缓存.Ho ...

  5. Navicat的使用与python中使用MySQL的基本方法

    Navicat的使用与python中使用MySQL的基本方法 Navicat的下载及安装 下载地址 http://www.navicat.com.cn/download/navicat-premium ...

  6. 痞子衡嵌入式:MCUXpresso IDE下设置代码编译优化等级的几种方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是MCUXpresso IDE下设置代码编译优化等级的几种方法. 最近公司芯片设计团队正在开发一款全新的基于 Cortex-M33 内核的 ...

  7. 图床搭建|chrome插件|操作简单不要钱

    为什么需要一个图床 为了写博客 图床:专门用来存放图片,同时允许你把图片对外连接的网上空间. 用markdown格式写作,插入图片需要图片的url地址,然后博客的背景图也是要用url地址. 有段时间, ...

  8. 学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序(上)

    学习ASP.NET Core Blazor编程系列一--综述 一.概述 Blazor 是一个生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建信息丰富的交互式 U ...

  9. setContentView源码分析

    当我们在Activity中调用setContentView,它到底做了什么呢 override fun onCreate(savedInstanceState: Bundle?) { super.on ...

  10. format添加未知个参数方法

    一个python巧妙技巧,分享给大家 我的需求是将一个dict的键都format输出,用到了*对字典解包 data = {a: 1, b: 2...} msg = f"{'{} '*len( ...