JS 基础部分(一)
JS初级笔记
6月11日
p7
操作ECMAscript Dom Bom
ECMAScript :这是一个规定js编程语法和基础核心知识的标准。包括网景公司的JavaScript 。微软的Jscript
Dom文档对象模型 对元素操作
Bom 浏览器对象模型 对浏览器操作
p8
书写位置:行内式,内嵌式,外部式
1.行内式:直接在元素内部写代码(不要写)
2.内嵌式:在head内内嵌script标签,在里面写js代码(适合较小的代码量)
3.外嵌式:引用外部js代码(建议)
p9
注释:单行注释和多行注释:
单行注释// 快捷键ctrl + /
多行注释/**/ 快捷键ctrl + shift +/
p10
js输入输出语句
1.alert(' ')
2.console.log(msg)
3.prompt('');
// 输入框
prompt('请输入你的年龄');
//输出框,弹出框
alert('输入的不对');
//控制台输出,给程序员测试用的
console.log('不知道这个些什么');
p11 变量的总体分析
p12 变量概述
变量是内存中的一个空间,对应一个数据,变量名对于合格空间
p13变量的使用
声明------->赋值
var age;//1.声明一个age的变量 varible(变量)
age = 18;
简化变量的初始化
var myname = '李欢欢';
p14-15-16变量的使用
var name = '李欢欢'
检查元素之后,可以在console看到这些变量的数据
var name = prompt('请输入你的名字');
alert('你的名字'+name);
变量的覆盖
声明多个变量
var age=24 ,school='南京邮电大学';
1.只声明不赋值 undefined提示
2.不声明 不赋值 直接使用 会报错
3.不声明 赋值 直接使用, 可以,但是不建议使用,因为他会变成全局变量
p17 变量的命名规范
和其他编程语法一样的
使用驼峰命名法(首字母小写,后面每个单词开头大写),也可以使用下划线分割单词
- 大小写敏感,
- 不能数字作为开头命名,
- 不能使用关键字作为变量,
- 变量名必须要有意义
- 使用有道/爱词霸去翻译
- 不要直接使用name作为变量名,有些浏览器中name有特定含义
- 当字符为开头,只允许_ 和$两个
p18 测试:变量值的交换
用一个temp作为中间介质,来实现交换,很简单
p19 变量小结
没啥东西
p20 数据类型概述
p21 数据类型的简介
1.因为不同的数据占据的存储空间不同,来划分数据类型,用来提高内存利用率
变量的数据类型。
JavaScript是动态语言(弱类型),运行的适航才能知道他是什么类型,只有在运行的时候才知道
变量的数据类型是可以变的,是可以切换的
var x = 24;
x = '李欢欢';
p22-p30数据类型的分类
1.简单数据类型
-
Number:包括整形和浮点型,都可以,二进制,八进制(开头是0,比如010 = 8),十六进制(0x11=17)都可以表示
Number.MAX_VALUE;获得number最大值
Number.MIN_VALUE;获得number最小值
Infinity 表示无穷大
判断是否判断一个变量是否为Number类型的方法:isNaN()
NaN是not a number的缩写
-
Boolean :只有true 和false
-
String :表示字符串
可以是单引号(推荐)(匹配规则是就近原则),也可以是双引号,都表示字符串
var str = '我是一个"高富帅"'; 规则:外双内丹,外单内双
-
Undefined
只声明未赋值
-
Null
里面存值为空
2.转义字符(重点记忆这些)
\n 换行
\t tab 缩进
\\ 斜杠\
\'
\"
\b 空格
3.用js做出简单的字符串长度判断规则
str.length :可以得到字符串的长度
4.字符串的拼接(数值详解,字符相连)
console.log('字符串1'+'字符串2');
console.log(数字+'字符串2'); //拼接
console.log(数字+数字);//数字的和
5.字符串加强(变量不写在字符串用,而是通过+连接起来)
console.log('字符串1'+数字+'字符串2'); //拼接
6.获取数据类型(prompt取的值是字符类型的)
var num = 10;
console.log(typeof num);判断它是什么类型
p31 字面量(源代码中一个固定值的表示法)
p32 数据类型转换
- 转换为字符串类型
- 数字型转换成字符串 方法一: var str = num.toString();
- 方法二:String(num);
- 方法三:(隐式转换)利用拼接的方法来转换,加上一个空的字符串 num1 = num + ''
- 转换为数据类型
- 转换为布尔类型
p33 把其他的类型转化为数字类型
var age = prompt('请输入你的年龄');
- 方法一:parseInt(age); 只能得到整数
- parseInt('120px') 可以直接转化成数字
- 方法二:parseFloat(变量) 可以得到整数和浮点数
p34 转换为数字类型和隐式转换
- 方法一:利用Number()方法
- 方法二:利用四则运算(除了+法都可以)
- var result = ’123'-'120';得到一个整数
p35-36 简单的转换用例
var year = prompt('请输入你的出生年份');
age = 2020 -year;
alert(typeof age);
alert(age);
//获取出生字符串转换为数字的案例1
var str1 = prompt('请输入数字');
var str2 = prompt('请输入数字2');
var num = Number(str1)+Number(str2);
var num1 = parseFloat(str1)+parseFloat(str2);
alert(typeof num);
alert(num);
//字符串相加转化为数字的案例2
p37 转换为布尔值
方法一:使用Boolean()函数,将其他类型转换为布尔值
1.代表空,否定的值会被转换为false,0 ,NaN,null ,undefined等
p38 编译语言和解释语言的特点和区别
概念:
1.编译语言:(全部上完菜才能吃)代码执行之前将代码编译
2.解释语言:(边上菜边吃)
p39 标识符,关键字,保留字
标识符不能是关键字和保留字
关键字:js本身已经使用的字,不能用他们充当变量名
保留字:实际上就是预留的“关键字” (java中的那些关键字)
p40 作业
p41-p54 运算符导读(各种语言的运算没什么区别,我跳了)
运算符:实现赋值,比较,执行数值运算功能的符号
- 算数运算符
- 加减乘除
- 取余(判断一个数能否被整除)
- 浮点数由于精度有问题,不能拿着浮点数来直接进行计算
- 返回值和表达式
- ++i(先自加,再返回) 和i++(先输出i的值,然后才返回)
- 逻辑运算符 与或非(逻辑&& || not)
- 中断逻辑 与或 (& |)
p55-P72 流程控制分支结构(和其他语言差不多)
-
顺序结构
-
分支结构
-
if else
-
if (){
-
}else if {
-
switch(表达式){
case value1:
执行语句1
break;
case value2:
执行语句2;
break;
defalut:
}
注意事项:1.表达式经常写成变量
2.表达式和value的值相匹配是全等于符号,也就是说他们的数据类型也要一直
-
-
循环结环
-
for循环(最重要)
-
for(var i = 0;i < 100;i ++){
console.log('你好吗?');}
-
-
while 循环
- while(条件)
-
do while循环 至少执行一次代码
-
do
while(条件){执行
}
-
-
p73断点调试
- F12 到检查页面
- 点击source 进入调试,再代码左边设置断点
- 刷新网页,点击step into next function call
- 再debugger paused 旁边有一个watch 可以添加变量,可以随时看到变量的变化
p92-93 break 和continue
- continue关键字 跳出单次的循环 当i ==3的时候不执行,否则都执行
- break 跳出全部的循环
p94-95 标识符命名规范(6月11日笔记)
- 变量,函数的命名必须要有意义
- 变量的名称一般用名词
- 函数的名称一般用动词
- for 括号的左右空间都应该有个空格
p96 数组
1.数组的创建方式
var arr = new Array();//创建一个空的数组
2.利用数组字面量创建数组(数组里面的数据用,隔开)
var arr =[];
var arr = [1,2,3,4];
数组可以存放任意类型的数据
p97 获取数组元素
数组的索引(下标,从0开始)
arr[2]可以得到第三个数据。
没有这个数组元素的时候,输出undefined。比如一共只有三个元素,现在输出第四个的时候
p99 把数组中的全部元素取出来
通过循环取出所有元素,也叫做遍历。
for (var i = 0 ;i ❤️ ;i++) {
console.log(arr[i]);}
p100 数组长度
数组名.length 可以动态监测数组长度 。例如 : arr.length
数组的长度=最大索引号+1,他们不等价
p101-102 案例 for循环求和,平均值,最大值
p103 将数组元素相加
str= ‘ ’;
str+=arr[i];
p104 新增数组元素
-
修改length长度,实现扩容
<script> var arr = ['red','blue']; console.log(arr.length); arr.length = 5;//把数组元素修改成5,后面会多出亮哥哥empty元素 console.log(arr.length); console.log(arr[3]);//undefined </script>
-
修改索引号,新增数组元素(最常见的)
不要直接给数组赋值,否则会覆盖以前的数据
console.log(arr);之一直接输出数组
p105-107 筛选数组
<script>
var arr = [2,0,6,1,77,0,52,0,25,7];
var arr1 = [];
var j = 0;
for(var i = 0;i<arr.length;i++){
if(arr[i]>10){
arr1[j] = arr[i];
j++;
}
}
console.log(arr1);
</script>
<script>
var arr = [2,0,6,1,77,0,52,0,25,7];
var arr1 = [];
for(var i = 0;i<arr.length;i++){
if(arr[i]>10){
arr1[arr1.length] = arr[i];
}
}
console.log(arr1);
</script>
由于新数组的长度从0开始,所以可以利用这个性质给该数组的下个元素赋值。
p108-109 数组去重 翻转数组(无语,旧数组的值从后往前赋值给新数组)
需要一个新数组,把原数组中的数据存放到新数组
p110-112 冒泡排序
<script>
var arr = [2,0,6,1,77,0,52,0,25,7];
for(var i = 0;i<arr.length - 1;i++){
for(var j=0 ;j<arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
var temp;
temp =arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
console.log(arr);
</script>