初识js

最新推荐文章于 2024-04-26 09:57:54 发布

shadow_tian1

最新推荐文章于 2024-04-26 09:57:54 发布

阅读量299

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/tian_98/article/details/108573453

版权

初识JavaScript

浏览器历史：网景公司，相对于市面上比较成熟的浏览器，仅仅是用于浏览，并没有任何交互，急需一种脚本语言，用来解决form表单提交
布兰登·艾奇。用了10天的时间开发出来了JavaScript，借鉴了c语言的函数和java的管理机制。
MOche——>LiveScript——>JavaScript
什么叫做JavaScript
- 基于对象：js是一种基于对象的语言，这意味着他能运用自己已经创建好的对象，因此，许多功能可以来自脚本环境中的对象方法与脚本的相互作用。意思就是说：js提供了很多很多的方法供我们直接使用
- 事件驱动：JavaScript可以直接对用户或客户输入做出响应，无需经过web服务器，他对用户的响应以事件驱动的方式进行。意思就是说：浏览器与用户的交互
- 解释性：浏览器可以直接识别和解析js代码
  java：搭建环境——>编译(一劳永逸)
  JavaScript：代码一行一行的解释，解释一行展示一行
JavaScript的组成
ECMAScript：ECMA国际指定的一种语言规范。是Js的代码规范
DOM：文档对象模型（documrnt object model）
BOM：浏览器对象模型（brower object model）

js的引入方式

行内引入 ：onclick点击 alert弹窗

< div ==onclick="alert('南沙基地欢迎你')"==></ div>

内部引入

< script>
      js注释方式
        单行注释：ctrl+?
        多行注释：alt+shift+a   /  ctrl+shift+?
     alert('哈哈哈HAHAHAH')
< /script>

外部引入：外部引入src为js的文件路径
- 如果采用外部引入方式，script标签内部不要写任何代码，不会执行

 < script src="./demo.js">   </ script>

简单的js三部曲

①找到谁(需要操作的那个元素)
②添加事件(点击事件)
③干什么(点击之后要执行的代码)

如何找到这个id名为box的元素
document.getElementById(‘ID名’)
document文档 get获取 element元素 by通过 id
onclick单击
function函数
script标签可以放在任何位置
我们一般放在body结尾之前或者head结尾之前
window.onload当文档和资源加载完毕之后调用
- 页面的代码顺序是从上往下进行加载，很多时候我们常常使用javascript代码对页面中的某一个模块进行操作。为了能够保证操作的模块或对象在js代码之前就加载了，我们不得不把js代码放在页面的底端。但是我们在设计页面的时候，为了把js代码放在一起，或者一个让页面更加简洁的位置，那就有可能出现代码中操作的对象未被加载的情况，那么我们该如何去解决呢？这时候window.onload就被有了存在的意义了。

	window.onload = function () {
   
      document.getElementById('box').onclick = function () {
   
        alert('班长好帅')
      }
    }

变量

变量：可以改变的量，用来存储数据的容器
声明方式：在js中使用var来创建

先创建后赋值

 	var a;
    a = 10;

创建的同时赋值

	var a =10

同时创建多个变量

	var a = 10, b = 20, c = 30;

变量连等

	var a = b = c = 10
	console.log(a,b,c); 
    // console.log()  打印

变量命名规则
1、见名知意，驼峰命名
2、变量名只能以字母_$开头
3、不能使用关键字和保留字
4、变量不能重复，后面会覆盖掉前面的

鼠标事件

点击事件：onclick
双击事件：ondblclick
鼠标移入：onmouseover（会产生冒泡） | onmouseenter
鼠标移出：onmouseout（会产生冒泡） | onmouseleave
鼠标移动：onmousemove
鼠标按下：onmousedown
鼠标抬起：onmouseup
鼠标右击：oncontextmenu

	var box = document.getElementById('box')
    //onclick
    box.onclick = function () {
   
      console.log('我被单击了')
    }
    //ondblclick
    box.ondblclick = function () {
   
      console.log('我被双击了')
    }
    //onmouseover
    box.onmouseover = function(){
   
      console.log('鼠标移入');
    }
    //onmouseenter
    box.onmouseenter = function(){
   
      console.log('鼠标移入');
    }
    //onmouseout
    box.onmouseout = function(){
   
      console.log('鼠标移出');
    }
    //onmouseleave
    box.onmouseleave = function(){
   
      console.log('鼠标移出');
    }
    //onmousemove
    box.onmousemove = function(){
   
      console.log('鼠标移动');
    }
    //onmousedown
    box.onmousedown = function(){
   
      console.log('鼠标按下');
    }
    //onmouseup
    box.onmouseup = function(){
   
      console.log('鼠标抬起');
    }
    //oncontextmenu
    box.oncontextmenu = function(){
   
      console.log('鼠标右击');
    }

操作表单

操作表单
- 获取表单的内容变量 = 元素.value
- 设置表单的内容元素.value = 变量

  //获取表单内容
  var oInp = document.getElementById('inp')
  var inpVal = oInp.value
  console.log(inpVal);
  //设置表单内容
  oInp.value = '哈哈哈哈哈哈'
  console.log(oInp.value);
    /* 
      需求：获取文本域的内容
      分析：找到文本域——>获取
    */
  var oTex = document.getElementById('tex')
  console.log(oTex.value);
   /* 
     需求：获取下拉框的内容
     分析：找到下拉框——>获取
   */
  var oSele = document.getElementById('sele')
  console.log(oSele.value);
  <input type="text" id="inp" value="我是用户名admin">
  <textarea id="tex" cols="30" rows="10">
    哈哈哈哈哈哈哈哈哈哈哈哈哈
  </textarea>
  <select id="sele">
    <option name="lB">李白</option>
    <option name='cWJ' selected>蔡文姬</option>
    <option name="cJSH">成吉思汗</option>
  </select>

操作元素内容

需求：获取元素内容
分析：找到box1这个元素——>获取内容

操作元素内容
- 获取元素内容变量 = 元素.innerHTML 变量 = 元素.innerText
- 设置元素内容元素.innerHTML = 变量元素.innerText = 变量
innerHTML可以解析标签，innerText不可以解析标签

var oDiv1 = document.getElementById('box1')
var oDiv2 = document.getElementById('box2')
oDiv1.innerHTML = "< h1>哈哈哈哈哈哈< /h1>"
oDiv2.innerText = "< h1>呵呵呵呵呵呵< /h1>"

案例：模拟短信

  < div id="box">< /div>
  教师：< input type="text" id="inp">
  < button id="btn">发送< /button>
  < script>
    /* 
      分析：和div、input、button有关
      ==1、点击button按钮
      2、获取input框内容
      3、把input框内容插入到div当中==
    */
    //获取div
    var oDiv = document.getElementById('box')
    //获取input
    var inp = document.getElementById('inp')
    //获取button
    var btn = document.getElementById('btn')
    //1、给button添加点击事件
    btn.onclick = function () {
   
      //2、用一个变量去接收input框内容
      var inpVal = inp.value
      //3、先获取oDiv以前的内容
      var oldDiv = oDiv.innerHTML
      //4、把input框内容插入到div中      字符串拼接
      oDiv.innerHTML = oldDiv + '教师：' + inpVal + '<br/>'
      //5、清空input框内容
      inp.value = ''
    }
  < /script>

操作HTML属性

获取HTML属性变量 = 元素.属性名
设置HTML属性元素.属性名 = 变量
class比较特殊，获取和设置的时候要是用className

	//获取图片HTML属性
    var oImg = document.getElementById('img')
    var oImgSrc = oImg.className
    console.log(oImgSrc);
    //设置图片HTML属性
    oImg.src = './img/3.jpg'
    oImg.className = 'shaha'

操作CSS属性

获取CSS属性变量 = 元素.sytle.样式
设置CSS属性元素.style.样式 = 变量
只能获取行内样式和在js中设置的属性，如果获取内部和外部样式会为空

	//获取div元素
    var oDiv = document.getElementById('box')
    console.log(oDiv.style.height)
    //设置
    oDiv.style.width = '400px'
    console.log(oDiv.style.width);

cssText 设置css样式：元素.style.cssText = ‘样式’

//获取id名为box的这个元素
 var oDiv = document.getElementById('box')
 oDiv.style.cssText = 'width: 100px; height: 200px; background: pink;

数据类型

基本数据类型
- number(数字)
- string(字符串)
- boolean(布尔类型)
- null
- undefined
复杂(引用)数据类型
- object(对象)
- array(数组)
- function(函数)
number类型：
Number类型包含整型和浮点型(浮点数值必须包含一个小数点,且小数点后至少有一位)这两种

//整型
var num = 123
//浮点型
var num = 123.45

typeof 检测数据类型 返回的就是数据类型
1、typeof(变量)
2、typeof 变量

console.log(typeof(num)); //number
console.log(typeof num); //number

NaN not a Number 不是一个数字 任何两个NaN都是不相等的

var num1 = NaN
var num2 = NaN
if(num1 == num2){
   
  console.log('我们两个是相等的');
}

string类型：
String类型：被单引号或双引号包围的字符都是String类型

var str1 = '广东'
var str2 = "广州"
console.log(typeof str1);  //string
console.log(typeof str2);  //string
var str3 = '123456'
console.log(typeof str3);  //string

.length属性 获取字符串的长度

var str4 = 'abcdefg'
console.log(str4.length); //7

.charAt() 通过索引值来获取对应位置的字符 注意：索引是从0开始

console.log(str4.charAt(1));  //b
console.log(str4.charAt(4

最低0.47元/天解锁文章

shadow_tian1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识js

day 01初识JavaScript浏览器历史：网景公司，相对于市面上比较成熟的浏览器，仅仅是用于浏览，并没有任何交互，急需一种脚本语言，用来解决form表单提交布兰登·艾奇。用了10天的时间开发出来了JavaScript，借鉴了c语言的函数和java的管理机制。MOche——>LiveScript——>JavaScript什么叫做JavaScript基于对象：js是一种基于对象的语言，这意味着他能运用自己已经创建好的对象，因此，许多功能可以来自脚本环境中的对象方法与脚本的相互
复制链接

扫一扫