学习目标
了解什么是JavaScript
掌握如何定义变量
知道JavaScript中有哪些数据类型
学会如何使用分支语句
学会如何使用循环语句
HTML/CSS/JS的关系
JS书写位置
JS有三种书写位置,分别为:
JavaScript 是世界上最流行的编程语言之一,编程语言是用于控制计算机的一系列指令,它有固定的格式和词汇(不同的编程语言固定的格式和词汇是不同的),必须要遵守。
JavaScript中的变量
变量就是一个装东西的盒子,通俗的来说,变量就是存放数据的容器。我们通过变量名获取数据,甚至可以修改数据
JavaScript数据类型
简单数据类型 | 说明 | 默认值 |
Number | 数字型,包含整数值和浮点值 | 0 |
Boolean | 布尔值类型,如true、false,等价与1和0 | false |
String | 字符串类型 | “” |
Undefined | Var a;声明了变量a但是没有给值,此时a = undefined | undefined |
Null | Var a = null;声明了变量a为空值 | null |
JavaScript分支语句
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果
分支语句分类
循环结构
循环语句的作用是反复地执行同一段代码,只要给定的条件能得到满足,包括在循环条件语句里面的代码就会重复执行下去,一旦条件不再满足则终止。
有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句
循环语句分类
1.while为不确定性循环,当表达式的结果为真时,执行循环中的语句,表达式为假时不执行循环。
2. do…while为不确定性循环,先执行大括号中的语句,当表达式结果为真,执行循环中的语句,表达式为假不执行循环,并退出do…while循环。
一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。
动画属性可以逐渐地从一个值变化到另一个值
JS基础案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 300px;
height: 400px;
background-color: yellow;
}
</style>
<script>
//字符串
// alert('你好,世界3!');
//变量的作用是存放具体值,并且可以加以修改元素
// alert("你好,世界2! ");
//vara=“你好,世界";I
// define定义undefined未定义
var a=6;
// alert(a);
//声明了一个变量a
//定义了一个具体值
//将具体的值5赋值给a
//变量、数据类型、关键字
//系统保留的有意义的声明
//var就是一个关键字,意义:声明变量
//关键字不能作为变量名
// 流程控制语句,分支结构
// 分支结构:
// if(){}else{}
if(5>6)
{
alert("5>6");
}else{
alert("5<6");
}
switch(a){
case 1:
alert("a==1");
break;
case 6:
alert("a==6")
break;
}
// 循环分为三种:
// 初始条件
// 循环条件
//循环体
// 步近
// while(循环条件){
// }
// for(初始条件;循环条件;步进){
// 循环体
// }
// 初始条件
// do{
// 循环体
// 步进
// }while(循环条件)
var b=0;
var result=0;
while(b<10){
// alert(b);
result=result+b;
b++;
}
alert(result);
// 直角三角形
for(var i=0;i<5;i++){
for(var j=0;j<=i;j++)
{
document.write('*');
}
document.write('<br>');
}
//控制台显示
for(var i=0;i<5;i++){
var str ='';
for(var j=0;j<=i;j++)
{
str=str+'*';
}
console.log(str);
}
//计算两个数的平方和
//封装函数
// 函数定义的语法
// 1、function 函数名 (参数列表){
// 函数体
// }
//function是一个关键字
// 写一个两个数的求和函数
/*定义函数的第二种方式
var a=10;
var b=function(){
}
使用函数实现数的阶乘
*/
function getsum(z){
var result=0;
for (var i =0;i<=a;i++)
{
result=result+i;
}
alert(result);
}
getsum(10);
function test (x,y){
alert(x*x+y*y);
}
test(10,5);
// 阶乘计算
function JC(f){
var result=1;
for(var i=1;i<=f;i++){
result=result*i;
}
alert(result);
}
JC(5);
</script>
</head>
<body>
<!-- 行内js
复合属性的特点
内嵌js
外联js
-->
<div id="box1"></div>
<!-- <div id="box1" οnclick="alert('你好,世界!')"></div> -->
</body>
</html>