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 变量的命名规范

和其他编程语法一样的

使用驼峰命名法(首字母小写,后面每个单词开头大写),也可以使用下划线分割单词

  1. 大小写敏感,
  2. 不能数字作为开头命名,
  3. 不能使用关键字作为变量,
  4. 变量名必须要有意义
  5. 使用有道/爱词霸去翻译
  6. 不要直接使用name作为变量名,有些浏览器中name有特定含义
  7. 当字符为开头,只允许_ 和$两个

p18 测试:变量值的交换

用一个temp作为中间介质,来实现交换,很简单

p19 变量小结

没啥东西

p20 数据类型概述

p21 数据类型的简介

1.因为不同的数据占据的存储空间不同,来划分数据类型,用来提高内存利用率

变量的数据类型。

JavaScript是动态语言(弱类型),运行的适航才能知道他是什么类型,只有在运行的时候才知道

变量的数据类型是可以变的,是可以切换的

var x = 24;
x = '李欢欢';

p22-p30数据类型的分类

1.简单数据类型

  1. Number:包括整形和浮点型,都可以,二进制,八进制(开头是0,比如010 = 8),十六进制(0x11=17)都可以表示

    Number.MAX_VALUE;获得number最大值

    Number.MIN_VALUE;获得number最小值

    Infinity 表示无穷大

    判断是否判断一个变量是否为Number类型的方法:isNaN()

    NaN是not a number的缩写

  2. Boolean :只有true 和false

  3. String :表示字符串

    可以是单引号(推荐)(匹配规则是就近原则),也可以是双引号,都表示字符串

    var str = '我是一个"高富帅"';
    规则:外双内丹,外单内双
    
  4. Undefined

    只声明未赋值

  5. 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 运算符导读(各种语言的运算没什么区别,我跳了)

运算符:实现赋值,比较,执行数值运算功能的符号

  1. 算数运算符
    1. 加减乘除
    2. 取余(判断一个数能否被整除)
    3. 浮点数由于精度有问题,不能拿着浮点数来直接进行计算
  2. 返回值和表达式
  3. ++i(先自加,再返回) 和i++(先输出i的值,然后才返回)
  4. 逻辑运算符 与或非(逻辑&& || not)
  5. 中断逻辑 与或 (& |)

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断点调试

  1. F12 到检查页面
  2. 点击source 进入调试,再代码左边设置断点
  3. 刷新网页,点击step into next function call
  4. 再debugger paused 旁边有一个watch 可以添加变量,可以随时看到变量的变化

p92-93 break 和continue

  1. continue关键字 跳出单次的循环 当i ==3的时候不执行,否则都执行
  2. 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 新增数组元素

  1. 修改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>
    
  2. 修改索引号,新增数组元素(最常见的)

    不要直接给数组赋值,否则会覆盖以前的数据

    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> 

posted @ 2020-06-15 10:58  li33的博客  阅读(231)  评论(0编辑  收藏  举报