注
- 在pycharm中快速注释HTML的方法（用于注释方法不正确时）：
- File–Settings–Languages&Frameworks–Python Template Languages–Template Languages改为None，HTML和JavaScript注释方法就都正确了
JavaScript基础知识
- 网页三要素：HTML，css，js
- JavaScript和Java没有任何关系，最多语法看起来有点像
- JavaScript原名ivescript，是一门动态类型，弱类型基于原型的脚本语言
- 和HTML复合使用，不能单独使用
- 大部分浏览器都支持
JavaScript作用：
- 页面特效
- 前后交互
- 后台开发（node）
JavaScript写在哪里
- 写在script标签里
- 外部js文件引入
写在script标签里
1.
<head>
<meta charset="UTF-8">
<title>try</title>
<script>
alert("wer");
</script>
</head>
<body>
<div>
<input type="button" value="点我" onclick="alert('bug')">
</div>
2.
<head>
<meta charset="UTF-8">
<title>try</title>
</head>
<body>
<div>
<input type="button" value="点我" onclick="alert('bug')">
</div>
<script>
alert("wer");
</script>
外部的js文件内，然后引入
<head>
<meta charset="UTF-8">
<title>try</title>
<script src="js/a.js"></script>
</head>
<body>
<div>
<input type="button" value="点我" onclick="alert('bug')">
</div>
-
a.js的代码:
alert("wer");
输入输出语句
alert prompt console.log
alert 在浏览器上方弹出的弹框
prompt 输入框类型的弹框，得到的类型是字符串型
console.log 在控制台打印的内容属于 info 等级
JS一些注意事项
- 严格区分大小写
- 每一行完整语句后面加分号
- 变量名不能使用关键字和保留字
- 代码要缩进，保持可读性
- 注释用//
<script>和</script>中间不要写代码和内容
变量
本质：变量是程序在内存中申请的一块用来存放数据的空间
变量使用分两步：声明变量、赋值
声明变量用 var，var 是 JS 关键字，variable（变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间
通过变量名来访问内存中分配的空间
声明变量并赋值，叫变量的初始化
var a = ‘hh’;
声明多个变量： var age=18, name=‘xiaoge’;
变量严格区分大小写，不能以数字开头，建议小驼峰；不要用 name 作为变量名；变量名中可以存在的符号：$ 和 _
声明变量
函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量
let 声明的变量只在 let 命令所在的代码块内有效
const 声明一个只读的常量，一旦声明，常量的值就不能改变
全局变量、局部变量
- 在函数外声明的变量作用域是全局的：
var carName = "Volvo";
// 这里可以使用 carName 变量
function myFunction() {
// 这里也可以使用 carName 变量
}
- 在函数内声明的变量作用域是局部的（函数内）：
// 这里不能使用 carName 变量
function myFunction() {
var carName = "Volvo";
// 这里可以使用 carName 变量
}
// 这里不能使用 carName 变量
特殊情况
只声明，未赋值，返回 undefined（未定义）
不声明不赋值，报错
不声明，直接赋值，变量是全局变量
JS修改元素内容
- 首先获取id为xxx的元素 document.getElementByld(" ")
- var 是js定义变量的关键字,创建（声明变量），如果不加为全局变量
- innerHTML和innerText可以修改/获取
JS获取元素
-
通过id获取元素:id
document.getElementById(" "); -
通过class名字获取元素:class
document getElementsByClassName(" "); -
通过标签名获取元素:tagName
document.getElementsByTagName(" "); -
通过name的属性获取元素，一般用于input:name
document.getElementsByName(" "); -
通过css选择器获取一个
document.querySelector(" "); -
通过css选择器获取所有
document.querySelectorAll(" ");
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<p id="p1"><span>111</span></p>
<p class="c1">2222</p>
<span name="span1">3333</span>
</div>
<div class="div2">
<p class="c1">5555</p>
<span name="span1">6666</span>
<p name="span1">7777</p>
<span class="c1">8888</span>
</div>
<div>
<p>9999</p>
<span>0000</span>
</div>
<script type="text/javascript">
//通过id获取元素,一个网页中一个id命名使用一次,所以不用加索引
var a = document.getElementById('p1');
a.onclick = function () {
alert('bug');
};
//通过标签名获取元素,需要加索引
var b = document.getElementsByTagName('span')[0];
b.onclick = function () {
alert('bug');
};
// 通过name获取元素,需要加索引
var c = document.getElementsByName('span1')[1];
c.onclick = function () {
alert('bug');
}
// 通过classname获取元素,需要加索引
var d = document.getElementsByClassName('c1')[1];
d.onclick = function () {
alert('bug');
};
// 通过css选择器获取一个元素
// 单独的标签获取第一个,如果选择器里还嵌套标签,第一个选择器里面的所有标签都能获取,不能索引
// 选div时,第一个div标签里的标签都能获取
var e = document.querySelector('div');
e.onclick = function(){
alert('bug');
};
// 通过class标签获取所有
// 此时获取的是id为div1下的所有的span标签
// div标签里嵌套其他标签时需要索引,表示第几个div里的所有标签都可以获取
// 单独的标签可以直接索引获取
// #div1或者.div2加上里面的标签需要索引获取
var f = document.querySelectorAll('div')[0];
f.onclick = function () {
alert('bug');
};
</script>
</body>
</html>
标识符、关键字、保留字
- 标识符：就是指开发人员为变量、属性、函数、参数取的名字
- 标识符不能是关键字或保留字
- 关键字：是指 JS 本身已经使用了的字，不能再用他们充当变量名、方法名
- 包括：break,case,catch,continue,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with 等
- 保留字：实际上就是预留的关键字，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名
- 包括：boolean,byte,char,class,const,debugger,double,enum,export,extends,fimal,float,goto,implements,import,int,interface,long,mative,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile 等
JavaScript简单事件
JS的基础事件
-
单击事件：onclick
-
双击事件:ondblclick
-
鼠标划入:onmouseenter
-
鼠标划出:onmouseleave
-
窗口变化:onresize
// 浏览器窗口有变化时就会出现 window.onresize = function () { alert("3245"); }; -
改变下拉框:onchange
<select> <option value="1">苹果</option> <option value="1">橘子</option> <option value="1">橙子</option> </select> <script type="text/javascript"> var h = document.getElementsByTagName('select')[0]; //改变下拉框里的值就会弹出 h.onchange = function () { alert('改变了'); }; </script>
操作标签属性
-
合法属性的增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <div> <p id="p1" class="s1">我是一句话</p> </div> <script type="text/javascript"> var a = document.getElementById("p1"); // 增/改：无则增，有则改 a.className="hahaha"; // 查 console.log(a.className); // 删除 a.removeAttribute("class"); console.log(a); </script> </body> </html> -
自定义属性的增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <di <p id="p1" class="s1">我是一句话</p> </div> <script type="text/javascript"> var a = document.getElementById("p1"); // 增/改 无则增，有则改 a.setAttribute("age","m"); // 查，查到返回true，没查到返回false console.log(a.hasAttribute("age")); // 删除 a.removeAttribute("age"); console.log(a); </script> </body> </html>
JS修改样式
- Obj.style.变量=变量值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>try</title>
</head>
<body>
<div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue">
<p id="p1" class="s1">我是一句话</p>
</div>
<script type="text/javascript">
var b = document.getElementById("div2");
b.style.width = "50px";
b.style.height = "50px";
console.log(b)
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>try</title>
</head>
<body>
<div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue">
<p id="p1" class="s1">我是一句话</p>
</div>
<script type="text/javascript">
var a = document.getElementById("div2");
var b = document.getElementById("div2");
b.onclick=function() {
a.style.width = "50px";
a.style.height = "50px";
}
console.log(b)
</Script>
</body>
</html>
数据类型
为什么需要数据类型
- 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型
- js 的变量数据类型是只有程序在运行中，根据等号右边的值来确定的
- js提供了一种检测当前变量的数据类型的方法，也就是typeof关键字
- typeof 用法：
typeof a或者typeof(a)
JS的数据类型
- 五种基本类型（Number，String，Boolean，Undefined，Null）＋object（复杂型）
Number类型
- Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值，默认值 0
var a = 123;
console.log(typeof a); - 数字前面加 0，表示 8 进制
var a = 010;
console.log(a) // 8，alert 和 console.log() 默认把值转换成 10 进制
- 数字前面加0x，表示 16 进制
var a = 0x10;
console.log(a) // 16，alert 和 console.log() 默认把值转换成 10 进制
- 数字型最大值和最小值
alert(Number.MAX_VALUE); //1.7976931348623157e+308
alert(Number.MIN_VALUE); //5e-324
- 无穷大 Infinity、无穷小 -Infinity、非数字类型 NaN（not a number）
alert(Number.MAX_VALUE * 2); //Infinity 无穷大
alert(-Number.MAX_VALUE * 2); //-Infinity 无穷小
alert('haha' - 1); //NaN 非数值
-
isNaN() 函数用于检查其参数是否是非数字值
isNaN(123) //false isNaN("hello") //true
String类型
- 默认值 “”
- 字符串有length属性
- 字符串转换：转型函数String(),适用于任何数据类型（null,undefined 转换后为null和undefined）；toString()方法（null,defined没有toString()方法）
- 字符串要用引号，推荐用单引号，如果字符串内还有引号，推荐外单内双，或者用
\转义
var a = "123";
console.log(typeof(a));
alert('\'xiaoge\'handsome') //用 \ 转义
- 转义符
- \n：换行
- \：斜杠\
- '：单引号
- \t：缩进tab
- \b：空格blank
- 查看字符串长度：length，用法：str.length
- 注意：js 中，每个符号、汉字、空格、换行、缩进都是占用一个字符
- 字符串加任何类型，得到的都是字符串
var b = '2' - 11;
alert('11' + b); //11-9 引号里写数值，减去一个数字型，得到的是数字型
Boolean类型
- 该类型只有两个值，true和false，默认值 false
- 布尔型可以参与加减法运算
var a = true;
console.log(typeof(a)); //boolean
var b = true;
alert('11'-b); //10
Undefined类型
- 只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined
var a;
console.log(typeof(a));
alert(undefined+11); //undefined 和数字型相加，得到 NaN
Null类型
- null类型被看做空对象指针，前文说到null类型也是空的对象引用
var a = null;
console.log(typeof(a)); //object
alert(null + true); //1
alert(typeof(null + true)); //number null 和数值型相加，得到数值型，结果就是该数值型的值
- null类型进行typeof操作符后，结果是object，原因在于null类型被当做一个空对象引用
字面量
- 字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值，就是一眼看出的类型
- 8，9，11：数字字面量
- ‘小哥’，‘张起灵’：字符串字面量
- true，false：布尔字面量
数据类型转换
其他转字符串
- 变量.toString()
- String()
- 隐式转换：用加号拼接（常用）
var a = 10;
alert(typeof a.toString()); //string //变量.toString()，如果用 10.toString() 会报错
alert(typeof String(10)); //string
alert(typeof(10+'')); //string
字符串转数值
- parseInt()（常用）
- parseFloat()（常用）
- Number()
- 隐式转换
alert(parseInt('-3.56')); //-3,小数取整，或者理解为遇到非数字，停止取数
alert(parseInt('231dsf53')); //23 引号中以数字开头，还有非数字的，取最前面的连续数字
alert(parseInt('是的23dsf53')); //NaN 引号中不是以数字和正负号开头的，显示非数字类型
alert(parseFloat('-3.56.23')); //-3.56 只会取第一个小数点，第二个小数点相当于其他字符，不会取
alert(parseFloat('231.0dsf53')); //231 小数点后只有0没有其他连这个数字，不取0
alert(parseFloat('231.0132dsf53')); //231.0132
console.log(Number('-32.56ds')); //NaN 字符串中不能有其他字符（除了开头的正负号，浮点数，有第二个小数点也会返回NaN）
console.log(Number('32.623')); //32.623
console.log(Number('-23.000')); //-23
console.log('-32.56' * 2.1); //-68.376
console.log('53.2' / 0); // Infinity
console.log('+23.51' - '-0.51'); //24.020000000000003
console.log('23.51' - '0.51'); //23
转换成布尔型
- Boolean()
- 代表空、否定的值会被转换成 false，如’’、0、NaN、null、undefined，其他的会转换成 true
var x;
console.log(Boolean('23sd')); //true
console.log(Boolean(parseFloat('23gsdf'-'sdf'))); //false parseFloat('23gsdf'-'sdf') 得到的是 NaN
console.log(Boolean(0)); //false
console.log(Boolean(null)); //false
console.log(Boolean(x)); //false
console.log(Boolean('')); //false
console.log(Boolean('0')); //true
计算年纪
var year = prompt('输入出生年份，小鬼！');
age = 2021 - year + 1; //year 是字符串型，这里隐式转换成数字型
alert('年纪：'+age+'虚岁');
Object类型
- js中对象是一组属性与方法的集合,这里就要说到引用类型了，引用类型是一种数据结构，用于将数据和功能组织在一起,引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法
引用类型
Object类型
- 我们看到的大多数类型值都是Object类型的实例
- 创建Object实例的方式有两种
-
第一种是使用new操作符后跟Object构造函数，如下所示
var person = new Object(); person.name = "Micheal"; person.age = 24; -
第二种方式是使用对象字面量表示法，如下所示
var person = { name : "Micheal", age : 24 };
-
Array类型
- 数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象等等
- 数组的大小是可以动态调整的
- 创建数组的基本方式有两种
-
第一种是使用Array构造函数，如下所示
var colors = new Array("red","blue","yellow"); -
第二种是使用数组字面量表示法，如下所示
var colors = ["red","blue","yellow"];
-
Function类型
-
每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法，函数通常是使用函数声明语法定义的，如下所示
function sum(num1,num2){ return num1 + num2; }; -
这和使用函数表达式定义函数的方式相差无几
var sun = function (){ return sum1 + sum2; };
案例
var name = 'xiaoge';
alert(typeof name);//string
var age = 15;
alert(typeof age);//number
var flag = true;
alert(typeof flag);//boolean
var a;//undefined
alert(typeof a);
var b = null;
alert(typeof b);//object
var arr = [1,2,3];//object
alert(typeof arr);
var user = {
name:'xiaoge',
age:18
};
alert(typeof user);//object
alert(typeof console.log());//undefined
var say = function () {
alert(name+'很帅');
};
alert(typeof say);//function
alert(say())//xiaoge很帅//undefined
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/test.css">
<script src="js/test.js"></script>
</head>
<body>
<div class="d1">
属性名：<input type="text" class="an"><br>
属性值：<input type="text" class="av"><br>
<input type="button" value="设置" class="set1">
</div>
<div class="d2" style="width: 200px; height: 200px; background-color: yellow; line-height: 200px; text-align: center;">我就是我</div>
<script type="text/javascript">
var moumov = document.getElementsByClassName('d2')[0];
moumov.onmouseenter = function () {
moumov.innerText = '是我还是我';
moumov.style.background = 'blue';
};
moumov.onmouseleave = function () {
moumov.innerText = '我就是我';
moumov.style.background = 'yellow';
};
var inp = document.getElementsByTagName('input');
inp[2].onclick = function () {
var attr = inp[0].value;
var attrs = inp[1].value;
moumov.style[attr] = attrs;
};
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
