美文网首页
JavaScript

JavaScript

作者: 蘑菇plus | 来源:发表于2018-08-18 11:12 被阅读0次

1.(行为标准)js是JavaScript的缩写, 是脚本语言, 专门用来负责网页上的行为(可以直接写在网页当中).

2.在哪写JS代码
a.可以写在script标签中(理论上script标签可以放到html标签的任何位置, 实际开发的时候一般放在head或body中)
b.写到标签的事件属性中(例如:onclick)
c.写到外部的js文件中(文件名.js)

3.js在网页中能做什么事情
a.在网页的不同位置, 插入html代码
b.修改某个标签的内容
c.修改标签的样式

4.怎么写

js基础语法

//1. js中的注释
//这是单行注释
/*
 这个是多行注释
 */

//2.语句
//一条语句结束需要加分号(现在的js版本也可以不用写)
//一行写多条语句必须使用分号隔开


//3.js没有缩进问题,用{}表示一个块

//4.基本数据类型
//Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)-- 列表、Object(对象)--字典、Function(函数)、null、undefined


//在控制台中打印括号中的内容,功能和python中的print
        
console.log('hello world');
console.log('你好,python');


//5.字面量
//数字字面量
89;
100;
10.34;
3e8;

//字符串字面量
'abc';
"abc";

//布尔字面量
true;
false;

//数组字面量
[1,2,'ban',true];
[];

//对象的字面量(对象的key值又是属性,不用加引号)
var dict = {a:'abc', b:'hh'};
//console.log(dict.a, dict['b']);

//6.标识符
//使用标识符来命名
//a.由字母、数字、_和$组成,数字不能开头
var s8uu_$;

//b.不能关键字
//var for

//c.大小写敏感,y和Y不一样
//d.规范:见名知意

变量的声明

//在js中可以通过声明变量来保存数据
/*
 * 1.语法
 * var 变量名;
 * var 变量名 = 初值;
 * 说明: var是关键字;
 *       变量名:标识符,不能随意使用_或者$开头;驼峰式命名规则(第一个单词首字母小写,后面每个单词的首字母大写)
 */
//声明变量
var userName;
//给变量赋值
userName = 'Wang';
console.log(userName)

var score = 100
console.log(score)


//同时声明多个变量
var name, age, sex;
var name1='abc', age1 = 18, sex;  

//一个变量可以存储任意类型的值;声明变量的时候,变量没有赋值,默认是undefined
var a = 'abc'
a = 100

a = score

运算符

//1.数学运算符:+, -, *, /, %, ++, --
//a._,-,*, %和数学中的求和、求差以及求乘积,取余是一样的
var a = 10+20;
var b = 20 - 10;
var c = 10*20;
var d = 7 % 2

//b./ 和数学中的除一样
var e = 5/2
console.log(e)

//c.++,--(单目运算符)
/*
 * 语法: 变量++/变量-- ; ++变量/--变量
 * ++: 自加一
 * --:自减一
 */
var a1 = 10
var b1 = 10
a1++
++b1
console.log(a1,b1) // 11, 11

a1--
--b1
console.log(a1, b1) // 10, 10

var c1 = a1++    // ++/--写到后面的时候,先赋值,再自加/自减
var c2 = ++b1    // ++/--写到前面的时候,先自加/自减,再赋值
console.log(c1, c2)   

//2.比较运算符: >,<,==(相等),!=, >=,<=, ===(完全相等), !==,>==, <==
//结果都是布尔值
console.log(10 > 20)  // false
console.log(10<20) 

//==:判断值是否相等
console.log(5==5)   //true
console.log(5=='5')  //true

//===:判断值和类型是否相等
console.log(5===5)  //true
console.log(5==='5')  //false

console.log(5!=5, '5'!=5)  //false,false
console.log(5!==5, '5'!==5) //false,true

//3.逻辑运算符:&&(与), ||(或), !(非)
console.log('与:',true && true, true && false)
console.log('或',true || false, false || false) 
console.log('非',!true, !false)  

//4.赋值运算符: =, +=, -= , *=, /=, %=
//赋值运算符的左边必须是变量
//和python的语法一样
var a = 100;
a += 10  // a = a+10
a -= 10
a *= 10
a /= 10
a %= 10
console.log(a)

//5.三目运算符 
/*a.格式:
 * 条件语句 ?值1 : 值2;
 * b.结果:
 *判断条件语句的结果是否是true,如果是true,那么表达式的结果就是值1,否则是值2
 */
var b = true ? 10:20;
console.log(b)

//求两个数之间的最大值
var a1 = 80
var a2 = 100
console.log(a1 > a2 ? a1:a2)

//6.运算符的优先级和python基本一样。可以通过括号来改变运算顺序

分支结构

//js中的分之结构有两种:if语句,switch语句
/*1.if语句
 * a.if(条件语句){满足条件要执行的代码块}
 */
var age = 18
if(age>=18){
    console.log('成年')
}

//b.if(条件){语句块1}else{语句块2}
if(age>=18){
    console.log('成年')
}else{
    console.log('未成年')
}

//c.if - else if - else(相当于python中的if-elif-else)
if(age<18){
    Console.log('未成年')
}else if(age<40){
    console.log('青年')
}else{
    console.log('老年')
}

//2.switch语句
/*
 switch(变量){
    case 值1:
        语句1;
        break;
    case 值2:
        语句2;
        break;
    ...
    default:
        语句3;
        break;  
 }
 执行过程:使用变量的值依次和后边每个case后面的值进行判断,看是否相等(是否完全相等)。
 如果相等就执行那个case后面对应的语句。如果前面每个case后面的值都和变量的值不相等,就执行default后边的语句
 */
var score = 10;
switch(score){
    case 1:
        console.log('F');
        break;
    case 10:
        console.log('A+')
        break;
    case 9:
        console.log('A');
        break;
    default:
        console.log('其他');
        break;      
}
console.log('======')

//10分制分数:0-5:不及格,6-7:及格 8-9:良好  10:优秀
score = 9
switch(score){
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('不及格');
        break;
    case 6:
    case 7:
        console.log('及格');
        break;
    case 8:
    case 9:
        console.log('良好');
        break;   // switch中的break,可以让switch直接结束
    case 10:
        console.log('优秀');
        break;
}

//0-6表示星期1到星期日
var week = 0;
switch(week){
    case 0:
        console.log('周一');
        break
    case 1:
        console.log('周二');
        break;
    case 2:
        console.log('周三');
        break;
    case 3:
        console.log('周四');
        break;
    case 4:
        console.log('周五');
        break;
    case 5:
        console.log('周六');
        break;
    case 6:
        console.log('周日');
        break;
    default:
        console.log('其他情况')
    
}

循环结构

//js中的循环分为for循环和while循环
//1.for循环
//a.for-in(和python中的for循环一样)
var arr1=[1,2,'gg']
//x取得是下标
for(var x in arr1){
    console.log(arr1[x])
}

var obj1={name:'张三',age:30}
//key拿到的是属性名
for(var key in obj1){
        console.log(obj1[key])
}


//b.for(表达式1;表达式2;表达式3){循环体}
//执行过程:先执行表达式1,然后再判断表达式2的结果是否是true,如果是true就执行循环体;
//执行完循环体,再执行表达式3,执行完表达式3,再判断表达式2的结果是否为true,如果是true就执行
//循环体,执行完循环体,再执行表达式3;直到表达式为false,循环结束
var sum=0
for (var i=1;i<=100;i++){
    sum+=i
}
console.log(sum)
//2.while循环
//a.while(条件语句){循环体}--和python一样
var i=1
var sum2=0
while(i<=100){
    sum2+=i;
    i++;
}
console.log(sum2)
//b.do-while循环:do{循环体}while(条件语句 );
//执行过程,执行循环体,然后判断条件是否成立,如果成立再执行循环体
//以此类推,直到条件不成立,循环结束
var i=1
var sum3=0
do{
    sum3+=i;
    i++;
}while(i<=100);
    console.log(sum3)
    
3.break和continue(和python一样)

函数

//1.函数的声明
//function 函数名(参数列表){函数体}
//a.function - 关键字
//b.函数名 - 驼峰式;见名知义
//c.参数:参数可以有默认值,有默认值的参数要写在后面。调用函数传参的时候,是按实参的位置来传参。
//     保证每个参数都有值
//d.函数体: 实现函数的功能。只有在调用的时候才执行

function sum1(num2, num1=1){
    console.log('求两个数的和')
    return num1 + num2
}

console.log(sum1(10,20))
console.log(sum1(10))
//console.log(9/0)

//函数没有return的时候,函数的返回值是undefined
function func1(){
    console.log('我是函数1')
}
console.log(func1()) 


//2.函数的调用
//函数名(实参列表)
//调用过程和python一样

//3.作用域
//全局变量:声明在函数外面的变量(从变量声明到文件结束)
//局部变量:声明在函数里面的变量 (从变量声明到函数结束;函数的参数也是局部变量)


//aaa就是全局变量
var aaa = 10

function func2(){
    //bbb就是局部变量
    var bbb = 100
    console.log(bbb, aaa)
    //函数中可以修改全局变量的值
    aaa = 200
    
    //函数中可以声明函数
    function func22(){
        bbb = 1.1
        console.log(bbb)
    }
}

func2()
//console.log(bbb)
console.log(aaa)

//可以将函数作为变量
var a = func2
a()

//个数不定参数,js不支持

数据类型

//数字、字符串、布尔、列表、对象
//1.数字:包含整数和小数(支持科学计数法)
var num1 = 10
var num2 = new Number()
console.log(num2+10)  

//2.字符串
//a.''和""括起来的字符集
//b.转义字符(和python一样)
//c.字符编码是unicode编码
var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\'

//e.获取字符串长度: 字符串.length
console.log(str1.length)

//f.获取单个字符:字符串[下标]
//下标:1.范围是0 ~ 长度-1  2.如果越界,不报错,但是结果是undefined
//js中的字符串不能切片
console.log(str1[0])

//g.运算符
//js中字符串只支持+,不支持*
// 字符串1 + 字符串2 -- 拼接两个字符串
// js中字符串可以和其他任何数据进行加操作,其效果都是字符串连接(会将其他数据转换成字符串)
console.log('123'+'abc', 'abc'+100) 

//h.字符串相关方法(查)
var strstr = 'abc123'
var re = strstr.replace(/\d+/i,'ooo')
console.log(re)


//3.对象,构造方法(类)
var obj1 = {name:'YuTing', age:18}
console.log(obj1.name, obj1['name']) 

//声明构造方法
function Person(name='', age=0, sex=''){
    this.name = name
    this.age = age
    this.sex = sex
}

var p1 = new Person()
p1.name = 'mmm'
p1.age = 20
console.log(p1, typeof(p1))

相关文章

网友评论

      本文标题:JavaScript

      本文链接:https://www.haomeiwen.com/subject/oetfiftx.html