-
页面中引入 JS 代码的三种方式：
-
内联（行内）写法：
-
位置：写在对应的 HTML 元素上
-
作用：可以给元素添加 JS 事件代码，触发事件执行对应效果
-
事件：指系统提供的一系列状态
-
onclick 点击事件，点击此元素时才会触发
-
alert（666） 弹出警告框
-
-
<button onclick="alert('请先登录!')">点击即玩</button>
-
内部写法：
-
位置：在页面任意位置添加 script 标签，在 script 标签中添加 JS 代码
-
建议写在 body 结束标签之前！
-
<script>
//将内容输出到浏览器控制台
console.log("Hello World!");
console.log(d1);
</script>
-
外部写法：
-
位置：写在单独的 js 文件中，在 head 标签中添加 script 标签引入外部的 js 文件
-
注意：若此 script 标签用于引入外部的 JS 文件，则标签中不能写 JS 代码，不会执行
-
<script src="01.js">
console.log("Hello World!666");//不会执行！
</script>
-
变量与常量
-
JS 语言是弱类型语言，声明变量不需要指定类型
-
在 JS 中，使用 var 或 let 声明变量
-
var 声明的变量，全局作用域，var声明的变量还可以重复声明
-
let 声明的变量，作用域类似Java 语言中的局部变量, 块级作用域【推荐使用】
-
可以使用 typeof 变量名 去查看对应的类型
-
-
在 JS 中,使用 const 声明常量,常量的值不允许被修改!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量与常量</title>
</head>
<body>
<script>
//JS是一门弱类型语言,不需要指定变量的数据类型
//1.使用var关键字声明变量
var a = 10;//number 整数+小数
var b = 3.14;//number
var c = '你好!';//string 单引+双引
var d = "你好呀!";//string
var e = true;//boolean true+false
console.log(a,b,c,d,e);
//typeof 查看变量的数据类型 根据值去推断数据类型
console.log(typeof a,typeof b,typeof c,typeof d,typeof e);
a = 3.14;
console.log(a,typeof a);//可以修改值
a = false;
console.log(a,typeof a);//可以修改类型
var a = '哈哈哈我又来了';
console.log(a,typeof a);//可以重复声明
let x = 1;
console.log(x,typeof x);
x= 6.6;
console.log(x,typeof x);
//let x = false;
//console.log(x,typeof x);//let声明的变量不可以重复声明,报错:变量已被声明
const y = 1;
console.log(y,typeof y);
//y = 343;//常量的值不允许被修改
</script>
</body>
</html>
-
常用数据类型
原始数据类型
-
字符串（string）：没有字符的概念，使用单引号或双引号包裹均可
-
数字（number）：包含整数与小数类型
-
布尔（boolean）：值只有 true 与 false
-
未定义（undefined）：Java 声明变量必须声明类型，但 JS 是弱类型语言，若声明变量未赋值就不清楚数据类型
-
空(null)：结合后面的引用类型使用
引用类型
-
对象（Object）
-
数组（Array）
-
函数（Function）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS数据类型</title>
</head>
<body>
<script>
//JS数据类型
//原始类型 string number boolean undefined null
var a = 1;
var b = 6.6;
console.log(a,typeof a);
console.log(b,typeof b);
var c = '下午';
var d = "好多个字";
console.log(c,typeof c);
console.log(d,typeof d);
var e = true;
var f = false;
console.log(e,typeof e);
console.log(f,typeof f);
//声明了变量,但未赋值,会得到undefined,未定义型
var g;
console.log(g,typeof g);//undefined 'undefined'
//引用类型 Object Number Boolean Function Array...
//1)定义JS对象
let obj = {
//属性名:属性值 多对值之间使用逗号隔开
name:'张三',
age:18
};
console.log(obj,typeof obj);//{name: '张三', age: 18} 'object'
console.log(obj.name);//'张三'
console.log(obj.age);//18
obj.age = 19;//age属性存在,赋值是修改对象该属性的值
console.log(obj.age);//19
/* 给对象动态新增一个属性like */
obj.like = '吃冰棍';//like属性不存在,赋值是给对象新增一个属性
console.log(obj);
console.log(obj.like);
/*访问对象不存在的属性会得到undefined*/
//如果该属性没有赋值,还是undefined
console.log(obj.play);//undefined
//JS数组
let arr = ['李逵','鲁班','后羿',1,6.6,true];
console.log(arr,typeof arr);
console.log(arr[0]);
console.log(arr[5]);
console.log(arr[99]);/*访问数组不存在的下标,结果还是undefined*/
</script>
</body>
</html>
-
运算符
-
算术运算符：+ - * / %
-
除法会自动根据结果转换为整数或小数
- Java:
int x = 5; int y = 2;
int z = x/y
z=2
- JS:
let x = 5; let y = 2;
let z = x/y;
z=2.5 自动变为小数
若x变为6：z=3 自动变为整数
-
关系运算符：> < >= <= ！= ==和===
-
==：松散比较运算符：只比较等号左右两边的值，如："666"==666 结果为 true
-
===：严格比较运算符：先比较类型，类型相同后再比较值，如："666"===666 结果为 false
-
逻辑运算符：&&、||、！
-
赋值运算符：= += -= *= /= %=
-
三目运算符：条件？值 1：值 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS运算符</title>
</head>
<body>
<script>
//如果比较运算符左右两边有数字,会转为数字再进行比较
console.log(3>10);
console.log('3'>10);
console.log(3>'10');
//如果比较运算符左右两边都是字符串,会比较它们的编码值
console.log('3'>'10');//51>49=>true
/* '3'.charCodeAt()查看字符的编码值 */
console.log('3'.charCodeAt());//51
console.log('10'.charCodeAt());//49
//console.log('超'>'博');
//除法会按照实际结果显示结果
console.log(6/2);//3
console.log(3/2);//1.5
let a = 1;
let b = true;
//松散比较运算符,只比较值,Number(true)=1
console.log(a == b);//true
//严格比较运算符,先比较类型,再比较值 number ≠ boolean
console.log(a === b);//false
//Number() 将参数转为数字,如果得不到数字结果,就是NaN(Not a Number)
//Boolean()
//以下五个特殊值转为布尔都是false
console.log(Boolean(false));
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(undefined));
console.log(Boolean(null));
//三元运算符 1
let c = 0;
console.log(c==0 ? 'YES' : 'NO');//'YES'
//=是赋值符号,给c赋值为0,Boolean(0)=false,所以取3号位置的值'NO'
console.log(c=0 ? 'YES' : 'NO');//'NO'
</script>
</body>
</html>
-
流程控制
-
分支语句：（与 Java 一致）
-
if 单分支结构
-
if-else 双分支结构
-
if-else-if 嵌套分支
-
switch-case 选择分支
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05JS流程控制</title>
</head>
<body>
<script>
//1.顺序结构
console.log(1);
console.log(2);
console.log(3);
console.log(4);
//2.分支结构
let username = '露娜';
if(!username){
alert('请输入用户名!');
}else{
alert('欢迎'+username+'回来!')
}
//3.选择分支
let gender = 777;
switch (gender){
case 1:
console.log('先生');
break;
case 0:
console.log('女士');
break;
default:
console.log('保密');
}
</script>
</body>
</html>
-
for 循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制</title>
</head>
<body>
<script>
//4.循环结构
let names = ['张三','李四','王五','赵六','钱七'];
for(var i = 0;i< names.length ; i++){
console.log(names[i]);
}
//如果是用var声明的循环变量i,此处可以打印,看作全局变量
//如果是用let声明的循环变量i,此处无法使用,看作局部变量
//console.log(i);
//增强for循环
//names是当前需要遍历的集合/数组
//let n 表示本轮循环到的元素
for(let n of names){
console.log(n);
}
</script>
</body>
</html>帮大家回忆下Java的写法：
import java.util.ArrayList;
public class TestDemo {
public static void main(String[] args) {
ArrayList<Person> persons = new ArrayList<>();
Person p1 = new Person("张三",3);
Person p2 = new Person("李四",4);
Person p3 = new Person("王五",5);
persons.add(p1);
persons.add(p2);
persons.add(p3);
//增强for循环
for(Person p : persons){
p.eat(p.name,p.age);
}
}
}
class Person {
String name;
int age;
void eat(String name,int age){
System.out.println(name+"练了"+age+"年Java");
}
public Person(String name, int age) {
this.name = name;
this.age = age;
}
}所以后面的JS循环结构也可以写成这样：
<script>
var person1 ={
name: "张三",
say: function(name){
console.log(name+'你好');
}
};
var person2 ={
name: "李四",
say: function(name){
console.log(name+'你好');
}
};
var person3 ={
name: "王五",
say: function(name){
console.log(name+'你好');
}
};
var persons = [person1,person2,person3];
for(let p of persons){
console.log(p.name)
p.say(p.name);
}
</script>
-
方法
Java 语言的方法和 JavaScript 的方法对比
-
Java: public 返回值类型 方法名（参数列表）{方法体}
-
JavaScript: function 方法名（参数列表）{方法体}
三种定义方法的方式：
-
function 方法名（参数列表）{方法体}
-
let 方法名 = function（参数列表）{方法体}
-
const 方法名 = (参数列表)=>{方法体}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06函数</title>
</head>
<body>
<script>
//1.JS通过function关键字来定义函数
function f1(){
console.log('f1');
}
f1();
//2.带参数的函数
function f2(n){//形参
console.log('今日星期一'+n);
}
f2('中午吃什么?');//实参
f2(666);
f2(false);
//3.形参与实参的个数问题
function f3(x,y){
console.log(x+y);
}
f3(3,10);//13
f3(3);//3+undefined=NaN 未被赋值的形参值为undefined
f3(3,4,5);//3+4=7 多余的实参会被舍弃
//4.arguments用来保存调用函数时传入的实参,可以看到实参的个数与值
function f4(){
console.log(arguments);
}
f4(50);//Arguments[50,...]
f4(50,60);//Arguments(2)[50, 60, ...]
f4(50,60,70);//Arguments(3)[50, 60, 70, ...]
//5.函数的返回值
function f5(a,b){
return a+b;
}
var res = f5(3,4);
console.log(res);//将函数return的结果保存在res变量中,再打印出来
console.log(f5(3,4));//直接打印调用f5函数时return的结果
//函数的第二种声明方式:
//将函数整体交给变量f6来保存,调用时使用变量名调用即可
var f6 = function(){
console.log('f6');
}
console.log(typeof f6);//function
console.log(f6);//f(){ console.log('f6'); }
f6();//f6
//箭头函数
const f7 = (n)=>{
console.log('箭头函数'+n);
}
f7('你好');
</script>
</body>
</html>
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
